/* Huisstijl Enschede app — kleuren en vormen uit het SHSEL-briefpapier (zie CLAUDE.md) */

@font-face {
  /* Sorts Mill Goudy: vrije variant van Goudy Old Style (briefpapier). Licentie: fonts/OFL.txt */
  font-family: "Sorts Mill Goudy";
  src: url("../fonts/sorts-mill-goudy.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --merkrood: #ED1D27;    /* schild en balken: vlakken, geen kleine tekst */
  --rood: #C10422;        /* knoppen en links: wit erop 6,4:1 */
  --rood-donker: #9E031C;
  --tekst: #3E4049;       /* hoofdtekst: 10:1 op wit */
  --grijs: #707480;       /* secundaire tekst en lijnen uit het logo: 4,7:1 op wit */
  --lijn: #E4E4E7;
  --vlak: #F6F6F7;        /* rustige achtergrond voor kaarten en opties */
  --wit: #FFFFFF;
  --goed: #1E6B3A;
  --goed-licht: #E6F2EA;
  --fout-licht: #FBE5E7;
  --kopletter: "Sorts Mill Goudy", "Goudy Old Style", Georgia, serif;
  --letter: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ruimte: 16px;
  --rond: 12px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--wit);
  color: var(--tekst);
  font-family: var(--letter);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.55;
}

h1, h2, legend { font-family: var(--letter); }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--tekst); color: #fff; padding: 8px 12px; z-index: 10;
}
.skip:focus { left: 8px; top: 8px; }

:focus-visible { outline: 3px solid var(--rood); outline-offset: 2px; }

