/* De gedeelde schil van Omnitour voor de Pano2VR 7.1-speler (pano2vr_player.js).
   De speler tekent het beeld; alles wat je ziet en aanklikt staat hier. Klassen die met ot- beginnen
   leven in de laag van de speler.

   Themabaar: alle kleuren, letters, afrondingen, randen en schaduwen zijn variabelen. De waarden
   hieronder zijn het standaardthema, de taal van de explainerfilms: Bricolage Grotesque (800 roept,
   300 legt uit), navy, blauw en cyaan, witte pillen met een navy ring en een cyaan stip, vensters met
   een rand van 3 px en een harde schaduw zonder vervaging. Een tour kan elke variabele overschrijven
   in "thema.tokens" van tour.json; bouw.mjs zet die in een <style> na dit bestand. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("lettertypen/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* ---- kleuren ---- */
  --grond: #001a40;                    /* achter en onder het beeld */
  --vlak: #ffffff;                     /* kaarten, pillen, knoppen, vensters */
  --vlak-2: #f4f7fc;                   /* tweede vlak: adresbalk, lege afbeelding */
  --inkt: #001a40;                     /* tekst */
  --inkt-zacht: rgba(0, 26, 64, 0.72); /* bijtekst, boventitels */
  --lijn: #001a40;                     /* ringen, randen, harde schaduw */
  --lijn-zacht: rgba(0, 26, 64, 0.12); /* scheidingslijnen binnen een kaart */
  --zweef: rgba(0, 26, 64, 0.06);      /* achter een lijstknop onder de muis */
  --accent: #0068ff;                   /* de oproep, wat actief is */
  --op-accent: #ffffff;
  --stip: #00b4c3;                     /* de stip, de voet van een punt, het informatiepunt */
  --op-stip: #001a40;
  --stip-op-donker: #26c0cd;
  --donker: #001a40;                   /* tip, melding, huidige standpunt */
  --op-donker: #ffffff;
  --huidig: var(--donker);             /* balk onder het huidige standpunt */
  --op-huidig: var(--op-donker);
  --huidig-schaduw: var(--accent);
  --actief: var(--accent);             /* ronde knop die aan staat, open kaart */
  --op-actief: var(--op-accent);
  --focus: #0068ff;
  --halo-kleur: #ffffff;
  --scherm: rgba(0, 26, 64, 0.5);      /* achter een venster */
  --start-verloop: rgba(0, 26, 64, 0.5);
  --puls: var(--stip);                 /* de ring die om een stip uitdijt */
  --puls-rand: rgba(0, 26, 64, 0.35);

  /* ---- letters ---- */
  --letter: "Bricolage Grotesque", system-ui, sans-serif;
  --letter-kop: var(--letter);
  --letter-knop: var(--letter);
  --gewicht: 300;                      /* lopende tekst */
  --gewicht-kop: 800;
  --gewicht-sterk: 800;                /* knoppen, pillen, labels */
  --kop-spatie: -0.035em;
  --kop-stijl: normal;
  --accent-kop-kleur: var(--accent);   /* het deel van een kop in accentkleur */
  --accent-kop-stijl: normal;
  --accent-kop-gewicht: var(--gewicht-kop);
  --klein-kast: uppercase;             /* pillen en boventitels */
  --klein-spatie: 0.06em;
  --knop-kast: none;
  --knop-spatie: -0.01em;
  --knop-gewicht: var(--gewicht-sterk);

  /* ---- vormen ---- */
  --r-venster: 20px;
  --r-kaart: 20px;                     /* de kop-kaart */
  --r-tegel: 16px;                     /* een standpunt in de balk */
  --r-start: 26px;
  --r-klein: 14px;                     /* voorvertoning, optiekaart */
  --r-knop: 999px;
  --r-pil: 999px;
  --r-rond: 50%;                       /* ronde knoppen */
  --r-stip: 50%;                       /* stippen, nummers, de voet van een punt */
  --r-zaak: 18px;
  --scheiding: 2.5px solid var(--lijn);
  --balk-stippen: block;               /* de drie stippen links in de balk van een venster */

  /* ---- schaduwen: een ring en een harde schaduw zonder vervaging ---- */
  --s-kaart: 0 0 0 3px var(--lijn), 8px 10px 0 3px var(--lijn);
  --s-venster: 0 0 0 3px var(--lijn), 12px 14px 0 3px var(--lijn);
  --s-start: 0 0 0 3px var(--lijn), 12px 14px 0 3px var(--lijn);
  --s-knop: 0 0 0 3px var(--lijn), 4px 5px 0 3px var(--lijn);
  --s-knop-hoog: 0 0 0 3px var(--lijn), 6px 7px 0 3px var(--lijn);
  --s-knop-laag: 0 0 0 3px var(--lijn), 1px 1px 0 3px var(--lijn);
  --s-tegel: 0 0 0 3px var(--lijn), 6px 7px 0 3px var(--lijn);
  --s-tegel-hoog: 0 0 0 3px var(--lijn), 8px 10px 0 3px var(--lijn);
  --s-tegel-huidig: 0 0 0 3px var(--lijn), 6px 7px 0 3px var(--huidig-schaduw);
  --s-pil: 0 0 0 2.5px var(--lijn);
  --s-pil-hoog: 0 0 0 2.5px var(--lijn), 3px 4px 0 2.5px var(--lijn);
  --s-nav: 0 0 0 2.5px var(--lijn), 3px 4px 0 2.5px var(--lijn);
  --s-nav-hoog: 0 0 0 2.5px var(--lijn), 5px 6px 0 2.5px var(--lijn);
  --s-stip: 0 0 0 2.5px var(--lijn), 2px 3px 0 2.5px var(--lijn);
  --s-stipje: 0 0 0 2px var(--lijn);
  --s-klein: 0 0 0 3px var(--lijn), 7px 8px 0 3px var(--lijn);   /* voorvertoning */
  --s-optie: 0 0 0 3px var(--lijn), 6px 7px 0 3px var(--lijn);   /* optiekaart */
  --s-melding: 0 0 0 2.5px var(--halo-kleur);
  --s-zaak: var(--s-kaart);
  --s-oproep: var(--s-knop);           /* de oproep en de startknop */
  --s-oproep-hoog: var(--s-knop-hoog);
  --s-oproep-laag: var(--s-knop-laag);
  --halo: 0 0 0 10px var(--halo-kleur);
  --til: translate(-2px, -2px);        /* knop onder de muis */
  --til-tegel: translate(-2px, -3px);
  --druk: translate(3px, 4px);         /* knop ingedrukt */
  --til-klein: translate(-1px, -1px);
  --til-nav: translate(-1px, -2px);

  /* ---- maten ---- */
  --plop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --rand: 16px;                        /* ruimte langs de rand van het scherm */
  --boven: max(14px, env(safe-area-inset-top));
  --onder: max(16px, env(safe-area-inset-bottom));
  --rond: 46px;
  /* --start-kop-maat, --start-kop-maat-smal, --start-kop-spatie: de kop op de startkaart (zie 4-onder.css) */
  --logo-hoogte: 56px;                 /* het logo van een klant in de kop */
  --gemaakt-maat: 12px;                /* "Gemaakt door Omnitour" onderaan */
  --gemaakt-kleur: var(--inkt);
  --gemaakt-stip: var(--stip);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: var(--grond);
  color: var(--inkt);
  font-family: var(--letter);
  font-optical-sizing: auto;
  font-weight: var(--gewicht);
  font-size: 16px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
