/* Gedeelde bediening: knoppen, fotovergrootglas en offerteformulier.
   Oorspronkelijk uit style.css; museum.css/style.css worden hier niet geladen.
   Kleuren en maten worden geleverd door site.css. */
.knop {
  appearance: none;
  border: 1px solid var(--lijn-sterk);
  background: transparent;
  color: var(--inkt);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.72em 1.5em;
  border-radius: var(--rond);
  cursor: pointer;
  transition: background var(--soepel), border-color var(--soepel), color var(--soepel),
    transform var(--soepel);
}

.knop:hover {
  background: rgba(238, 240, 236, 0.08);
  border-color: var(--inkt-flauw);
}

.knop:active {
  transform: translateY(1px);
}

.knop.primair {
  background: var(--accent);
  border-color: var(--accent);
  color: #1e2a21;
}

.knop.primair:hover {
  background: #e19f79;
  border-color: #e19f79;
}

.knop.primair:disabled {
  opacity: 0.55;
  cursor: progress;
}

.knop.stil {
  border-color: transparent;
  color: var(--inkt-zacht);
  padding-inline: 0.9em;
}

.knop.stil:hover {
  color: var(--inkt);
  background: rgba(238, 240, 236, 0.06);
}

.knop.breed {
  width: 100%;
  justify-content: center;
}

.sluitknop {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--lijn);
  border-radius: 50%;
  background: rgba(22, 32, 25, 0.72);
  color: var(--inkt-zacht);
  cursor: pointer;
  z-index: 5;
  transition: color var(--soepel), border-color var(--soepel), background var(--soepel);
}

.sluitknop:hover {
  color: var(--inkt);
  border-color: var(--lijn-sterk);
  background: rgba(22, 32, 25, 0.95);
}

.sluitknop svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* Native bediening en scrollbalken horen bij het donkere dialoogoppervlak. */
#detail, #offerte, #kiezer, #mand {
  color-scheme: dark;
  scrollbar-color: var(--lijn-sterk) var(--nacht-zacht);
}

/* ------------------------------------------------------------------ */
#detail {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: clamp(0.9rem, 4vh, 3rem) clamp(0.9rem, 4vw, 3rem);
  background: rgba(14, 21, 16, 0.9);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 340ms var(--soepel-curve), visibility 0s linear 340ms;
}

#detail.open {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 340ms var(--soepel-curve), visibility 0s linear 0s;
}

.detail-binnen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 27rem);
  align-items: center;
  gap: clamp(1.2rem, 3.5vw, 3rem);
  width: 100%;
  max-width: 1500px;
  max-height: 100%;
  /* Het opzetje waarmee de foto naar je toe komt. */
  transform: scale(0.965);
  opacity: 0;
  transition: transform 420ms var(--soepel-curve), opacity 300ms ease;
}

#detail.open .detail-binnen {
  transform: none;
  opacity: 1;
}

/* --- De foto --------------------------------------------------------- */

.detail-beeld {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  max-height: 100%;

  /* De online fotoweergave is altijd een vlakke witte passe-partout.
     Historische lijstkeuzes in photos.json horen alleen bij het oude museum. */
  --passepartout: clamp(16px, 3vmin, 36px);
  --beeldkader: min(80vh, 980px);
}

.detail-lijst {
  display: inline-block;
  margin: 0;
  max-width: 100%;
  padding: 0;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.18);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 320ms ease, transform 320ms var(--soepel-curve);
}

.detail-lijst.geladen { opacity: 1; transform: none; }

.detail-passepartout {
  display: block;
  padding: var(--passepartout);
  background: #fff;
  border: 0;
  box-shadow: none;
}

.detail-beeld img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(var(--beeldkader) - 2 * var(--passepartout));
  object-fit: contain;
  margin: 0;
  border: 0;
  box-shadow: none;
}

.detail-lader {
  position: absolute;
  font-size: 0.8rem;
  color: var(--inkt-flauw);
  letter-spacing: 0.04em;
}

.detail-lader[hidden] {
  display: none;
}

/* --- De tekst -------------------------------------------------------- */

.detail-tekst {
  min-width: 0;
  max-height: 100%;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.detail-badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--lijn-sterk);
  border-radius: 100px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inkt-flauw);
}