/* Kopbalk */
.kop {
  position: sticky; top: 0; z-index: 1001; /* boven de kaartlagen van Leaflet (tot 1000) */
  display: flex; align-items: center; gap: 8px;
  min-height: 56px;
  padding: calc(6px + env(safe-area-inset-top)) var(--ruimte) 6px; /* lucht als een lange titel over twee regels loopt */
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
}
.kop__titel { flex: 1; min-width: 0; margin: 0; font: 400 1.4rem/1.2 var(--kopletter); color: var(--tekst); }
.kop__test {
  flex: none; padding: 2px 8px; border: 1px solid var(--grijs); border-radius: 999px;
  font: 600 0.8125rem/1.4 var(--letter); color: var(--grijs); text-transform: uppercase; letter-spacing: 0.04em;
}
.kop__terug {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-left: -10px;
  border: 0; background: none; color: var(--tekst); cursor: pointer; border-radius: 50%;
}
.kop__terug svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* Menuknop rechtsboven: "i" in een tandwiel (informatie en instellingen), op elk scherm op dezelfde plek */
.kop__menu {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; margin-right: -8px;
  color: var(--tekst); border-radius: 50%;
}
.kop__menu svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.kop__menu-tand { stroke-width: 2.6; stroke-dasharray: 3.65 3.65; stroke-linecap: butt; } /* 8 tanden rond het wiel */
.kop__menu-punt { fill: currentColor; stroke: none; }
.kop__menu:hover { background: var(--vlak); }
.kop__menu--actief { color: #fff; background: var(--rood); }
.kop__menu--actief:hover { background: var(--rood-donker); }

/* Alleen voor schermlezers */
.visueel-verborgen {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Inhoud */
main { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: var(--ruimte); }
main:focus { outline: none; }
.scherm > :first-child { margin-top: 0; }
.groot { font: 400 1.75rem/1.2 var(--kopletter); color: var(--tekst); margin: 0.5em 0; text-wrap: balance; }
.klein { font-size: 0.9375rem; color: var(--grijs); }
.testuitleg { display: inline-block; margin-top: 8px; padding: 8px 12px; font-size: 0.9375rem; color: var(--tekst); background: var(--vlak); border: 1px dashed var(--grijs); border-radius: var(--rond); }
/* Taalkeuze op het startscherm: taalnamen in hun eigen taal, geen vlaggen (zie js/taal.js).
   De wereldbol is het gangbare teken voor "taal"; tikdoelen minimaal 44 px. */
.talen { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0; }
.talen__bol { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--grijs); stroke-width: 1.6; margin-right: 2px; }
.talen__knop {
  min-height: 44px; padding: 6px 10px; border: 1px solid var(--lijn); border-radius: 999px;
  background: var(--wit); color: var(--tekst); font: inherit; font-size: 1rem; cursor: pointer;
}
.talen__knop[aria-pressed="true"] { border-color: var(--rood); background: #FDF3F4; font-weight: 600; }
.talen__knop[aria-pressed="true"]::before { content: "✓ " / ""; color: var(--rood); }
.talen__knop:hover { border-color: var(--grijs); }
/* Verhaal of vraag nog niet vertaald: korte melding, de Nederlandse tekst staat eronder. */
.vertaalmelding { margin: 0 0 8px; padding: 6px 10px; font-size: 0.9375rem; color: var(--tekst); background: var(--vlak); border-left: 4px solid var(--grijs); border-radius: 4px; }
.logo { display: block; margin: 8px auto 20px; width: 240px; max-width: 70%; height: auto; }

/* Startscherm met het vestingmotief van het briefpapier linksonder */
#scherm-start { text-align: center; position: relative; }
body:has(#scherm-start:not([hidden])) {
  background: var(--wit) url("../img/vesting-motief.svg") no-repeat left bottom / auto 60vh;
}

/* Lijsten van plekken */
.lijst { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.kaart {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 64px; padding: 12px 14px;
  background: var(--wit); color: inherit; text-align: left;
  border: 1px solid var(--lijn); border-radius: var(--rond);
  font: inherit; cursor: pointer;
}
.kaart:hover { border-color: var(--grijs); }
.kaart:active { background: var(--vlak); }
.kaart__nr {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px dashed var(--rood); color: var(--grijs); /* nog niet bezocht: rode stippelrand, net als op de kaart */
  font: 600 0.95rem var(--letter);
}
/* Bezocht = groen met vinkje, net als op de kaart. Rood blijft voor actie en merk. */
.kaart--bezocht .kaart__nr { background: var(--goed); border-color: var(--goed); color: #fff; }
.kaart__tekst { flex: 1; min-width: 0; }
.kaart__titel { display: block; font-weight: 600; }
.kaart__sub { display: block; font-size: 0.9375rem; color: var(--grijs); }

/* Voortgang: schuine segmenten, zoals de rode voetbalk van het briefpapier. Eén segment per plek. */
.voortgang { display: flex; gap: 4px; height: 12px; margin: 12px 4px 0; }
.voortgang__deel { flex: 1; background: var(--lijn); transform: skewX(-25deg); transition: background-color 0.4s ease; }
.voortgang__deel--klaar { background: var(--merkrood); }

/* Vraag */
/* De vraag is het doel van het scherm: duidelijk gescheiden van het verhaal, in de kopletter. */
.vraag { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--lijn); }
.vraag__label {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font: 700 0.8125rem/1 var(--letter); letter-spacing: 0.08em; text-transform: uppercase; color: var(--grijs);
}
.vraag__label::before { content: ""; width: 22px; height: 8px; background: var(--merkrood); transform: skewX(-25deg); } /* segment uit de voortgangsbalk */
.vraag fieldset { border: 0; margin: 0; padding: 0; }
.vraag legend { font: 400 1.45rem/1.3 var(--kopletter); color: var(--tekst); margin-bottom: 16px; padding: 0; }
.optie {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 56px; margin-bottom: 10px; padding: 10px 14px;
  background: var(--wit); color: inherit; text-align: left;
  border: 2px solid var(--lijn); border-radius: var(--rond);
  font: inherit; cursor: pointer;
}
.optie { scroll-margin-top: calc(var(--kop-h, 66px) + 12px); } /* niet onder de vaste kopbalk scrollen */
.optie:hover:not(:disabled) { border-color: var(--grijs); }
.optie__letter {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--vlak); font: 700 0.95rem var(--letter);
}
.optie:disabled { cursor: default; opacity: 1; }
.optie--goed { border-color: var(--goed); background: var(--goed-licht); }
.optie--goed .optie__letter { background: var(--goed); color: #fff; }
.optie--fout { border-color: var(--rood); background: var(--fout-licht); }
.optie__icoon { margin-left: auto; font: 700 1.1rem var(--letter); }

.feedback { scroll-margin-top: calc(var(--kop-h, 66px) + 12px); margin-top: 8px; padding: 14px; border-radius: var(--rond); background: var(--vlak); border-left: 6px solid var(--grijs); }
.feedback--goed { border-left-color: var(--goed); background: var(--goed-licht); }
.feedback--fout { border-left-color: var(--rood); }
.feedback__kop { display: block; font: 700 1.05rem var(--letter); margin-bottom: 4px; }
.feedback__juist { display: block; margin-bottom: 6px; }
.feedback__uitleg { display: block; }
.feedback--goed .feedback__kop { color: var(--goed); }

.melding { padding: 12px 14px; background: var(--fout-licht); border-radius: var(--rond); }

/* Voetbalk met hoofdknop binnen duimbereik */
.voet {
  position: sticky; bottom: 0; z-index: 1001;
  padding: 12px var(--ruimte) calc(12px + env(safe-area-inset-bottom));
  background: var(--wit); border-top: 1px solid var(--lijn);
  text-align: center;
}
.knop {
  display: block; width: 100%; max-width: 608px; min-height: 52px; margin: 0 auto;
  background: var(--rood); color: #fff; border: 0; border-radius: var(--rond);
  font: 600 1.1rem var(--letter); cursor: pointer;
}
.knop:hover { background: var(--rood-donker); }
.knop:active { background: var(--rood-donker); }
.knop[hidden] { display: none; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Ontdekkaart (js/kaart.js)
   Op de telefoon vult de kaart het scherm tussen kopbalk en voetbalk; daaronder een greep naar de lijst.
   --kop-h en --voet-h worden door js/app.js gemeten (de voetbalk wisselt van hoogte, bijv. "Je loopt langs …"). */
:root { --greep-h: 56px; }
#scherm-kaart { margin-top: calc(-1 * var(--ruimte)); }
.kaartvak { position: relative; margin: 0 calc(-1 * var(--ruimte)); }
.wijkkaart {
  position: relative; z-index: 0; /* eigen laag: teller en knoppen liggen erboven */
  height: max(300px, calc(100dvh - var(--kop-h, 57px) - var(--voet-h, 0px) - var(--greep-h)));
  background: #EDEDEE;
}
@media (min-width: 640px) {
  #scherm-kaart { margin-top: 0; }
  .kaartvak { margin-inline: 0; }
  .wijkkaart { border: 1px solid var(--lijn); border-radius: var(--rond); overflow: hidden; }
}

/* Teller linksboven op de kaart */
.teller {
  position: absolute; z-index: 1; top: 10px; left: 10px; max-width: calc(100% - 20px);
  padding: 8px 12px; background: rgba(255, 255, 255, 0.95);
  border-radius: var(--rond); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  pointer-events: none; /* de kaart eronder blijft bedienbaar */
}
.teller__tal { margin: 0; font: 400 1.2rem/1.2 var(--kopletter); color: var(--tekst); }
.teller__legenda { margin: 4px 0 0; font-size: 0.875rem; line-height: 1.3; color: var(--tekst); }
.legenda {
  display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 4px;
  vertical-align: -2px; border-radius: 3px; font: 700 10px/1 var(--letter); color: #fff;
}
.legenda--open { background: rgba(237, 29, 39, 0.28); border: 2px dashed var(--rood); }
.legenda--klaar { margin-left: 6px; background: var(--goed); }

/* Locatieknop rechtsonder op de kaart, binnen duimbereik (zelfde patroon als bekende kaart-apps) */
.locatieknop {
  position: absolute; z-index: 1; right: 12px; bottom: 32px;
  display: grid; place-items: center; width: 52px; height: 52px;
  background: var(--wit); color: var(--tekst); border: 0; border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); cursor: pointer;
}
.locatieknop svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.locatieknop--aan { color: #1A73E8; }
.locatieknop--aan svg circle:first-child { fill: currentColor; }

/* Panelen onderin over de kaart: locatie-uitleg en "welk verhaal?" */
.kaartpaneel {
  position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 8px; margin: 0;
  max-height: 65%; overflow-y: auto; overscroll-behavior: contain;
  background: var(--wit); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.kaartpaneel__kop { display: flex; align-items: center; gap: 8px; }
.kaartpaneel__kop > :first-child { flex: 1; margin: 0; }
.kaartpaneel__sluit {
  flex: none; width: 44px; height: 44px; margin: -8px -8px -8px 0;
  background: none; border: 0; border-radius: 50%; color: var(--tekst);
  font: 400 1.75rem/1 var(--letter); cursor: pointer;
}

.gps.kaartpaneel { margin-top: 0; background: var(--wit); }

/* Greep onder de kaart: laat zien dat er een lijst is en springt ernaartoe */
.lijstgreep {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: calc(100% + 2 * var(--ruimte)); height: var(--greep-h); margin: 0 calc(-1 * var(--ruimte));
  background: var(--wit); color: var(--tekst); border: 0; border-bottom: 1px solid var(--lijn);
  font: 600 1rem var(--letter); cursor: pointer;
}
.lijstgreep svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 640px) { .lijstgreep { width: 100%; margin-inline: 0; } }
.lijstdeel { scroll-margin-top: var(--kop-h, 57px); }
.lijstdeel:focus { outline: none; }

/* Zonder kaart (laden mislukt): alles gewoon onder elkaar */
.kaartvak--zonder { margin: 0; }
.kaartvak--zonder .wijkkaart, .kaartvak--zonder .locatieknop, .kaartvak--zonder ~ .lijstgreep, .kaartvak--zonder .teller__legenda { display: none; }
.kaartvak--zonder .teller, .kaartvak--zonder .kaartpaneel { position: static; max-width: none; max-height: none; box-shadow: none; padding-inline: 0; background: none; }
.kaartvak--zonder .kaartpaneel { margin-top: 16px; padding: 12px 14px; background: var(--vlak); }

.wijkkaart .leaflet-container { font-family: var(--letter); }
.wijkkaart__anker { background: none; border: 0; }
.wijkkaart__anker--verborgen { visibility: hidden; } /* naam valt over een andere naam: zie ontwar() in kaart.js */
.wijkkaart__label {
  display: inline-block;
  padding: 2px 8px;
  white-space: nowrap;
  font: 600 13px/1.4 var(--letter);
  color: var(--tekst);
  background: #fff;
  border: 1px solid var(--grijs);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
/* Plaats van de naam ten opzichte van het object; ontwar() in kaart.js kiest de eerste die past. */
.wijkkaart__label--midden { transform: translate(-50%, -50%); }
.wijkkaart__label--boven  { transform: translate(-50%, calc(-100% - 12px)); }
.wijkkaart__label--onder  { transform: translate(-50%, 12px); }
.wijkkaart__label--rechts { transform: translate(14px, -50%); }
.wijkkaart__label--links  { transform: translate(calc(-100% - 14px), -50%); }
.wijkkaart__label--klaar { color: var(--goed); border-color: var(--goed); }
/* "Je loopt langs …": de plek blijft iets dikker omrand (ook bij 'minder beweging') en licht eerst twee keer zacht op.
   Geen transform op het label: daarmee staat de naam op zijn plek (zie hierboven). */
path.wijkkaart--langs { stroke-width: 4px; stroke-dasharray: none; }
/* Rood vlak met witte letters, zoals de knop Bekijk: valt in één oogopslag op tussen de witte namen (pre-attentief).
   Actierood: wit erop 6,4:1. */
.wijkkaart__label.wijkkaart--langs { color: #fff; background: var(--rood); border-color: var(--rood); }
@media (prefers-reduced-motion: no-preference) {
  path.wijkkaart--puls { animation: plek-puls 1.2s ease-in-out 2; }
  .wijkkaart__label.wijkkaart--puls { animation: label-puls 1.2s ease-in-out 2; }
  @keyframes plek-puls {
    50% { stroke-width: 10px; stroke-opacity: 0.55; fill-opacity: 0.45; }
  }
  @keyframes label-puls {
    50% { box-shadow: 0 0 0 6px rgba(237, 29, 39, 0.25), 0 1px 2px rgba(0, 0, 0, 0.2); }
  }
}
.gebouwkeuze { padding: 12px; border: 1px solid var(--lijn); border-radius: var(--rond); }
.gebouwkeuze__titel { margin: 0; font-weight: 600; }
.gebouwkeuze .lijst { margin-top: 10px; }
.tussenkop { font: 400 1.3rem/1.2 var(--kopletter); margin: 24px 0 0; }

/* GPS en ontgrendelen (js/locatie.js, js/afstand.js) */
.gps { margin-top: 16px; padding: 12px 14px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--rond); display: grid; gap: 10px; }
.gps__tekst { margin: 0; font-size: 0.9375rem; }
.gps__knop {
  justify-self: start; min-height: 44px; padding: 8px 16px;
  background: var(--wit); color: var(--rood); border: 2px solid var(--rood); border-radius: var(--rond);
  font: 600 1rem var(--letter); cursor: pointer;
}
.gps__knop--stil { color: var(--grijs); border-color: var(--lijn); font-weight: 400; font-size: 0.9375rem; }
.slot { margin-top: 8px; }
.slot__teaser { font: 400 1.25rem/1.4 var(--kopletter); margin: 0 0 12px; }
.slot__uitleg { margin: 0; }
.slot__afstand { margin: 8px 0 0; font: 700 1.5rem/1.3 var(--letter); color: var(--tekst); min-height: 1.3em; }
.net-open { padding: 10px 14px; background: var(--goed-licht); color: var(--goed); font-weight: 600; border-radius: var(--rond); }

/* Foto's bij een plek */
/* Foto's bij een plek: mozaïek (js/fotos.js). Eén foto groot, de rest klein ernaast; samen ca. 200 px hoog,
   zodat het verhaal nog op het eerste scherm begint. Tik op een foto: groot in het fotovenster. */
.fotos { position: relative; margin: 8px calc(-1 * var(--ruimte)) 16px; }
.mozaiek { display: grid; gap: 3px; aspect-ratio: 2 / 1; }
.mozaiek--1 { aspect-ratio: 3 / 2; max-height: 40vh; }
.mozaiek--2 { grid-template-columns: 1fr 1fr; }
.mozaiek--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.mozaiek--3 > :first-child { grid-row: span 2; }
.mozaiek__tegel { position: relative; display: block; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--vlak); }
button.mozaiek__tegel { cursor: zoom-in; }
button.mozaiek__tegel:focus-visible { outline: 3px solid var(--rood); outline-offset: -3px; }
.mozaiek__tegel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mozaiek__meer { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.5); color: var(--wit); font-size: 1.5rem; font-weight: 600; }
.fotos__onder { margin: 6px var(--ruimte) 0; font-size: 0.9375rem; color: var(--grijs); }
.foto__proef { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 2px 8px; border-radius: 4px; background: #C10422; color: #FFFFFF; font-size: 0.8125rem; font-weight: 600; pointer-events: none; }
.foto__bron { display: block; font-size: 0.8125rem; }
.fotos--wazig .mozaiek { overflow: hidden; }
.fotos--wazig img { filter: blur(14px) grayscale(0.4); transform: scale(1.1); }
@media (min-width: 640px) { .fotos { margin-inline: 0; } .mozaiek { border-radius: var(--rond); overflow: hidden; } }

/* Fotovenster: schermvullend, donker, foto in zijn geheel (niet bijgesneden) met bijschrift en bron. */
html:has(.fotovenster[open]) { overflow: hidden; }
.fotovenster { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #111214; color: #FFFFFF; font-family: var(--letter); }
.fotovenster::backdrop { background: #111214; }
.fotovenster[open] { display: flex; flex-direction: column; }
.fotovenster__balk { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 4px 0 var(--ruimte); }
.fotovenster__teller { font-size: 1rem; }
/* Altijd rechtsboven, ook als de teller er niet is (bij één foto). Vaste plek = voorspelbaar (WCAG 3.2.3). */
.fotovenster__sluit { margin-left: auto; width: 48px; height: 48px; border: 0; border-radius: 50%; background: transparent; color: #FFFFFF; font-size: 1.5rem; cursor: pointer; }
.fotovenster__rij { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.fotovenster__rij::-webkit-scrollbar { display: none; }
.fotovenster__foto .foto__proef { position: static; align-self: flex-start; margin: 0 0 8px var(--ruimte); }
.fotovenster__foto { flex: 0 0 100%; position: relative; display: flex; flex-direction: column; justify-content: center; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.fotovenster__foto img { display: block; width: 100%; max-height: 70dvh; object-fit: contain; }
.fotovenster__foto figcaption { max-width: 40rem; margin: 0 auto; padding: 12px var(--ruimte) 24px; font-size: 1rem; line-height: 1.45; color: #E8E8EA; }
.fotovenster__foto .foto__bron { margin-top: 4px; font-size: 0.875rem; color: #C4C6CC; }
.fotovenster__pijl { position: absolute; top: 45%; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #FFFFFF; font-size: 2rem; line-height: 1; cursor: pointer; }
.fotovenster__pijl--vorige { left: 8px; }
.fotovenster__pijl--volgende { right: 8px; }
.fotovenster__pijl:disabled { opacity: 0.25; cursor: default; }
.fotovenster__pijl[hidden], .fotovenster__teller[hidden] { display: none; }
.fotovenster button:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }

/* Opnieuw beginnen (in het menu): gewone knop, de bevestiging erna is het vangnet */
.opnieuw__uitleg { margin: 0 0 12px; }
.opnieuw__knop {
  min-height: 44px; padding: 8px 16px; background: #FDF3F4; border: 2px solid var(--rood);
  border-radius: var(--rond); color: var(--rood); font: 600 1rem var(--letter); cursor: pointer;
}
.opnieuw__knop[aria-expanded="true"], .opnieuw__knop:hover { background: var(--fout-licht); }
.opnieuw__klaar { margin: 32px 0 0; padding: 12px 14px; border-left: 6px solid var(--goed); background: var(--goed-licht); border-radius: var(--rond); color: var(--goed); font-weight: 600; }
.opnieuw__vraag { margin-top: 8px; padding: 12px 14px; background: var(--fout-licht); border-radius: var(--rond); }
.opnieuw__vraag p { margin: 0 0 10px; }
.opnieuw__knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.opnieuw__ja, .opnieuw__nee { min-height: 44px; padding: 8px 16px; border-radius: var(--rond); font: 600 1rem var(--letter); cursor: pointer; }
.opnieuw__ja { background: var(--rood); color: #fff; border: 0; }
.opnieuw__nee { background: var(--wit); color: var(--tekst); border: 1px solid var(--grijs); }

/* Keuzes na een antwoord: "Ook in de buurt" */
.dichtbij { margin-top: 8px; }
.dichtbij__klaar { margin: 16px 0 0; padding: 12px 14px; background: var(--goed-licht); color: var(--goed); font-weight: 600; border-radius: var(--rond); }

/* "Je loopt langs …" in de voetbalk, binnen duimbereik */
.langs {
  max-width: 608px; margin: 0 auto 10px; padding: 10px 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  text-align: left; background: var(--vlak); border: 1px solid var(--lijn); border-left: 6px solid var(--merkrood); border-radius: var(--rond);
}
.langs__tekst { flex: 1 1 180px; margin: 0; line-height: 1.35; }
.langs__label { display: block; font-size: 0.875rem; color: var(--grijs); }
.langs__vraag { display: block; color: var(--tekst); font-size: 0.9375rem; }
.langs__bekijk {
  flex: none; min-height: 44px; padding: 8px 18px; border-radius: var(--rond); font: 600 1rem var(--letter); cursor: pointer;
  background: var(--rood); color: #fff; border: 0;
}
.langs__bekijk:hover { background: var(--rood-donker); }
@media (prefers-reduced-motion: no-preference) {
  .langs:not([hidden]) { animation: langs-in 0.25s ease-out; }
  @keyframes langs-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* Voortgang als verzameling */
.ontdekt { margin-top: 16px; }
.ontdekt__totaal { margin: 6px 0 0; }
.ontdekt__gebouwen { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ontdekt__gebouw { padding: 2px 10px; font-size: 0.9375rem; color: var(--tekst); background: var(--vlak); border: 1px solid var(--lijn); border-radius: 999px; }
.ontdekt__gebouw--af { color: var(--goed); background: var(--goed-licht); border-color: var(--goed); font-weight: 600; }
.mijlpaal { margin: 12px 0 0; padding: 14px 16px 16px; border-radius: var(--rond); background: var(--goed-licht); border: 1px solid var(--goed); }
.mijlpaal__tekst { margin: 0; font: 400 1.35rem/1.25 var(--kopletter); color: var(--goed); }
.mijlpaal__balk { margin-top: 12px; }
.mijlpaal__vervolg { margin: 14px 0 0; font-weight: 600; color: var(--tekst); }
.mijlpaal__lijst { margin-top: 8px; }
.mijlpaal--af { background: var(--goed); }
.mijlpaal--af .mijlpaal__tekst { color: #fff; }
/* Alles bij dit gebouw ontdekt: donkergroen vak. De balk houdt zijn eigen kleuren (rood = ontdekt, grijs = nog niet)
   op een witte strook, zodat hij overal hetzelfde leest en het verschil zichtbaar blijft. */
.mijlpaal--af .mijlpaal__balk { margin-inline: 0; padding: 5px 10px; height: 22px; background: #fff; border-radius: 6px; }
/* Het nieuwe segment loopt vol: zichtbaar wat je net hebt toegevoegd */
@media (prefers-reduced-motion: no-preference) {
  .voortgang__deel--nieuw { animation: deel-vol 0.9s ease-out 0.3s both; }
  @keyframes deel-vol { from { background: var(--lijn); } 60% { background: var(--merkrood); transform: skewX(-25deg) scaleY(1.6); } to { transform: skewX(-25deg); } }
}

/* Telefoon liggend: weinig hoogte, dus de teller compacter en de kaart mag kleiner */
@media (max-height: 500px) {
  .wijkkaart { height: max(200px, calc(100dvh - var(--kop-h, 57px) - var(--voet-h, 0px) - var(--greep-h))); }
  .teller { padding: 4px 10px; }
  .teller__tal { font-size: 1rem; }
  .teller__legenda { display: none; }
}

/* Menu (js/app.js, js/instellingen.js) */
.menu__form { margin: 0; }
.menu__kop { font: 400 1.4rem/1.2 var(--kopletter); margin: 28px 0 4px; }
.menu > .menu__form > .menu__kop:first-child { margin-top: 4px; }
/* "Over de Enschede app": duidelijk een nieuw deel (tekst) na de instellingen */
.menu > .menu__kop { margin-top: 48px; }
.menu__subkop { font: 700 1rem/1.3 var(--letter); margin: 20px 0 4px; }
.menu__info p { margin: 8px 0; }
.menu a, .ontdekt__antwoorden a, .antwoord__titel { color: var(--rood); font-weight: 600; }
.keuze { border: 0; margin: 32px 0 0; padding: 0; }
/* Wet van nabijheid: een vraag staat dicht bij zijn eigen keuzes en ver van de vorige vraag. */
.menu__kop + .keuze { margin-top: 12px; }
/* Rangorde: de vraag is groter en zwaarder dan de keuzes eronder. */
.keuze legend, .menu__vraag { padding: 0; margin: 0 0 10px; font: 700 1.125rem/1.3 var(--letter); }
/* Sierletter (menu__kop) alleen boven tekst; alles wat je instelt, heeft de opmaak van een vraag. */
.opnieuw { margin-top: 32px; }
.keuze__optie strong { font-weight: 600; }
.keuze__optie {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: 56px; margin-bottom: 8px; padding: 12px 14px;
  border: 2px solid var(--lijn); border-radius: var(--rond); cursor: pointer;
}
.keuze__optie:has(input:checked) { border-color: var(--rood); background: #FDF3F4; }
.keuze__optie:has(input:focus-visible) { outline: 3px solid var(--rood); outline-offset: 2px; }
.keuze__optie input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--rood); }
.keuze__optie--uit { cursor: default; color: var(--grijs); background: var(--vlak); }
.keuze__standaard { font-weight: 400; color: var(--grijs); }
.keuze__uitleg { display: block; font-size: 0.9375rem; color: var(--grijs); }
.keuze__aantal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 8px; padding: 4px 14px 8px 48px; }
.keuze__aantal label { font-weight: 600; }
.keuze__aantal input {
  width: 6em; min-height: 44px; padding: 6px 10px;
  border: 2px solid var(--grijs); border-radius: 8px; font: inherit; color: var(--tekst);
}

/* Antwoord bewaard (antwoorden aan het eind): je keuze zonder goed/fout */
.optie--gekozen { border-color: var(--tekst); background: var(--vlak); }
.optie--gekozen .optie__letter { background: var(--tekst); color: #fff; }
.feedback--bewaard { border-left-color: var(--tekst); }
.mijlpaal__knop {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; padding: 8px 16px;
  background: var(--wit); color: var(--goed); border: 2px solid var(--goed); border-radius: var(--rond);
  font-weight: 600; text-decoration: none;
}

/* Mijn antwoorden */
.ontdekt__antwoorden { margin: 12px 0 0; }
.ontdekt__antwoorden a { display: inline-flex; align-items: center; min-height: 44px; }
.antwoorden { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.antwoord { padding: 12px 14px; border: 1px solid var(--lijn); border-left: 6px solid var(--grijs); border-radius: var(--rond); }
.antwoord--goed { border-left-color: var(--goed); }
.antwoord--fout { border-left-color: var(--rood); }
.antwoord__kop { margin: 0; font: 400 1.2rem/1.3 var(--kopletter); }
.antwoord__titel { display: inline-block; padding: 4px 0; }
.antwoord p { margin: 6px 0 0; }
.antwoord__vraag { font-style: italic; }
.antwoord--goed .antwoord__icoon { color: var(--goed); }
.antwoord--fout .antwoord__icoon { color: var(--rood); }
.antwoord__uitleg { color: var(--grijs); }

/* Eindscherm (js/app.js, eindScherm): positief afsluiten (piek-eindregel) */
.eind__vak { padding: 16px 16px 18px; border-radius: var(--rond); background: var(--goed-licht); border: 1px solid var(--goed); }
.eind__kop { margin: 0; font: 400 1.75rem/1.2 var(--kopletter); color: var(--goed); text-wrap: balance; }
.eind__kop:focus { outline: none; }
.eind__tal { margin: 8px 0 0; font-size: 1.0625rem; color: var(--tekst); }
.eind__balk { margin-top: 14px; }
/* Doel gehaald of alles ontdekt: donkergroen vak, zoals de mijlpaal; de balk op een witte strook */
.eind__vak--af { background: var(--goed); }
.eind__vak--af .eind__kop, .eind__vak--af .eind__tal { color: #fff; }
.eind__vak--af .eind__balk { padding: 5px 10px; height: 22px; background: #fff; border-radius: 6px; }
.eind__score { margin: 16px 0 0; font-weight: 600; font-size: 1.0625rem; }
.eind__subkop { font: 400 1.3rem/1.2 var(--kopletter); margin: 28px 0 8px; }
.eind__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.eind__plek { padding: 3px 10px; font-size: 0.9375rem; color: var(--goed); background: var(--goed-licht); border: 1px solid var(--goed); border-radius: 999px; }
.eind__plek::before { content: "✓ "; }
.eind__antwoorden { margin: 12px 0 0; }
.eind a { color: var(--rood); font-weight: 600; }
.eind__antwoorden a { display: inline-flex; align-items: center; min-height: 44px; }
.eind__dank { margin-top: 8px; }
.eind__dank p { margin: 8px 0; }
.mijlpaal__eind { margin: 12px 0 0; color: inherit; }
.mijlpaal--af .mijlpaal__eind { color: #fff; }

/* Menu: naar het eindscherm */
.menu__eind { margin-top: 32px; }
.menu__eind-uitleg { margin: 0 0 12px; }
.menu .menu__eind-knop {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
  background: var(--wit); color: var(--rood); border: 2px solid var(--rood); border-radius: var(--rond);
  font-weight: 600; text-decoration: none;
}
.menu .menu__eind-knop:hover { background: #FDF3F4; }