h1, h2, p, ol { margin: 0; }
ol { padding: 0; list-style: none; }
img, svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.onzichtbaar {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.b { color: var(--accent-kop-kleur); font-style: var(--accent-kop-stijl); font-weight: var(--accent-kop-gewicht); }

/* ---------- de tour en de lagen erop ---------- */
#tour { position: fixed; inset: 0; overflow: hidden; background: var(--grond); }
#container { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
#container:focus { outline: none; }
#container:focus-visible { outline: 3px solid var(--focus); outline-offset: -8px; }
#container.boven-doorkijk { cursor: pointer; }

.boven, .onder, .start { z-index: 10; }
.boven {
  position: absolute; top: var(--boven); left: var(--rand); right: var(--rand);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  pointer-events: none;
}
.boven > * > * { pointer-events: auto; }
.links { display: grid; justify-items: start; gap: 12px; min-width: 0; max-width: min(540px, 46vw); }
.kop-lijst .links { gap: 0; width: min(330px, 40vw); max-width: none; }
.rechts { position: relative; display: flex; align-items: center; gap: 22px; }

/* voor de start staat alleen de startkaart er; de rest is inert en onzichtbaar */
.voor-start .boven,
.voor-start .onder,
.voor-start .ot-punt { opacity: 0; visibility: hidden; }
.boven, .onder { transition: opacity 0.35s ease, visibility 0s linear 0s; }
/* een afbeelding die de speler vergroot, staat vrij: de balken wijken */
.uitvergroot .boven, .uitvergroot .onder { opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; }

/* ---------- pillen, stippen en labels ---------- */
.stip { flex: none; width: 10px; height: 10px; border-radius: var(--r-stip); background: var(--stip); box-shadow: var(--s-stipje); }
.pil, .merk, .gemaakt {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 10px; border-radius: var(--r-pil);
  background: var(--vlak); color: var(--inkt); text-decoration: none;
  box-shadow: var(--s-pil);
  font-weight: var(--gewicht-sterk); font-size: 12px; line-height: 1.2;
  letter-spacing: var(--klein-spatie); text-transform: var(--klein-kast); white-space: nowrap;
}
.merk, .gemaakt { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.merk:hover, .gemaakt:hover { transform: var(--til-klein); box-shadow: var(--s-pil-hoog); }
.merk:focus-visible, .gemaakt:focus-visible { box-shadow: var(--s-pil), var(--halo); }
.label {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px 4px 8px; border-radius: var(--r-pil);
  background: var(--vlak-2); box-shadow: inset 0 0 0 2px var(--lijn-zacht);
  font-weight: var(--gewicht-sterk); font-size: 12px; line-height: 1.25; letter-spacing: 0.01em;
}
.label .stip { width: 8px; height: 8px; }

/* ---------- knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--rond); padding: 8px 20px; border: 0; border-radius: var(--r-knop);
  background: var(--accent); color: var(--op-accent); cursor: pointer;
  font-family: var(--letter-knop); font-weight: var(--knop-gewicht); font-size: 16px; line-height: 1.1;
  letter-spacing: var(--knop-spatie); text-transform: var(--knop-kast);
  text-decoration: none; white-space: nowrap;
  box-shadow: var(--s-oproep);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.knop:hover { transform: var(--til); box-shadow: var(--s-oproep-hoog); background: var(--accent-zweef, var(--accent)); }
.knop:active { transform: var(--druk); box-shadow: var(--s-oproep-laag); }
.knop:focus-visible { box-shadow: var(--s-oproep), var(--halo); }
.drie { flex: none; width: 0; height: 0; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.pijl { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.los { font-weight: var(--gewicht-sterk); font-size: 16px; color: var(--inkt); text-underline-offset: 3px; }
.los:hover { color: var(--accent); }

/* ---------- de zaak: een pil en de naam, of het logo van de klant ---------- */
.zaak { display: grid; justify-items: start; }
.kop-lijst .zaak { margin-bottom: 26px; }
.zaak .pil { position: relative; z-index: 2; margin: 0 0 -12px 14px; }
.zaak-naam {
  padding: 18px 18px 12px; border-radius: var(--r-zaak);
  background: var(--vlak); box-shadow: var(--s-zaak);
  font-family: var(--letter-kop); font-weight: var(--gewicht-kop); font-size: 26px; line-height: 1;
  letter-spacing: var(--kop-spatie); font-style: var(--kop-stijl);
}
.zaak--logo .zaak-naam { padding: 10px 14px; background: var(--zaak-grond, var(--vlak)); }
.zaak-logo { width: auto; height: var(--logo-hoogte); max-width: 100%; }

/* ---------- de kop-kaart met de plek ---------- */
.plek {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 14px;
  width: fit-content; max-width: 100%;
  padding: 11px 12px 12px 17px; border-radius: var(--r-kaart);
  background: var(--vlak); box-shadow: var(--s-kaart);
}
.plek.zonder-tekst { padding-right: 17px; }
.plek h1 {
  font-family: var(--letter-kop); font-weight: var(--gewicht-kop); font-style: var(--kop-stijl);
  font-size: clamp(22px, 2.1vw, 30px); line-height: 1.02; letter-spacing: var(--kop-spatie);
  text-wrap: balance;
}
.plek h1:focus { outline: none; }   /* de kop krijgt focus na de start of een nieuwe plek; hij is niet klikbaar */
.plek-knop, .lijst-knop-open {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: var(--r-rond); background: var(--vlak); cursor: pointer;
  box-shadow: var(--s-pil);
}
.plek-knop::before, .plek-knop::after, .lijst-knop-open::before, .lijst-knop-open::after {
  content: ""; grid-area: 1 / 1; width: 13px; height: 3px; border-radius: 2px; background: currentColor;
}
.plek-knop::after, .lijst-knop-open::after { transform: rotate(90deg); transition: transform 0.2s ease; }
.plek-knop[aria-expanded="true"] { background: var(--actief); color: var(--op-actief); }
.lijst-knop-open[aria-expanded="true"] { background: var(--donker); color: var(--op-donker); }
.plek-knop[aria-expanded="true"]::after, .lijst-knop-open[aria-expanded="true"]::after { transform: rotate(0deg); }
.plek-knop:hover, .lijst-knop-open:hover { box-shadow: var(--s-pil-hoog); }
.plek-tekst {
  grid-column: 1 / -1; max-width: 38ch; max-height: min(52vh, 420px); overflow: auto;
  margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--lijn-zacht);
  font-size: 16px; line-height: 1.45;
}
.plek-tekst p + p { margin-top: 0.7em; }
/* regels met een tab (dag en tijd) als twee kolommen */
.tabel { display: grid; grid-template-columns: auto 1fr; gap: 1px 14px; margin: 0.3em 0; }
.tabel dt { font-weight: var(--gewicht-sterk); }
.tabel dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ---------- de kaart met een vaste titel en de lijst met standpunten (autodemo) ---------- */
.lijstkaart {
  width: 100%; overflow: hidden; border-radius: var(--r-venster);
  background: var(--vlak); box-shadow: var(--s-venster);
}
.lijstkaart-kop {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px;
  padding: 16px 14px 14px 18px;
}
.lijstkaart h1 {
  display: grid; gap: 2px;
  font-family: var(--letter-kop); font-weight: var(--gewicht-kop); font-size: 30px; line-height: 1;
  letter-spacing: var(--kop-spatie);
}
.lijstkaart h1:focus { outline: none; }
.lijstkaart h1:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: 6px; }
.lijstkaart-soort {
  font-family: var(--letter); font-size: 12px; line-height: 1.2; letter-spacing: var(--klein-spatie);
  text-transform: var(--klein-kast); color: var(--inkt-zacht);
}
.lijst-knop-open { margin-bottom: -2px; }
.lijstkaart-lijf { display: grid; justify-items: start; gap: 14px; padding: 0 18px 20px; }
.lijst-titel {
  margin-top: 6px; font-weight: var(--gewicht-sterk); font-size: 12px; line-height: 1.2;
  letter-spacing: var(--klein-spatie); text-transform: var(--klein-kast); color: var(--inkt-zacht);
}
.lijst-standpunten { display: grid; gap: 2px; width: 100%; margin-top: -8px; border-top: 2px solid var(--lijn-zacht); }
.lijst-knop {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 5px 4px;
  border: 0; border-bottom: 2px solid var(--lijn-zacht); background: none; cursor: pointer; text-align: left;
  font-weight: var(--gewicht-sterk); font-size: 16px; line-height: 1.15; letter-spacing: var(--knop-spatie);
}
.nr {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-stip);
  background: var(--vlak); box-shadow: inset 0 0 0 2px var(--lijn);
  font-weight: var(--gewicht-sterk); font-size: 12px; line-height: 1; letter-spacing: 0;
}
.lijst-knop:hover { background: var(--zweef); }
.lijst-knop[aria-current] .nr { background: var(--accent); color: var(--op-accent); box-shadow: inset 0 0 0 2px var(--lijn); }
.lijst-knop[aria-current]::after {
  content: attr(data-hier); margin-left: auto; padding: 2px 9px; border-radius: var(--r-pil);
  background: var(--donker); color: var(--op-donker); font-size: 11px; letter-spacing: 0.02em;
}
.lijst-knop:focus-visible { outline-offset: -3px; border-radius: 8px; }
.lijstkaart-lijf .knop { margin-top: 4px; padding-inline: 22px; }