.detail-badge[hidden] {
  display: none;
}

.detail-tekst h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  line-height: 1.08;
}

.detail-meta {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.detail-verhaal {
  margin-top: 1.25rem;
  font-weight: 300;
  color: rgba(238, 240, 236, 0.84);
}

.detail-verhaal[hidden] {
  display: none;
}

.detail-gegevens {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1.5rem;
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--lijn);
  font-size: 0.84rem;
}

.detail-gegevens[hidden] {
  display: none;
}

.detail-gegevens dt {
  color: var(--inkt-flauw);
}

.detail-gegevens dd {
  margin: 0;
  color: var(--inkt-zacht);
}

.detail-tekst .knop.primair {
  margin-top: 2rem;
}

.detail-navigatie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--lijn);
}

.detail-teller {
  font-size: 0.78rem;
  color: var(--inkt-flauw);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

/* Tijdens een rondleiding bedient de rondleiding zelf het bladeren. */
#detail.rondleiding .detail-navigatie {
  display: none;
}
/* ------------------------------------------------------------------ */
#offerte {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--soepel), visibility 0s linear var(--soepel-tijd);
}

#hulp.open,
#lijst.open,
#offerte.open {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--soepel), visibility 0s linear 0s;
}

/* Gesloten panelen ook echt uit de toetsenbordvolgorde halen, anders belandt
   de tabtoets in onzichtbare knoppen. */
#hulp:not(.open),
#lijst:not(.open),
#offerte:not(.open),
#detail:not(.open),
#tourbalk:not(.open) {
  visibility: hidden;
}

#hulp {
  place-items: center;
  padding: 1.5rem;
  background: rgba(8, 9, 10, 0.82);
  backdrop-filter: blur(6px);
}

.hulp-binnen {
  position: relative;
  width: min(880px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 2.5rem;
  background: var(--paneel-vast);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-groot);
  box-shadow: var(--schaduw);
}

.hulp-binnen h2 {
  font-family: var(--serif);
  font-size: 2rem;
  margin-bottom: 1.75rem;
}

.hulp-kolommen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2rem;
}

.hulp-kolommen h3 {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.hulp-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--inkt-zacht);
}

.hulp-voet {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lijn);
  font-size: 0.86rem;
  color: var(--inkt-flauw);
}

/* ------------------------------------------------------------------ */
/* 11. Lijstweergave                                                   */
/* ------------------------------------------------------------------ */

#lijst {
  background: var(--achtergrond);
  overflow: hidden;
}

.lijst-binnen {
  height: 100%;
  overflow-y: auto;
  padding: 2rem clamp(1.2rem, 5vw, 4rem) 5rem;
}

.lijst-kop {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1400px;
  margin: 0 auto 2.5rem;
  padding-top: 0.5rem;
}

.lijst-kop h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3rem);
}

.lijst-kop p {
  color: var(--inkt-flauw);
  font-size: 0.92rem;
  margin-top: 0.25rem;
}

.lijst-kop .sluitknop {
  position: static;
}

.lijst-zaal {
  max-width: 1400px;
  margin: 0 auto 3.5rem;
}

.lijst-zaal h2,
.lijst-zaal h3 {
  font-family: var(--serif);
  font-size: 1.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--lijn);
}

.lijst-onderschrift {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--inkt-flauw);
}

.lijst-rooster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.lijst-kaart {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lijst-kaart img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #263528;
  border-radius: var(--rond);
  transition: transform var(--soepel), filter var(--soepel);
}

.lijst-kaart:hover img {
  transform: scale(1.015);
  filter: brightness(1.08);
}

.lijst-tekst {
  display: flex;
  flex-direction: column;
}

.lijst-tekst strong {
  font-weight: 500;
  font-size: 0.94rem;
}

.lijst-meta {
  font-size: 0.78rem;
  color: var(--inkt-flauw);
}

/* ------------------------------------------------------------------ */
/* 12. Offerteformulier                                                */
/* ------------------------------------------------------------------ */

#offerte {
  place-items: center;
  padding: clamp(0px, 3vh, 2rem) clamp(0px, 3vw, 2rem);
  background: rgba(8, 9, 10, 0.86);
  backdrop-filter: blur(8px);
}

.offerte-binnen {
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: 100%;
  height: min(880px, 100%);
  background: var(--paneel-vast);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-groot);
  box-shadow: var(--schaduw);
  overflow: hidden;
}

.offerte-kop {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 2rem 1rem;
  border-bottom: 1px solid var(--lijn);
}

.offerte-kop .sluitknop {
  position: static;
  flex: none;
}

.offerte-boven {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.offerte-kop h2 {
  font-family: var(--serif);
  font-size: 1.85rem;
}

.offerte-stippen {
  display: flex;
  gap: 6px;
  padding: 1rem 2rem 0;
}

.stip {
  flex: 1;
  height: 3px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: rgba(238, 240, 236, 0.13);
  cursor: pointer;
  transition: background var(--soepel);
}

.stip.gedaan {
  /* Dit was het enige goud dat op de site was blijven staan, en het
     haalde 2,45 waar 3,0 nodig is. Nu het accent, halfdoorzichtig. */
  background: rgba(210, 142, 102, 0.68);
}

.stip.actief {
  background: var(--accent);
}

.offerte-inhoud {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 2rem;
}

.stap[hidden] {
  display: none;
}

.stap-nummer {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--inkt-flauw);
  margin-bottom: 0.75rem;
}

.stap-kop {
  font-family: var(--serif);
  font-size: 1.9rem;
  line-height: 1.15;
}

.stap-intro {
  margin-top: 0.75rem;
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--inkt-zacht);
  max-width: 52ch;
}

.veld {
  margin-top: 1.75rem;
}

.veld-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.88rem;
  font-weight: 500;
}

.verplicht {
  color: var(--accent);
}

.veld input[type='text'],
.veld input[type='email'],
.veld input[type='tel'],
.veld textarea,
.veld select {
  width: 100%;
  padding: 0.75rem 0.75rem;
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--rond);
  background: rgba(238, 240, 236, 0.04);
  color: var(--inkt);
  font: inherit;
  font-size: 0.94rem;
  transition: border-color var(--soepel), background var(--soepel);
}

.veld textarea {
  resize: vertical;
  min-height: 6rem;
  line-height: 1.6;
}

.veld select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--inkt-flauw) 50%),
    linear-gradient(135deg, var(--inkt-flauw) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.veld select option {
  background: var(--paneel-vast);
  color: var(--inkt);
}

.veld input:focus,
.veld textarea:focus,
.veld select:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(238, 240, 236, 0.07);
}

/* De randkleur hierboven is genoeg als je met de muis in een veld klikt: je
   weet dan zelf waar je bent. Kom je met de tabtoets, dan is een randkleurtje
   te weinig om een veld tussen zes andere aan te wijzen. Daar hoort de ring
   dus gewoon terug. */
.veld input:focus-visible,
.veld textarea:focus-visible,
.veld select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.veld input::placeholder,
.veld textarea::placeholder {
  color: rgba(238, 240, 236, 0.3);
}

.veld-hulp {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--inkt-flauw);
}

.veld.fout input,
.veld.fout textarea,
.veld.fout select {
  border-color: var(--waarschuwing);
}

.veld-fout {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--waarschuwing);
}

/* Keuzekaarten */
.kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.kaart {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1rem;
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--rond);
  background: rgba(238, 240, 236, 0.03);
  color: var(--inkt);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--soepel), background var(--soepel), transform var(--soepel);
}

.kaart:hover {
  border-color: var(--inkt-flauw);
  background: rgba(238, 240, 236, 0.07);
}

.kaart.gekozen {
  border-color: var(--accent);
  background: var(--accent-zacht);
}

.kaart svg {
  width: 24px;
  height: 24px;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.kaart-titel {
  font-weight: 500;
  font-size: 0.95rem;
}

.kaart-uitleg {
  font-size: 0.8rem;
  color: var(--inkt-flauw);
  line-height: 1.45;
}

/* Vinkjes */
.vinkjes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem;
}

.vinkje {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color var(--soepel), background var(--soepel);
}

.vinkje:hover {
  border-color: var(--lijn-sterk);
  background: rgba(238, 240, 236, 0.04);
}

.vinkje input {
  margin: 0.25rem 0 0;
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex: none;
}

.vinkje-akkoord {
  border-color: transparent;
  padding-left: 0;
}

.vinkje-akkoord:hover {
  border-color: transparent;
  background: none;
}