/* ---------- bediening: ronde knoppen ---------- */
.bediening { display: flex; gap: 14px; }
.rond {
  position: relative; display: grid; place-items: center;
  width: var(--rond); height: var(--rond); padding: 0;
  border: 0; border-radius: var(--r-rond); background: var(--vlak); color: var(--inkt); cursor: pointer;
  box-shadow: var(--s-knop);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.rond svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rond:hover { transform: var(--til); box-shadow: var(--s-knop-hoog); }
.rond:active { transform: var(--druk); box-shadow: var(--s-knop-laag); }
.rond:focus-visible { box-shadow: var(--s-knop), var(--halo); }
.rond[aria-expanded="true"], #knop-scherm[aria-pressed="true"] { background: var(--actief); color: var(--op-actief); }
/* een schakelaar heeft twee tekeningen: .als-aan bij aria-pressed="true", .als-uit anders */
.rond[aria-pressed="true"] .als-uit, .rond[aria-pressed="false"] .als-aan { display: none; }
.tip {
  position: absolute; top: calc(100% + 14px); left: 50%; translate: -50% 0;
  padding: 4px 10px; border-radius: var(--r-pil); background: var(--donker); color: var(--op-donker);
  font-family: var(--letter-knop); font-weight: var(--gewicht-sterk); font-size: 12px; line-height: 1.2; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
/* zonder oproep ernaast staat de laatste knop tegen de rand: de tip dan rechts uitgelijnd */
.rechts:not(:has(.gesprek)) .bediening .rond:last-child .tip { left: auto; right: 0; translate: 0 0; }
@media (hover: hover) {
  .rond:hover .tip { opacity: 1; }
}
.rond:focus-visible .tip { opacity: 1; }
.gesprek .pijl { margin-right: -4px; }

/* ---------- vensters: een balk met stippen en een adres, dan de inhoud ---------- */
.venster { overflow: hidden; border-radius: var(--r-venster); background: var(--vlak); color: var(--inkt); box-shadow: var(--s-venster); }
.balk {
  display: flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 6px 0 14px;
  background: var(--vlak); border-bottom: var(--scheiding);
}
.balk > i { display: var(--balk-stippen); flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--vlak); box-shadow: 0 0 0 2px var(--lijn); }
.balk > i:nth-child(1) { background: var(--accent); }
.balk > i:nth-child(2) { background: var(--stip); }
.adres {
  min-width: 0; margin: 0 auto 0 8px; padding: 3px 12px; border-radius: var(--r-pil);
  background: var(--vlak-2); box-shadow: inset 0 0 0 2px var(--lijn-zacht);
  font-family: var(--letter-knop); font-weight: var(--gewicht-sterk); font-size: 13px; line-height: 1.3; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sluit {
  position: relative; flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-rond);
  background: var(--vlak); box-shadow: var(--s-pil); cursor: pointer;
}
.sluit::before, .sluit::after { content: ""; grid-area: 1 / 1; width: 14px; height: 3px; border-radius: 2px; background: var(--inkt); transform: rotate(45deg); }
.sluit::after { transform: rotate(-45deg); }
.sluit:hover { background: var(--vlak-2); }
.sluit:focus-visible { outline-offset: 2px; }

dialog.venster {
  width: min(100% - 32px, 480px); max-width: none; max-height: calc(100% - 40px);
  margin: auto; padding: 0; border: 0; overflow: auto; overscroll-behavior: contain;
}
dialog.venster--beeld { width: min(100% - 32px, 460px); }
dialog.venster--breed { width: min(100% - 32px, 760px); }
dialog.venster--video { width: min(100% - 32px, 900px); }
dialog.venster::backdrop { background: var(--scherm); }
.venster-media:empty { display: none; }
.venster-media img { width: 100%; height: auto; max-height: 56vh; object-fit: contain; padding: 14px; background: var(--vlak); border-bottom: var(--scheiding); }
.venster--breed .venster-media img { max-height: 70vh; }
.venster-media .video { position: relative; aspect-ratio: 16 / 9; background: var(--grond); border-bottom: var(--scheiding); }
.venster-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.venster-tekst { padding: 18px 22px 24px; }
.venster-tekst:has(.venster-lijf:empty) { padding-bottom: 20px; }
.venster-tekst h2 {
  font-family: var(--letter-kop); font-weight: var(--gewicht-kop); font-style: var(--kop-stijl);
  font-size: 24px; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance;
}
.venster-tekst p { margin-top: 0.7em; font-size: 17px; line-height: 1.45; }
.venster-tekst h2 + p, .venster-lijf > p:first-child { margin-top: 10px; }

/* het demovenster: een oproep die in een demo niets verstuurt */
dialog.demovenster { width: min(100% - 32px, 460px); }
dialog.demovenster::backdrop { background: var(--scherm-demo, rgba(0, 26, 64, 0.55)); }
.demo-tekst { display: grid; justify-items: start; gap: 12px; padding: 20px 24px 26px; }
.demo-tekst h2 { font-family: var(--letter-kop); font-weight: var(--gewicht-kop); font-size: 34px; line-height: 1; letter-spacing: var(--kop-spatie); }
.demo-tekst p:not(.label) { font-size: 19px; line-height: 1.35; max-width: 30ch; }
.venster-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 8px; }
.demo-tekst .knop { padding-inline: 22px; }