/* Voorbeeldzinnen */
.voorbeelden {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  align-items: center;
}

.voorbeelden-kop {
  width: 100%;
  font-size: 0.76rem;
  color: var(--inkt-flauw);
  margin-bottom: 0.25rem;
}

.voorbeeld {
  padding: 0.25rem 0.75rem;
  border: 1px dashed var(--lijn-sterk);
  border-radius: 100px;
  background: none;
  color: var(--inkt-zacht);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: color var(--soepel), border-color var(--soepel), background var(--soepel);
}

.voorbeeld:hover {
  color: var(--inkt);
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-zacht);
}

.honingpot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.offerte-voet {
  padding: 1rem 2rem calc(1.3rem + var(--veilig-onder));
  border-top: 1px solid var(--lijn);
}

.offerte-voet[hidden] {
  display: none;
}

.offerte-navigatie {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.offerte-navigatie .knop.stil {
  margin-right: auto;
}

.offerte-status {
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--inkt-zacht);
}

.offerte-status:empty {
  display: none;
}

.offerte-status.fout {
  color: var(--waarschuwing);
}

.bedankt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 3rem 1rem;
}

.bedankt-vink {
  width: 62px;
  height: 62px;
  color: var(--accent);
}

.bedankt .stap-intro {
  max-width: 40ch;
}

.bedankt .knop {
  margin-top: 1rem;
}

/* ------------------------------------------------------------------ */
@media (max-width:820px) {
 #detail { padding:0; place-items:stretch }
 .detail-binnen { grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr; align-items:start; gap:0; max-height:none; height:100%; overflow-y:auto; overscroll-behavior:contain }
 .detail-beeld { padding:3.5rem 1rem .5rem; --beeldkader:50vh; --passepartout:clamp(11px,2.6vmin,26px); --lijstrand:clamp(7px,1.3vmin,14px) }
 .detail-tekst { max-height:none; overflow:visible; padding:1.25rem 1.25rem calc(6rem + var(--veilig-onder)) }
 .offerte-binnen { height:100%; border-radius:0; border:none }
 .offerte-kop,.offerte-inhoud,.offerte-voet,.offerte-stippen { padding-left:1.25rem; padding-right:1.25rem }
}
@media (max-height:620px) { .detail-beeld { height:34vh } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important } }
#detail.heeft-blad,
#hulp.heeft-blad,
#lijst.heeft-blad,
#offerte.heeft-blad {
  opacity: 1;
  transition: none;
}

#detail.heeft-blad:not(.open),
#hulp.heeft-blad:not(.open),
#lijst.heeft-blad:not(.open),
#offerte.heeft-blad:not(.open) {
  visibility: hidden;
  pointer-events: none;
}

#detail.heeft-blad.open,
#hulp.heeft-blad.open,
#lijst.heeft-blad.open,
#offerte.heeft-blad.open {
  visibility: visible;
  pointer-events: auto;
}

/* De sluier volgt de veer. calc() in het alfakanaal kan alleen met de
   spatie-notatie van moderne CSS; vandaar rgb(a b c / d) en niet rgba(). */
#detail.heeft-blad {
  background: rgb(14 21 16 / calc(0.9 * var(--blad-sluier, 1)));
  backdrop-filter: blur(var(--blad-waas, 12px)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--blad-waas, 12px)) saturate(130%);
}

#offerte.heeft-blad {
  background: rgb(15 22 17 / calc(0.86 * var(--blad-sluier, 1)));
  backdrop-filter: blur(var(--blad-waas, 8px));
  -webkit-backdrop-filter: blur(var(--blad-waas, 8px));
}

#hulp.heeft-blad {
  background: rgb(15 22 17 / calc(0.82 * var(--blad-sluier, 1)));
  backdrop-filter: blur(var(--blad-waas, 6px));
  -webkit-backdrop-filter: blur(var(--blad-waas, 6px));
}

/* De lijst is geen zwevend kaartje maar een volle pagina; die krijgt dus
   geen doorschijnende sluier maar dekt gewoon af. */
#lijst.heeft-blad {
  background: var(--achtergrond);
}

/* De kaart die beweegt. transform wordt per beeld door de veer gezet, dus
   hier absoluut geen transition: die zou er dwars doorheen fietsen. */
.heeft-blad .detail-binnen,
.heeft-blad .hulp-binnen,
.heeft-blad .lijst-binnen,
.heeft-blad .offerte-binnen {
  transition: none;
  will-change: transform;
  /* De vinger stuurt de verticale richting; laat de browser er niet
     tegelijk mee gaan scrollen. */
  touch-action: pan-y;
}

/* Tijdens het slepen niets selecteren — anders sleep je tekst mee. */
.heeft-blad.sleept,
.heeft-blad.sleept * {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
}

/* Een greepje bovenaan vertelt zonder woorden dat je het blad kunt pakken.
   Alleen op aanraakschermen: met een muis sleep je hier niet. */
.heeft-blad .blad-greep {
  display: none;
}

body.raakt-aan .heeft-blad .blad-greep {
  display: block;
  position: absolute;
  top: 8px;
  left: 50%;
  width: 38px;
  height: 4px;
  margin-left: -19px;
  border-radius: 4px;
  background: var(--inkt-flauw);
  pointer-events: none;
  z-index: 6;
}

/* ------------------------------------------------------------------ */
/* Minder beweging, minder doorzichtigheid, meer contrast              */
/*                                                                     */
/* Drie losse voorkeuren die mensen los van elkaar kunnen aanzetten, en */
/* die dus ook los van elkaar beantwoord horen te worden.               */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  /* Minder beweging is niet géén terugkoppeling: het blad vervaagt nu in
     plaats van te schuiven. Wat er gebeurt blijft zichtbaar, alleen zonder
     de beweging die iemand duizelig maakt. */
  .heeft-blad {
    transition: opacity 180ms ease;
  }

  .heeft-blad .detail-binnen,
  .heeft-blad .hulp-binnen,
  .heeft-blad .lijst-binnen,
  .heeft-blad .offerte-binnen {
    transform: none !important;
    transition: opacity 180ms ease;
  }
}

@media (prefers-reduced-transparency: reduce) {
  /* Doorschijnend wordt vast: hogere dekking en geen vervaging. Anders
     blijft er van de leesbaarheid weinig over. */
  #detail.heeft-blad,
  #offerte.heeft-blad,
  #hulp.heeft-blad {
    background: var(--achtergrond);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #nav,
  #hud,
  #tourbalk {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (prefers-contrast: more) {
  /* Bijna dekkend, met een rand die het vlak echt begrenst. */
  #detail.heeft-blad,
  #offerte.heeft-blad,
  #hulp.heeft-blad {
    background: var(--achtergrond);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .knop,
  .pil,
  .hud-knop {
    border-color: currentColor;
  }
}

/* ------------------------------------------------------------------ */
/* 16. Reactie op het indrukken                                        */
/*                                                                     */
/* Terugkoppeling hoort bij het aanraken, niet bij het loslaten. Wacht  */
/* je op de klik, dan voelt een knop dood in precies het moment dat de  */
/* bezoeker zich afvraagt of hij wel iets geraakt heeft.                */
/*                                                                     */
/* De duur staat hier apart en kort. Deze onderdelen hebben voor kleur  */
/* bij zweven een overgang van 260 ms, en dat is voor ingedrukt veel te */
/* traag: dan zie je de reactie pas als je alweer losgelaten hebt.      */
/* ------------------------------------------------------------------ */

.knop:active,
.hud-knop:active,
.sluitknop:active,
.intro-keuze:active,
.lijst-kaart:active,
.kaart:active,
.stip:active {
  transition-duration: 100ms;
}

.hud-knop:active {
  transform: scale(0.94);
}

.sluitknop:active {
  transform: scale(0.92);
}

.lijst-kaart:active,
.kaart:active {
  transform: scale(0.985);
}

.intro-keuze:active {
  transform: scale(0.985);
}

/* Bij minder beweging blijft de terugkoppeling bestaan, maar dan als een
   kleurverschil in plaats van een schaalsprong. Weg is geen optie: dan weet
   je niet of je iets geraakt hebt. */
@media (prefers-reduced-motion: reduce) {
  .knop:active,
  .hud-knop:active,
  .sluitknop:active,
  .intro-keuze:active,
  .lijst-kaart:active,
  .kaart:active {
    transform: none;
    filter: brightness(1.25);
  }
}