/* ---------- de kaart: eigen tekening, geen derde partij ---------- */
.kaart { position: absolute; top: calc(100% + 26px); right: 0; width: 330px; pointer-events: auto; }
.kaart-vlak { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--k-grond, #eef3fb); }
.kaart-doek { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 1; translate: 0 -50%; }
.kaart-doek > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.k-grond { fill: var(--k-grond, #eef3fb); }
.k-bos { fill: var(--k-bos, rgba(0, 26, 64, 0.09)); }
.k-water { fill: var(--k-water, #d3e3ff); stroke: var(--k-water-rand, rgba(0, 104, 255, 0.55)); stroke-width: 1.2; }
.k-vaart { fill: none; stroke: var(--k-water, #d3e3ff); stroke-width: 6; }
.k-pad { fill: none; stroke: var(--k-pad, rgba(0, 26, 64, 0.32)); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.k-weg-rand { fill: none; stroke: var(--k-weg-rand, rgba(0, 26, 64, 0.5)); stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; }
.k-weg { fill: none; stroke: var(--k-weg, #ffffff); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.k-gebouw { fill: var(--k-gebouw, rgba(0, 26, 64, 0.16)); stroke: var(--k-gebouw-rand, rgba(0, 26, 64, 0.45)); stroke-width: 0.8; }
.k-zaak { fill: var(--k-zaak, rgba(0, 104, 255, 0.16)); stroke: var(--accent); stroke-width: 1.4; }
.kegel { fill: var(--k-kegel, rgba(0, 104, 255, 0.24)); stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.kaart-punten { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.kaart-punt {
  position: absolute; display: grid; place-items: center;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0;
  border: 0; border-radius: var(--r-stip); background: none; cursor: pointer;
}
.kaart-punt .bol {
  display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: var(--r-stip);
  background: var(--vlak); box-shadow: var(--s-stip);
  transition: transform 0.15s ease;
}
.kaart-punt .bol svg { width: 13px; height: 13px; }
.kaart-punt--drone .bol { width: 24px; height: 24px; background: var(--stip); color: var(--op-stip); }
.kaart-punt--drone .bol svg { width: 16px; height: 16px; }
.kaart-punt[aria-current] .bol { background: var(--accent); color: var(--op-accent); transform: scale(1.12); }
.kaart-punt:hover .bol { transform: scale(1.15); }
.kaart-punt:focus-visible { outline-offset: 0; border-radius: var(--r-stip); }
.kaart-punt .naam {
  position: absolute; bottom: calc(100% + 2px); left: 50%; translate: -50% 0;
  padding: 3px 9px; border-radius: var(--r-pil); background: var(--donker); color: var(--op-donker);
  font-family: var(--letter-knop); font-weight: var(--gewicht-sterk); font-size: 12px; line-height: 1.2; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.kaart-punt:hover .naam, .kaart-punt:focus-visible .naam { opacity: 1; z-index: 2; }
.noord {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--r-rond); background: var(--vlak); box-shadow: 0 0 0 2px var(--lijn);
  font-weight: var(--gewicht-sterk); font-size: 12px; line-height: 1;
}
.noord::before { content: ""; position: absolute; top: -7px; left: 50%; translate: -50% 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid var(--lijn); }
.schaal { position: absolute; left: 12px; bottom: 10px; display: grid; gap: 2px; font-weight: var(--gewicht-sterk); font-size: 11px; line-height: 1; }
.schaal i { display: block; height: 6px; border: 2px solid var(--lijn); border-top: 0; }
.kaart-plaats { padding: 9px 14px 11px; border-top: var(--scheiding); font-size: 14px; line-height: 1.35; }
.kaart-plaats b { font-weight: var(--gewicht-sterk); }
.kaart-plaats small { display: block; margin-top: 2px; font-size: 11px; color: var(--inkt-zacht); }

/* ---------- onderaan: extra's (de deuren), de standpunten, de melding en "Gemaakt door" ---------- */
.onder {
  position: absolute; left: 0; right: 0; bottom: var(--onder);
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 4px; pointer-events: none;
}
.onder-rij {
  position: relative; display: flex; justify-content: center; align-items: center;
  width: 100%; min-height: 48px; padding: 0 var(--rand);
}
.onder-rij > * { pointer-events: auto; }
.onder-rij:not(:has(.deuren:not([hidden]))) { min-height: 0; }
.onder .gemaakt { pointer-events: auto; margin-top: -4px; font-size: var(--gemaakt-maat); color: var(--gemaakt-kleur); }
.onder .gemaakt .stip { background: var(--gemaakt-stip); }
@media (min-width: 1240px) {
  .onder .gemaakt { position: absolute; right: var(--rand); bottom: 14px; margin: 0; }
}

/* de schakelaar: Deuren dicht | open */
.deuren {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 5px 5px 5px 18px; border-radius: var(--r-pil);
  background: var(--vlak); box-shadow: var(--s-knop);
}
.deuren-naam { font-weight: var(--gewicht-sterk); font-size: 12px; line-height: 1; letter-spacing: var(--klein-spatie); text-transform: var(--klein-kast); }
.deuren-schakel {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  border-radius: var(--r-pil); background: var(--vlak-2); box-shadow: inset 0 0 0 2px var(--lijn);
}
.deuren-duim {
  position: absolute; left: 0; top: 0; bottom: 0; width: 50%;
  border-radius: var(--r-pil); background: var(--accent); box-shadow: 0 0 0 2.5px var(--lijn);
  transition: transform 0.35s var(--plop);
}
.deuren.open .deuren-duim { transform: translateX(100%); }
.deuren-schakel button {
  position: relative; z-index: 1; min-width: 74px; min-height: 38px; padding: 6px 16px;
  border: 0; border-radius: var(--r-pil); background: none; cursor: pointer;
  font-weight: var(--gewicht-sterk); font-size: 16px; line-height: 1; letter-spacing: var(--knop-spatie);
  transition: color 0.2s ease;
}
.deuren-schakel button[aria-pressed="true"] { color: var(--op-accent); }
.deuren-schakel button:focus-visible { outline-offset: 3px; }

/* ---------- de standpunten: tegels met een beeld en de naam ---------- */
.standpunten { display: flex; justify-content: center; max-width: 100%; pointer-events: none; }
.standpunten ol {
  display: flex; gap: 16px; max-width: 100%;
  padding: 10px var(--rand) 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--rand); scrollbar-width: none;
  pointer-events: auto;
}
.standpunten ol::-webkit-scrollbar { display: none; }
.standpunten li { flex: none; display: flex; scroll-snap-align: start; }
.standpunt {
  display: flex; flex-direction: column; width: 156px; padding: 0; overflow: hidden; text-align: left;
  border: 0; border-radius: var(--r-tegel); background: var(--vlak); color: var(--inkt); cursor: pointer;
  box-shadow: var(--s-tegel);
  transition: transform 0.18s var(--plop), box-shadow 0.15s ease;
}
.standpunt img { flex: none; width: 100%; height: 76px; object-fit: cover; background: var(--vlak-2); border-bottom: var(--scheiding); }
.standpunt .naam {
  flex: 1; display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 10px 7px;
  font-family: var(--letter-knop); font-weight: var(--gewicht-sterk); font-size: 13px; line-height: 1.12;
  letter-spacing: var(--knop-spatie); text-wrap: balance;
}
.standpunt .naam svg { flex: none; width: 18px; height: 18px; }
.standpunt:hover { transform: var(--til-tegel); box-shadow: var(--s-tegel-hoog); }
.standpunt:focus-visible { outline-offset: 5px; }
.standpunt[aria-current] { transform: translateY(-6px); box-shadow: var(--s-tegel-huidig); }
.standpunt[aria-current] .naam { background: var(--huidig); color: var(--op-huidig); }
.standpunt[aria-current] .naam svg { color: var(--stip-op-donker); }

/* de showroom (autodemo): grotere beelden en een nummer, zoals de kleurkeuze bij een merk */
.standpunten--showroom ol { gap: 18px; padding-top: 18px; }
.standpunten--showroom li { display: block; }
.standpunten--showroom .standpunt { display: block; transition: transform 0.2s var(--plop), box-shadow 0.15s ease; }
.standpunten--showroom .standpunt img { height: 88px; }
.standpunten--showroom .standpunt .naam { gap: 8px; min-height: 40px; font-size: 14px; line-height: 1.1; text-wrap: wrap; }
.standpunt[aria-current] .nr { background: var(--accent); color: var(--op-accent); box-shadow: 0 0 0 2px var(--vlak); }

/* ---------- een melding: link gekopieerd, of hoe je rondkijkt ---------- */
.melding {
  position: absolute; left: 50%; bottom: calc(100% + 14px); translate: -50% 0;
  width: max-content; max-width: calc(100% - 2 * var(--rand));
  padding: 9px 18px; border-radius: var(--r-pil); background: var(--donker); color: var(--op-donker);
  box-shadow: var(--s-melding);
  font-family: var(--letter-knop); font-weight: var(--gewicht-sterk); font-size: 15px; line-height: 1.2; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.35s var(--plop);
  transform: translateY(8px);
}
.melding.zichtbaar { opacity: 1; transform: none; }

/* ---------- start: een lichte kaart, de tour beweegt erachter ---------- */
.start {
  position: absolute; inset: 0; z-index: 30;
  display: grid; place-items: center; padding: var(--rand);
  background: linear-gradient(to top, var(--start-verloop), transparent 62%);
  transition: opacity 0.4s ease;
}
.start.weg { opacity: 0; pointer-events: none; }
.start-kaart {
  display: grid; justify-items: start; gap: 18px;
  width: min(100%, 540px); max-height: calc(100% - 8px); overflow: auto;
  padding: 28px 32px 32px; border-radius: var(--r-start);
  background: var(--vlak); box-shadow: var(--s-start);
}
.start-kaart h2 {
  font-family: var(--letter-kop); font-weight: var(--gewicht-kop); font-style: var(--kop-stijl);
  font-size: var(--start-kop-maat, clamp(44px, 6.2vw, 76px)); line-height: 0.98; letter-spacing: var(--start-kop-spatie, -0.045em);
}
.start-kaart h2 .regel { display: block; }
.start-kaart p { font-size: clamp(19px, 1.8vw, 22px); line-height: 1.3; max-width: 30ch; }
.start-kaart .knop { min-height: 54px; padding: 10px 26px; font-size: 19px; margin-top: 6px; }
.start-logo { width: auto; height: calc(var(--logo-hoogte) * 1.4); max-width: 100%; }
.start-logo-vlak { justify-self: stretch; margin: -28px -32px 0; padding: 22px 32px; background: var(--zaak-grond, transparent); }
/* een lange tekst van de zaak zelf: kleiner, zodat de kaart op het scherm past */
.start-kaart .start-lang { font-size: 17px; line-height: 1.45; max-width: 46ch; }
.start-lang p + p { margin-top: 0.5em; }

/* de start links onderin, met een pil erboven (autodemo) */
.start--links {
  align-items: end; justify-items: start; place-items: end start;
  padding: var(--rand) var(--rand) clamp(28px, 7vh, 72px) clamp(16px, 6vw, 96px);
  background: linear-gradient(to top, var(--start-verloop-links, rgba(0, 26, 64, 0.42)), transparent 55%);
}
.start--links .start-kaart { gap: 16px; width: min(100%, 470px); padding: 26px 30px 30px; overflow: visible; }
.start--links .start-kaart h2 { font-size: clamp(52px, 7vw, 88px); line-height: 0.95; }
.start--links .start-kaart p { max-width: 26ch; }
.start-kaart .pil { margin: -44px 0 4px -8px; font-size: 12px; line-height: 1.2; box-shadow: var(--s-pil-hoog); }

/* ---------- hotspots, in de laag van de speler ---------- */
.ot-punt { position: absolute; width: 0; height: 0; transition: opacity 0.35s ease; }
.ot-punt button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* navigatie: een pil op een paaltje, de voet staat op de plek */
.ot-nav-knop {
  position: absolute; left: 0; bottom: -8px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.ot-nav-pil {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 8px; border-radius: var(--r-pil);
  background: var(--vlak); color: var(--inkt);
  box-shadow: var(--s-nav);
  font-family: var(--letter-knop); font-weight: var(--gewicht-sterk); font-size: 14px; line-height: 1.15;
  letter-spacing: var(--knop-spatie); white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ot-nav-pil .stip { margin-left: 2px; }
.ot-drone {
  display: grid; place-items: center; flex: none;
  width: 24px; height: 24px; margin: -2px 0 -2px -2px; border-radius: var(--r-stip);
  background: var(--stip); color: var(--op-stip); box-shadow: var(--s-stipje);
}
.ot-drone svg { width: 17px; height: 17px; }
.ot-nav-paal { width: 4px; height: 18px; background: var(--vlak); box-shadow: 0 0 0 1.5px var(--lijn); }
.ot-nav-voet { width: 16px; height: 16px; border-radius: var(--r-stip); background: var(--stip); box-shadow: 0 0 0 2.5px var(--lijn), 0 0 0 5px rgba(255, 255, 255, 0.55); }
.ot-nav-knop:hover .ot-nav-pil { transform: var(--til-nav); box-shadow: var(--s-nav-hoog); }
.ot-nav-knop:focus-visible { outline: 0; }
.ot-nav-knop:focus-visible .ot-nav-pil { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: var(--s-nav), 0 0 0 9px var(--halo-kleur); }

/* de voorvertoning boven de pil */
.ot-voorvertoning {
  position: absolute; left: 0; bottom: 76px; width: 158px;
  overflow: hidden; border-radius: var(--r-klein); background: var(--vlak);
  box-shadow: var(--s-klein);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(8px) scale(0.94); transform-origin: 50% 100%;
  transition: opacity 0.18s ease, transform 0.3s var(--plop), visibility 0s linear 0.18s;
}
.ot-voorvertoning img { width: 100%; height: 104px; object-fit: cover; }
.ot-onder .ot-voorvertoning { bottom: auto; top: 26px; transform-origin: 50% 0; }
.ot-nav-knop:hover + .ot-voorvertoning,
.ot-nav-knop:focus-visible + .ot-voorvertoning {
  opacity: 1; visibility: visible; transform: translateX(-50%);
  transition: opacity 0.18s ease, transform 0.3s var(--plop), visibility 0s;
}

/* informatie, afbeelding en video: een pulserende stip die een venster opent */
.ot-info-knop, .ot-optie-knop {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 48px; height: 48px;
  padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
}
.ot-bol {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--r-stip);
  background: var(--stip); color: var(--op-stip);
  box-shadow: var(--s-stip);
  font-weight: var(--gewicht-sterk); font-size: 16px; line-height: 1;
  transition: transform 0.15s ease;
}
.ot-bol svg { width: 15px; height: 15px; }
.ot-puls {
  position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border-radius: var(--r-stip); border: 3px solid var(--puls); box-shadow: 0 0 0 1.5px var(--puls-rand);
  animation: ot-puls 2.2s ease-out infinite;
}
@keyframes ot-puls {
  0% { transform: scale(1); opacity: 0.95; }
  75%, 100% { transform: scale(2.3); opacity: 0; }
}
.ot-info-label {
  position: absolute; left: calc(50% + 24px); top: 50%; transform: translate(-4px, -50%);
  padding: 5px 12px; border-radius: var(--r-pil); background: var(--vlak); color: var(--inkt);
  box-shadow: var(--s-pil);
  font-family: var(--letter-knop); font-weight: var(--gewicht-sterk); font-size: 13px; line-height: 1.15; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.2s ease;
}
.ot-info-knop:hover .ot-bol { transform: scale(1.1); }
.ot-info-knop:hover .ot-info-label,
.ot-info-knop:focus-visible .ot-info-label { opacity: 1; transform: translate(0, -50%); }
.ot-info-knop:focus-visible, .ot-optie-knop:focus-visible { outline: 0; }
.ot-info-knop:focus-visible .ot-bol, .ot-optie-knop:focus-visible .ot-bol { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: var(--s-pil), 0 0 0 9px var(--halo-kleur); }

/* een optie (autodemo): een witte stip met een kern in de stipkleur, en een kaart */
.ot-optie.actief { z-index: 5; }
.ot-optie .ot-bol {
  width: 30px; height: 30px; background: var(--vlak);
  transition: transform 0.2s var(--plop), background-color 0.15s ease;
}
.ot-optie .ot-bol::after {
  content: ""; width: 12px; height: 12px; border-radius: var(--r-stip);
  background: var(--stip); box-shadow: var(--s-stipje);
  transition: transform 0.2s var(--plop);
}
.ot-optie .ot-puls {
  width: 30px; height: 30px; margin: -15px 0 0 -15px; border-color: var(--vlak);
  animation: ot-puls-optie 2.4s ease-out infinite;
}
@keyframes ot-puls-optie {
  0% { transform: scale(1); opacity: 0.95; }
  75%, 100% { transform: scale(2.2); opacity: 0; }
}
.ot-optie-knop:hover .ot-bol { transform: scale(1.12); }
.ot-optie.actief .ot-bol { background: var(--accent); transform: scale(1.12); }
.ot-optie.actief .ot-bol::after { background: var(--op-accent); transform: scale(0.8); }
.ot-optie.actief .ot-puls { animation: none; opacity: 0; }

/* de kaart bij een optie: naam en één regel. De plek (left, top) zet de schil. */
.ot-kaart {
  position: absolute; left: 30px; top: 0;
  display: grid; gap: 3px; width: max-content; max-width: 250px;
  padding: 10px 15px 12px; border-radius: var(--r-klein);
  background: var(--vlak); color: var(--inkt);
  box-shadow: var(--s-optie);
  pointer-events: none;
  opacity: 0; visibility: hidden; transform: scale(0.92);
  transition: opacity 0.16s ease, transform 0.3s var(--plop), visibility 0s linear 0.16s;
}
.ot-kaart-naam { font-family: var(--letter-kop); font-weight: var(--gewicht-kop); font-size: 18px; line-height: 1.08; letter-spacing: -0.02em; }
.ot-kaart-regel { font-size: 15px; line-height: 1.3; }
.ot-optie.actief .ot-kaart {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.16s ease, transform 0.3s var(--plop), visibility 0s;
}

/* een lap (dezelfde plek in een andere stand) en een doorkijk (de deur naar een ander standpunt):
   een foto in 3D in het beeld die oplicht. Ze vangen zelf geen muis, zodat je erop kunt slepen. */
.ot-lap, .ot-doorkijk { pointer-events: none; }
.ot-lap img, .ot-doorkijk img {
  position: absolute; max-width: none; pointer-events: none;
  opacity: 0; transition: opacity 0.45s ease;
  -webkit-user-drag: none; user-select: none;
}
.ot-doorkijk img { transition-duration: 0.5s; }
.ot-lap.aan img, .ot-doorkijk.aan img { opacity: 1; }

/* ---------- smal: tablet staand en telefoon, bij de kop-kaart met de plek ----------
   Boven een rij met het merk en de oproep, daaronder de plek links en de bediening als kolom rechts. */
@media (max-width: 899px) {
  .kop-plek .boven {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto; gap: 14px; align-items: start;
  }
  .kop-plek .links, .kop-plek .rechts { display: contents; }
  /* merk en oproep delen de eerste rij over de volle breedte */
  .kop-plek .merk, .kop-plek .zaak { grid-row: 1; grid-column: 1 / -1; justify-self: start; align-self: center; }
  .kop-plek .gesprek { grid-row: 1; grid-column: 1 / -1; justify-self: end; align-self: center; }
  .kop-plek .plek { grid-row: 2; grid-column: 1; justify-self: start; }
  .kop-plek .bediening { grid-row: 2; grid-column: 2; flex-direction: column; gap: 12px; }
  .kop-plek .tip { top: 50%; left: auto; right: calc(100% + 12px); translate: 0 -50%; }
  .kaart {
    position: fixed; top: auto; left: var(--rand); right: var(--rand);
    bottom: calc(var(--onder) + 150px); width: auto; max-width: 420px; margin-inline: auto;
  }
  .kaart-vlak { aspect-ratio: 4 / 3; }
}

/* ---------- telefoon ---------- */
@media (max-width: 699px) {
  :root {
    --rond: 44px; --boven: max(12px, env(safe-area-inset-top)); --onder: max(10px, env(safe-area-inset-bottom));
    --logo-hoogte: 40px;
  }
  .rond svg { width: 20px; height: 20px; }
  .pil, .merk, .gemaakt { padding: 5px 11px 5px 8px; font-size: 10px; letter-spacing: calc(var(--klein-spatie) * 0.83); gap: 6px; }
  .pil .stip, .merk .stip, .gemaakt .stip { width: 8px; height: 8px; }
  .merk { padding: 6px 10px 6px 8px; letter-spacing: calc(var(--klein-spatie) * 0.58); }

  /* kop-kaart met de plek */
  .kop-plek .boven { gap: 14px 14px; }
  .gesprek { min-height: 36px; padding: 6px 13px; font-size: 13px; box-shadow: var(--s-pil-hoog); }
  .gesprek .pijl { width: 14px; height: 14px; }
  .plek { padding: 9px 9px 10px 13px; border-radius: calc(var(--r-kaart) * 0.8); gap: 0 10px; box-shadow: var(--s-kaart-smal, 0 0 0 3px var(--lijn), 6px 7px 0 3px var(--lijn)); }
  .plek.zonder-tekst { padding-right: 13px; }
  .plek h1 { font-size: 19px; }
  .plek-knop { width: 30px; height: 30px; }
  .plek-tekst { font-size: 15px; max-height: 44vh; }
  .zaak--logo .zaak-naam { padding: 7px 10px; }

  /* kaart met de lijst (autodemo) */
  .kop-lijst .boven { gap: 12px; }
  .kop-lijst .links { width: auto; flex: 1 1 auto; max-width: 290px; }
  .kop-lijst .bediening { flex-direction: column; gap: 12px; }
  .kop-lijst .tip { top: 50%; left: auto; right: calc(100% + 12px); translate: 0 -50%; }
  .kop-lijst .bediening .rond:last-child .tip { right: calc(100% + 12px); translate: 0 -50%; }
  .kop-lijst .zaak { margin-bottom: 18px; }
  .zaak .pil { margin: 0 0 -10px 10px; }
  .zaak-naam { padding: 14px 13px 9px; border-radius: calc(var(--r-zaak) * 0.78); font-size: 19px; box-shadow: var(--s-kaart-smal, 0 0 0 3px var(--lijn), 5px 6px 0 3px var(--lijn)); }
  .lijstkaart { border-radius: calc(var(--r-venster) * 0.8); box-shadow: var(--s-kaart-smal, 0 0 0 3px var(--lijn), 6px 7px 0 3px var(--lijn)); }
  .lijstkaart-kop { padding: 18px 10px 11px 14px; gap: 10px; }
  .lijstkaart h1 { font-size: 23px; }
  .lijstkaart-soort { font-size: 10px; }
  .lijst-knop-open { width: 30px; height: 30px; }
  .lijstkaart-lijf { padding: 0 14px 16px; gap: 12px; }
  .lijst-knop { min-height: 38px; font-size: 15px; }

  .kaart { bottom: calc(var(--onder) + 124px); border-radius: calc(var(--r-venster) * 0.8); box-shadow: var(--s-kaart-smal, 0 0 0 3px var(--lijn), 7px 8px 0 3px var(--lijn)); }
  .kaart .balk { height: 38px; }

  /* onderaan */
  .onder { gap: 8px; }
  .onder .gemaakt { margin-top: -6px; padding: 4px 10px 4px 7px; font-size: calc(var(--gemaakt-maat) * 0.79); box-shadow: var(--s-gemaakt-smal, 0 0 0 2px var(--lijn)); }
  .deuren { gap: 8px; padding: 4px 4px 4px 12px; box-shadow: var(--s-pil-hoog); }
  .deuren-naam { font-size: 10px; }
  .deuren-schakel button { min-width: 56px; min-height: 32px; padding: 5px 11px; font-size: 14px; }
  .onder-rij { min-height: 40px; }
  .standpunten { justify-content: flex-start; }
  .standpunten ol { gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  .standpunt { width: 112px; border-radius: calc(var(--r-tegel) * 0.81); box-shadow: var(--s-tegel-smal, 0 0 0 2.5px var(--lijn), 4px 5px 0 2.5px var(--lijn)); }
  .standpunt img { height: 52px; }
  .standpunt .naam { min-height: 38px; padding: 5px 8px 6px; gap: 5px; font-size: 12px; }
  .standpunt .naam svg { width: 15px; height: 15px; }
  .standpunt[aria-current] { transform: translateY(-4px); box-shadow: var(--s-tegel-huidig-smal, 0 0 0 2.5px var(--lijn), 4px 5px 0 2.5px var(--huidig-schaduw)); }
  .standpunten--showroom ol { padding-top: 14px; }
  .standpunten--showroom .standpunt { width: 104px; }
  .standpunten--showroom .standpunt img { height: 48px; }
  .standpunten--showroom .standpunt .naam { min-height: 34px; padding: 4px 7px 5px; font-size: 12px; }
  .standpunt .nr { width: 18px; height: 18px; font-size: 10px; }
  .melding { font-size: 14px; }

  /* start */
  .start { align-items: end; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  .start--links { justify-items: stretch; place-items: end stretch; padding: var(--rand) var(--rand) max(28px, env(safe-area-inset-bottom)); }
  .start-kaart { gap: 14px; padding: 22px 22px 24px; border-radius: calc(var(--r-start) * 0.77); box-shadow: var(--s-start-smal, 0 0 0 3px var(--lijn), 7px 8px 0 3px var(--lijn)); }
  .start--links .start-kaart { gap: 12px; padding: 22px 22px 24px; }
  .start-kaart h2 { font-size: var(--start-kop-maat-smal, 46px); }
  .start--links .start-kaart h2 { font-size: 56px; }
  .start-kaart .pil { margin: -38px 0 2px -4px; font-size: 10px; }
  .start-kaart p { font-size: 18px; }
  .start-kaart .start-lang { font-size: 15px; line-height: 1.4; }
  .start-logo-vlak { margin: -22px -22px 0; padding: 16px 22px; }

  /* vensters */
  .venster-tekst { padding: 16px 18px 20px; }
  .venster-tekst h2 { font-size: 21px; }
  .venster-tekst p { font-size: 16px; }
  .demo-tekst { padding: 16px 18px 20px; }
  .demo-tekst h2 { font-size: 28px; }
  .demo-tekst p:not(.label) { font-size: 17px; }

  /* punten */
  .ot-nav-pil { font-size: 13px; padding: 5px 12px 5px 7px; }
  .ot-voorvertoning { display: none; }
  .ot-kaart { max-width: 210px; padding: 9px 13px 11px; }
  .ot-kaart-naam { font-size: 16px; }
  .ot-kaart-regel { font-size: 14px; }
}
/* heel smal: het merk wordt korter, zodat het naast de oproep past */
@media (max-width: 369px) {
  .merk .lang { display: none; }
}

/* ---------- laag scherm (telefoon liggend): kleinere standpunten ---------- */
@media (max-height: 520px) {
  .kop-plek .standpunt { width: 118px; }
  .kop-plek .standpunt img { height: 40px; }
  .kop-plek .standpunt .naam { min-height: 34px; font-size: 12px; }
  .kaart { width: 260px; }
  .kaart-vlak { aspect-ratio: 4 / 3; }
  .plek-tekst { max-height: 40vh; }
}

/* ---------- beweging ---------- */
@media (prefers-reduced-motion: no-preference) {
  dialog.venster[open] { animation: plop 0.4s var(--plop); }
  .kaart:not([hidden]) { animation: plop 0.4s var(--plop); transform-origin: 90% 0; }
  .start-kaart { animation: plop 0.55s var(--plop) 0.15s both; }
  .ot-optie-knop { animation: ot-in 0.5s var(--plop) calc(0.35s + var(--i, 0) * 70ms) both; }
  @keyframes ot-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.3); } to { opacity: 1; transform: translate(-50%, -50%); } }
  @keyframes plop { from { opacity: 0; transform: translateY(18px) scale(0.94); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  /* geen overgangen: ook geen overgang van 0,01 ms, want dan blijft wat zichtbaar wordt heel even
     onzichtbaar en kan het de focus niet krijgen */
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* de stip pulseert niet: een vaste ring laat zien dat hij klikbaar is */
  .ot-puls { transform: scale(1.5); opacity: 0.6; }
}