/* De deur, drie richtingen — mockup-stijl (24 september 2026).
   Statische mockups voor E's keuze; geen app. De tokens hieronder zijn letterlijk overgenomen uit
   web/src/app.css (presentatie-branch), met dezelfde namen, zodat een keuze één-op-één terug kan
   naar de code. Wat hier nieuw is, staat onder "— mockup —" en draagt een naam die zegt waarvoor.

   LETTERS: in de app komen Montserrat en Source Sans 3 via npm (@fontsource-variable); een
   Google-Fonts-verzoek is daar verboden (MASTER.md §2). In deze statische mockup mag het wél: de
   pagina's laden de twee letters met één <link> naar fonts.googleapis.com. Daarom heten ze hier
   "Montserrat" en "Source Sans 3" in plaats van "... Variable".

   Donker volgt prefers-color-scheme, net als de app; de schakelaar bovenaan zet data-thema op
   <html> en wint dan. Taal: data-taal op <html>, elke tekst staat er in beide talen (lang="nl" /
   lang="en") en de andere helft verdwijnt. Geen losse hex in de HTML: alles hieronder. */

:root {
  color-scheme: light;

  /* dag (D1 "A1 Linnen") */
  --dag-bg: #f3f1ea;
  --dag-oppervlak: #fbfbf8;
  --dag-rand: #deddd8;
  --dag-inkt: #0e1526;
  --dag-tekst: #373d49;
  /* Een haar donkerder dan app.css (#6a6d74): dat haalde 4,59:1 op linnen en zakte onder 4,5
     zodra er textuur op ligt. Met #62656c blijft het ≥ 4,7:1, ook onder vignet en korrel.
     Voorstel voor app.css als de textuur meegaat. */
  --dag-tekst-gedempt: #62656c;
  --dag-signaal: #c9a227;
  --dag-fout: #8c3a2e;
  --dag-op-accent: #f6f4ee;
  --dag-signaal-inkt: #7d651b;
  --dag-foto-vlak: #e2d8c6;
  --dag-pp-papier: #fdfcf6;
  --dag-pp-korrel: 0.018;
  --dag-pp-lijn: rgba(30, 24, 14, 0.1);
  --dag-pp-schaduw:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(40, 36, 30, 0.05),
    0 18px 34px -20px rgba(40, 36, 30, 0.3);
  --dag-goud-lijn: #a08327;
  --dag-schaduw-rust: 0 1px 2px rgba(40, 36, 30, 0.04);
  --dag-schaduw-kaart: 0 2px 10px rgba(40, 36, 30, 0.05);
  --dag-schaduw-op: 0 8px 22px rgba(40, 36, 30, 0.14);

  /* nacht — nachtblauw met ivoren tekst; goud blijft goud */
  --nacht-bg: #10162a;
  --nacht-oppervlak: #171e33;
  --nacht-rand: #2a3149;
  --nacht-inkt: #f0ebdf;
  --nacht-tekst: #dcd8ce;
  --nacht-tekst-gedempt: #99a0b1;
  --nacht-signaal: #d9b441;
  --nacht-fout: #d99a8c;
  --nacht-op-accent: #10162a;
  --nacht-signaal-inkt: #e6c766;
  --nacht-foto-vlak: #232a3f;
  --nacht-pp-papier: #1d2540;
  --nacht-pp-korrel: 0.045;
  --nacht-pp-lijn: rgba(0, 0, 0, 0.38);
  --nacht-pp-schaduw:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 18px 34px -20px rgba(0, 0, 0, 0.62);
  --nacht-goud-lijn: #d9b441;
  --nacht-schaduw-rust: 0 1px 2px rgba(0, 0, 0, 0.24);
  --nacht-schaduw-kaart: 0 2px 10px rgba(0, 0, 0, 0.28);
  --nacht-schaduw-op: 0 8px 22px rgba(0, 0, 0, 0.42);

  /* de rollen — overdag naar de dag-set */
  --bg: var(--dag-bg);
  --oppervlak: var(--dag-oppervlak);
  --rand: var(--dag-rand);
  --inkt: var(--dag-inkt);
  --tekst: var(--dag-tekst);
  --tekst-gedempt: var(--dag-tekst-gedempt);
  --signaal: var(--dag-signaal);
  --fout: var(--dag-fout);
  --op-accent: var(--dag-op-accent);
  --signaal-inkt: var(--dag-signaal-inkt);
  --foto-vlak: var(--dag-foto-vlak);
  --pp-papier: var(--dag-pp-papier);
  --pp-korrel: var(--dag-pp-korrel);
  --pp-lijn: var(--dag-pp-lijn);
  --pp-schaduw: var(--dag-pp-schaduw);
  --goud-lijn: var(--dag-goud-lijn);
  --schaduw-rust: var(--dag-schaduw-rust);
  --schaduw-kaart: var(--dag-schaduw-kaart);
  --schaduw-op: var(--dag-schaduw-op);

  /* passe-partout (D48) */
  --pp-rand-held: 14px;
  --pp-rand-galerij: 11px;
  --pp-asymmetrie: 1.9;
  --pp-radius: 8px;
  --pp-radius-foto: 3px;

  /* vorm */
  --radius: 20px;
  --radius-groot: 24px;
  --radius-klein: 12px;
  --radius-mini: 8px;
  --radius-pil: 999px;
  --tap: 48px;

  /* ruimte — de enige afstanden (4/8/12/20/32/48/64) */
  --ruimte-1: 4px;
  --ruimte-2: 8px;
  --ruimte-3: 12px;
  --ruimte-4: 20px;
  --ruimte-5: 32px;
  --ruimte-6: 48px;
  --ruimte-7: 64px;

  /* letters (P3) — hier via Google Fonts, zie de kop van dit bestand */
  --font-kop: "Montserrat", "Century Gothic", "Futura", Arial, sans-serif;
  --font-tekst: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-cijfer: var(--font-tekst);

  --maat-mini: 0.6875rem;  /* 11 */
  --maat-klein: 0.8125rem; /* 13 */
  --maat-basis: 0.9375rem; /* 15 */
  --maat-groot: 1.0625rem; /* 17 */
  --kop-klein: 1.25rem;    /* 20 */
  --kop-midden: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  --kop-groot: clamp(1.875rem, 1.35rem + 2.4vw, 2.625rem);

  /* motion */
  --ease-uit: cubic-bezier(0.22, 1, 0.36, 1);
  --vlot: 180ms;
  --rustig: 360ms;

  /* de deur, chiquer (23-09) */
  --knop-letter: 0.01em;
  --chip-hoogte: 2.5rem;
  --chip-rand: 14%;
  --veld-pijl: 2.5rem;
  --veld-letter: var(--maat-groot); /* 17px: iOS zoomt niet in bij 16 of meer */
  --carmen-regel: 1.6;
  --bron-letter: 0.12em;
  --glas-vlak: color-mix(in srgb, var(--pp-papier) 46%, transparent);
  --glas-rand: color-mix(in srgb, var(--pp-papier) 62%, transparent);
  --glas-filter: blur(14px) saturate(1.3);

  /* terugpraten (24-09) */
  --mic-ring: var(--goud-lijn);
  --mic-ring-stil: 1.14;
  --mic-ring-uit: 1.42;

  /* de telefoon op tafel — materialen die geen thema volgen */
  --hout: #4b3221;
  --hout-diep: color-mix(in srgb, var(--hout) 62%, var(--dag-inkt));
  --telefoon-kast: #16181d;
  --telefoon-glans: rgba(255, 255, 255, 0.16);
  --telefoon-b: 390px;
  --telefoon-h: 844px;
  --telefoon-rand: 10px;
  --telefoon-radius: 48px;
  --telefoon-schaduw:
    6px 8px 16px -6px rgba(24, 14, 6, 0.55),
    30px 42px 76px -28px rgba(24, 14, 6, 0.6);
  --tafel-afdruk-schaduw: drop-shadow(4px 8px 14px rgba(24, 14, 6, 0.45));
  --tijdbalk-lijn: color-mix(in srgb, var(--dag-pp-papier) 32%, transparent);
  --tijdbalk-venster: var(--dag-pp-papier);
  --tijdbalk-goud: var(--nacht-goud-lijn);

  /* — mockup — nieuw in deze drie richtingen (namen zoals ze in app.css zouden komen) — */
  --deur-vraag: 1.375rem;          /* 22px: Carmens vraag als kop, in haar eigen tekstletter */
  --deur-veld-hoogte: 3.25rem;     /* 52px: het veld is de focus; ruim boven --tap */
  --deur-status: 1.25rem;          /* de vaste regel onder het veld: duw, luisteren, fout */
  --deur-info: 1.625rem;           /* het "i" is 26 om te zien, --tap om te raken */
  --deur-menu: 2.5rem;             /* de menustip op het beeld: 40 om te zien, --tap om te raken */
  --deur-wissel: 3rem;             /* de luchtfoto als klein wisselpunt in de hoek */
  --plaat-open: 440px;             /* A: het beeld bij de opening (52%) */
  --plaat-midden: 300px;           /* A: een nieuw beeld dat in beeld komt (36%) */
  --plaat-band: 148px;             /* A: het beeld als band zodra het gesprek loopt */
  --vel-laag: 352px;               /* B: het vel bij de opening; de straat houdt 58% */
  --vel-midden: 520px;             /* B: het vel na een paar beurten */
  --vel-hoog: 612px;               /* B: het vel als het huis spreekt; het beeld is een band */
  --vel-radius: var(--radius-groot);
  --mic-groot: 4.5rem;             /* C: de grote microfoon, 72px */
  --afdruk-foto: 16 / 10;          /* C: de verhouding van een afdruk in het gesprek */
  /* Over een foto staat tekst altijd licht, in beide thema's: dat is het papier, geen rol. */
  --op-foto: var(--dag-pp-papier);
  --op-foto-stil: color-mix(in srgb, var(--dag-pp-papier) 82%, transparent);
  /* Een verloop, geen deklaag, en overal waar tekst op de foto staat minstens 60% inkt: dan haalt
     licht papier 4,6:1 ook op het lichtste stuk van een foto (een witte lucht). Nagerekend. */
  --scrim-onder: linear-gradient(to top, color-mix(in srgb, var(--dag-inkt) 70%, transparent) 0%, color-mix(in srgb, var(--dag-inkt) 62%, transparent) 48%, transparent 100%);
  --scrim-kort: linear-gradient(to top, color-mix(in srgb, var(--dag-inkt) 68%, transparent) 0%, color-mix(in srgb, var(--dag-inkt) 60%, transparent) 45%, transparent 100%);
  /* — textuur van het toestel (24-09, E: "de achtergrondkleur blijft te vlak") —
     Eén vaste laag op het toestel, niet per element: hij scrolt niet mee, dus hij flikkert niet.
     Korrel: SVG-ruis (feTurbulence, iets uitgerekt, dus meer vezel dan zand) als data-URI, 5% in
     multiply — gemiddeld ~2,5% donkerder, geen kleur. Licht: 2% donkerder onderin en een zachte
     vignet naar de hoeken (hooguit 6% bij de rand, ~4% waar onderaan tekst staat). */
  --textuur-korrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.55' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncG type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncB type='linear' slope='2' intercept='-0.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  --textuur-tegel: 240px;
  --textuur-sterkte: 0.05;
  --textuur-meng: multiply;
  --textuur-licht:
    linear-gradient(to bottom, rgba(40, 36, 30, 0) 35%, rgba(40, 36, 30, 0.02) 100%),
    radial-gradient(ellipse 85% 75% at 50% 45%, rgba(40, 36, 30, 0) 55%, rgba(40, 36, 30, 0.06) 100%);
  --scrim-hoek: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--dag-inkt) 34%, transparent) 0%, transparent 60%);

  font-family: var(--font-tekst);
}

/* — het donkere thema: dezelfde rollen, de nacht-set. Twee keer, want een schakelaar en een
     media query kunnen geen regel delen. — */
:root[data-thema="donker"] {
  color-scheme: dark;
  --textuur-sterkte: 0.045;
  --textuur-meng: screen;
  --textuur-licht:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.04) 100%),
    radial-gradient(ellipse 85% 75% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.08) 100%);
  --bg: var(--nacht-bg);
  --oppervlak: var(--nacht-oppervlak);
  --rand: var(--nacht-rand);
  --inkt: var(--nacht-inkt);
  --tekst: var(--nacht-tekst);
  --tekst-gedempt: var(--nacht-tekst-gedempt);
  --signaal: var(--nacht-signaal);
  --fout: var(--nacht-fout);
  --op-accent: var(--nacht-op-accent);
  --signaal-inkt: var(--nacht-signaal-inkt);
  --foto-vlak: var(--nacht-foto-vlak);
  --pp-papier: var(--nacht-pp-papier);
  --pp-korrel: var(--nacht-pp-korrel);
  --pp-lijn: var(--nacht-pp-lijn);
  --pp-schaduw: var(--nacht-pp-schaduw);
  --goud-lijn: var(--nacht-goud-lijn);
  --schaduw-rust: var(--nacht-schaduw-rust);
  --schaduw-kaart: var(--nacht-schaduw-kaart);
  --schaduw-op: var(--nacht-schaduw-op);
  --mic-ring: var(--nacht-goud-lijn);
  --glas-vlak: color-mix(in srgb, var(--nacht-pp-papier) 46%, transparent);
  --glas-rand: color-mix(in srgb, var(--nacht-pp-papier) 62%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    color-scheme: dark;
    --textuur-sterkte: 0.045;
    --textuur-meng: screen;
    --textuur-licht:
      linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.04) 100%),
      radial-gradient(ellipse 85% 75% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.08) 100%);
    --bg: var(--nacht-bg);
    --oppervlak: var(--nacht-oppervlak);
    --rand: var(--nacht-rand);
    --inkt: var(--nacht-inkt);
    --tekst: var(--nacht-tekst);
    --tekst-gedempt: var(--nacht-tekst-gedempt);
    --signaal: var(--nacht-signaal);
    --fout: var(--nacht-fout);
    --op-accent: var(--nacht-op-accent);
    --signaal-inkt: var(--nacht-signaal-inkt);
    --foto-vlak: var(--nacht-foto-vlak);
    --pp-papier: var(--nacht-pp-papier);
    --pp-korrel: var(--nacht-pp-korrel);
    --pp-lijn: var(--nacht-pp-lijn);
    --pp-schaduw: var(--nacht-pp-schaduw);
    --goud-lijn: var(--nacht-goud-lijn);
    --schaduw-rust: var(--nacht-schaduw-rust);
    --schaduw-kaart: var(--nacht-schaduw-kaart);
    --schaduw-op: var(--nacht-schaduw-op);
    --mic-ring: var(--nacht-goud-lijn);
    --glas-vlak: color-mix(in srgb, var(--nacht-pp-papier) 46%, transparent);
    --glas-rand: color-mix(in srgb, var(--nacht-pp-papier) 62%, transparent);
  }
}

/* — taal: de andere helft verdwijnt. Zonder script staat Nederlands. — */
html:not([data-taal="en"]) body [lang="en"],
html[data-taal="en"] body [lang="nl"] {
  display: none !important;
}

/* ———————————————————————— de pagina ———————————————————————— */

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
}
body {
  font-family: var(--font-tekst);
  font-size: var(--maat-basis);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-kop);
  color: var(--inkt);
  line-height: 1.1;
}
h1 {
  font-size: var(--kop-groot);
  font-weight: 700;
  letter-spacing: -0.02em;
}
h2 {
  font-size: var(--kop-midden);
  font-weight: 600;
  letter-spacing: -0.015em;
}
h3 {
  font-size: var(--kop-klein);
  font-weight: 600;
  letter-spacing: -0.005em;
}
p {
  margin: 0;
  text-wrap: pretty;
}
a {
  color: var(--inkt);
  text-underline-offset: 3px;
}
button {
  font: inherit;
  color: inherit;
}
img {
  display: block;
  max-width: 100%;
}
.cijfer {
  font-family: var(--font-cijfer);
  font-variant-numeric: tabular-nums lining-nums;
}
.label-caps {
  font-size: var(--maat-mini);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tekst-gedempt);
  line-height: 1.2;
}
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--inkt);
  outline-offset: 2px;
}

.blad {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--ruimte-4);
}

/* De balk bovenaan: terug, en de twee schakelaars. Blijft staan bij scrollen. */
.balk {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rand);
}
.balk .blad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-3);
  min-height: 3.5rem;
  flex-wrap: wrap;
}
.kruimel {
  display: flex;
  gap: var(--ruimte-3);
  flex-wrap: wrap;
  font-size: var(--maat-klein);
  color: var(--tekst-gedempt);
}
.kruimel a {
  color: inherit;
}
.schakelaars {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-2);
}
.schakelaar-label {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--ruimte-2) 0 var(--ruimte-3);
  font-size: var(--maat-klein);
  font-weight: 600;
  color: var(--tekst-gedempt);
}
.voetnoot {
  font-size: var(--maat-klein);
  color: var(--tekst-gedempt);
}
/* Een schakelaar is één pil met twee helften; de actieve helft in inkt (TaalSchakelaar). */
.schakelaar {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-pil);
  background: var(--oppervlak);
}
.schakelaar button {
  position: relative;
  min-width: 3rem;
  height: 2rem;
  padding: 0 var(--ruimte-3);
  border: 0;
  border-radius: var(--radius-pil);
  background: none;
  color: var(--tekst-gedempt);
  font-size: var(--maat-klein);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.schakelaar button::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 100%;
  height: var(--tap);
  transform: translate(-50%, -50%);
}
.schakelaar button[aria-pressed="true"] {
  background: var(--inkt);
  color: var(--op-accent);
}

.kop {
  padding: var(--ruimte-6) 0 var(--ruimte-5);
  display: grid;
  gap: var(--ruimte-3);
}
.kop .bovenregel {
  font-size: var(--maat-klein);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tekst-gedempt);
}
.kop .lood {
  max-width: 62ch;
  font-size: var(--maat-groot);
  color: var(--tekst);
}

/* De drie richtingen als legenda onder de kop. */
.legenda {
  display: grid;
  gap: var(--ruimte-3);
  margin-top: var(--ruimte-3);
}
@media (min-width: 900px) {
  .legenda {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ruimte-4);
  }
}
.legenda a {
  display: block;
  padding: var(--ruimte-4);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--oppervlak);
  box-shadow: var(--schaduw-kaart);
  text-decoration: none;
  color: var(--tekst);
}
.legenda a:hover {
  border-color: color-mix(in srgb, var(--inkt) 34%, var(--rand));
}
.legenda .letter {
  font-family: var(--font-kop);
  font-weight: 700;
  color: var(--inkt);
  font-size: var(--kop-klein);
}
.legenda p {
  margin-top: var(--ruimte-1);
  font-size: var(--maat-basis);
}
.legenda .verder {
  display: inline-block;
  margin-top: var(--ruimte-2);
  font-size: var(--maat-klein);
  color: var(--tekst-gedempt);
  text-decoration: underline;
}

.moment {
  padding: var(--ruimte-6) 0 var(--ruimte-4);
  scroll-margin-top: 4rem;
}
.moment-kop {
  display: grid;
  gap: var(--ruimte-2);
  margin-bottom: var(--ruimte-4);
}
.moment-kop .nummer {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: var(--maat-klein);
  letter-spacing: 0.06em;
  color: var(--tekst-gedempt);
}
.moment-kop p {
  max-width: 70ch;
  color: var(--tekst);
}

/* ———————————————————————— de tafel ———————————————————————— */

/* Het houten blad: een materiaal, geen thema (net als in de app). Het is AI-beeld, dus het
   draagt het label (D9). */
.tafel {
  position: relative;
  border-radius: var(--radius-groot);
  background: var(--hout) url("beeld/hout-walnoot.jpg") center / cover;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hout-diep) 60%, transparent);
  overflow: hidden;
}
.ai-label {
  position: absolute;
  right: var(--ruimte-3);
  bottom: var(--ruimte-3);
  padding: 2px var(--ruimte-2);
  border-radius: var(--radius-mini);
  background: color-mix(in srgb, var(--dag-inkt) 55%, transparent);
  color: var(--dag-op-accent);
  font-size: var(--maat-mini);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Drie toestellen naast elkaar, A B C. Onder 900 px een rij om door te vegen. */
.rij {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: center;
  gap: var(--ruimte-6);
  padding: var(--ruimte-5) var(--ruimte-5) var(--ruimte-6);
}
.rij-regels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ruimte-4);
  margin-top: var(--ruimte-4);
}
.rij-regels p {
  font-size: var(--maat-basis);
}
.rij-regels b {
  font-family: var(--font-kop);
  color: var(--inkt);
  font-weight: 700;
  margin-right: var(--ruimte-1);
}

.plek {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: var(--ruimte-3);
}
.plek-kop {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: var(--maat-basis);
  letter-spacing: 0.01em;
  color: var(--dag-pp-papier);
  text-shadow: 0 1px 2px var(--hout-diep);
}

/* ———————————————————————— het toestel ———————————————————————— */

/* De kast van components/Tafel.svelte: 10px zwart, radius 48, een glans aan de rand, warme
   schaduw naar rechtsonder. Geen merk, geen eiland, geen statusbalk — zoals in de app. */
.toestel {
  position: relative;
  width: calc(var(--telefoon-b) + var(--telefoon-rand) * 2);
  height: calc(var(--telefoon-h) + var(--telefoon-rand) * 2);
  padding: var(--telefoon-rand);
  border-radius: var(--telefoon-radius);
  background: var(--telefoon-kast);
  box-shadow:
    inset 0 0 0 1px var(--telefoon-glans),
    var(--telefoon-schaduw);
  flex: 0 0 auto;
}
.scherm {
  position: relative;
  width: var(--telefoon-b);
  height: var(--telefoon-h);
  overflow: hidden;
  border-radius: calc(var(--telefoon-radius) - var(--telefoon-rand));
  background: var(--bg);
  color: var(--tekst);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  font-size: var(--maat-basis);
  line-height: 1.5;
}

/* De textuur: twee lagen óp het toestel, boven alles, zonder aanraken. ::before is het licht
   (verloop + vignet), ::after de korrel in multiply (licht) of screen (donker). Ze horen bij
   .scherm en niet bij het linnen of het papier zelf: wat er in het toestel scrolt, schuift eronder
   door, de korrel blijft staan. Tekst krijgt de laag ook, en daarom is het contrast nagerekend
   mét laag (zie --dag-tekst-gedempt). */
.scherm::before,
.scherm::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}
.scherm::before {
  z-index: 30;
  background: var(--textuur-licht);
}
.scherm::after {
  z-index: 31;
  background-image: var(--textuur-korrel);
  background-size: var(--textuur-tegel) var(--textuur-tegel);
  mix-blend-mode: var(--textuur-meng);
  opacity: var(--textuur-sterkte);
}

/* ———————————————————— gedeeld in het scherm ———————————————————— */

/* Een foto-vak: het beeld ligt absoluut, eronder een warm vlak zolang het niet laadt (lokaal:
   /api/straatbeeld bestaat alleen op de demo, dan haalt onerror het beeld weg). */
.foto-vak {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 30% 18%, color-mix(in srgb, var(--pp-papier) 55%, var(--foto-vlak)) 0%, transparent 62%),
    linear-gradient(158deg, var(--foto-vlak) 0%, color-mix(in srgb, var(--inkt) 16%, var(--foto-vlak)) 100%);
}
.foto-vak > img.foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.foto-vak > img.foto.links {
  object-position: 30% 50%;
}
/* De haarlijn waar de foto in het papier ligt; goud zodra het huis spreekt (D49, .pp-band). */
.foto-vak::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--pp-lijn);
}
.foto-vak.band::after {
  box-shadow: inset 0 0 0 1px var(--goud-lijn);
}
/* Een verloop onderaan, alleen waar er tekst op de foto staat — geen vlakke deklaag. */
.scrim-onder {
  position: absolute;
  inset: auto 0 0 0;
  height: 13rem;
  z-index: 1;
  pointer-events: none;
  background: var(--scrim-onder);
}
.scrim-onder.kort {
  height: 3.5rem;
  background: var(--scrim-kort);
}
.scrim-hoek {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--scrim-hoek);
}
/* De verplichte Google-attributie, klein in de onderrand van het beeld, waar Google hem zelf zet. */
.attributie {
  position: absolute;
  right: var(--ruimte-3);
  bottom: var(--ruimte-2);
  z-index: 2;
  font-size: var(--maat-mini);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--op-foto);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--dag-inkt) 60%, transparent);
}
/* Presentatiestand (E, 24-09): met ?credits=uit verdwijnt de Google-regel en ligt er onderaan elk
   Google-beeld een strook in de kleur van het passe-partout: hetzelfde verloop als de scrim, zonder
   tekst, en hoog genoeg om Google's eigen logo (linksonder in het beeld) en copyright te bedekken.
   Alleen voor de presentatie; op de live demo blijft de attributie staan (Google Maps Platform). */
.strook {
  display: none;
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  height: 3rem;
  pointer-events: none;
  background: linear-gradient(to top, var(--pp-papier) 0%, var(--pp-papier) 50%, color-mix(in srgb, var(--pp-papier) 0%, transparent) 100%);
}
html[data-credits="uit"] .strook {
  display: block;
}
html[data-credits="uit"] .attributie,
html[data-credits="uit"] .scrim-onder.kort {
  display: none;
}

/* De luchtfoto als klein wisselpunt in de hoek: geen passe-partout (een miniatuur krijgt er
   geen, MASTER §9), één haarlijn van glas. Linksboven, want linksonder ligt Google's eigen logo in
   het beeld en dat mag nooit bedekt worden. */
.wissel {
  position: absolute;
  left: var(--ruimte-3);
  top: var(--ruimte-3);
  z-index: 2;
  width: var(--deur-wissel);
  height: var(--deur-wissel);
  border-radius: var(--radius-mini);
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--glas-rand),
    var(--schaduw-op);
}
.wissel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* De menustip: één glazen rondje rechtsboven. Stem, gesprek, taal, zijdeur zitten erachter. */
.menustip {
  position: absolute;
  top: var(--ruimte-3);
  right: var(--ruimte-3);
  z-index: 5;
  width: var(--deur-menu);
  height: var(--deur-menu);
  display: grid;
  place-items: center;
  border-radius: var(--radius-pil);
  background: var(--glas-vlak);
  backdrop-filter: var(--glas-filter);
  -webkit-backdrop-filter: var(--glas-filter);
  box-shadow: inset 0 0 0 1px var(--glas-rand);
  color: var(--inkt);
}
.menustip.op-linnen {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 0 0 1px var(--rand);
}
.menustip::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: var(--tap);
  height: var(--tap);
  transform: translate(-50%, -50%);
}
.menustip svg,
.info svg {
  display: block;
}

/* Het "i": bronnen en peildata, één tik verder. */
.info {
  position: relative;
  flex: 0 0 auto;
  width: var(--deur-info);
  height: var(--deur-info);
  display: grid;
  place-items: center;
  border-radius: var(--radius-pil);
  border: 1px solid color-mix(in srgb, var(--inkt) 22%, transparent);
  color: var(--tekst-gedempt);
  font-family: var(--font-tekst);
  font-weight: 700;
  font-size: var(--maat-klein);
  font-style: italic;
  line-height: 1;
}
.info::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: var(--tap);
  height: var(--tap);
  transform: translate(-50%, -50%);
}
.info.op-foto {
  color: var(--op-foto);
  border-color: var(--op-foto-stil);
}

/* De naam van de plek: één regel in de kopletter, het "i" ernaast. */
.naamregel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-3);
}
.naamregel .naam {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: var(--maat-groot);
  letter-spacing: -0.005em;
  color: var(--inkt);
  line-height: 1.25;
}
.naamregel .naam .plaats {
  font-weight: 500;
  color: var(--tekst-gedempt);
}

/* Papier als onderrand: de strook onder een beeld dat van rand tot rand loopt. */
.papier {
  position: relative;
  background: var(--pp-papier);
  isolation: isolate;
}
.papier::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--pp-korrel);
  background-image:
    repeating-conic-gradient(var(--inkt) 0% 25%, transparent 0% 50%),
    repeating-conic-gradient(var(--inkt) 0% 25%, transparent 0% 50%);
  background-size:
    2px 2px,
    5px 5px;
  background-position:
    0 0,
    1px 2px;
}

/* — het gesprek — */
.stroom {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--ruimte-4);
  padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-3);
  /* bovenaan dooft het gesprek uit: dit is een pagina die doorloopt, geen afgeknipte regel */
  mask-image: linear-gradient(to bottom, transparent 0, var(--inkt) 3.5rem, var(--inkt) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--inkt) 3.5rem, var(--inkt) 100%);
}
.stroom > * {
  flex: 0 0 auto;
}
.spreker {
  display: block;
  margin-bottom: var(--ruimte-1);
}
/* Carmen: de tekstletter op het linnen. Nieuw in inkt, ouder gedempt. */
.carmen {
  font-family: var(--font-tekst);
  font-size: var(--maat-groot);
  line-height: var(--carmen-regel);
  color: var(--inkt);
  max-width: 58ch;
}
.carmen.oud,
.huis-beurt.oud,
.jij.oud {
  color: var(--tekst-gedempt);
}
/* Een beurt die al bijna uit beeld is: gedempt; het uitdoven doet het masker van de stroom. */
.carmen.ver {
  color: var(--tekst-gedempt);
}
/* Haar vraag is de kop van het moment — in haar eigen letter, alleen groter en zwaarder. */
.vraag {
  margin-top: var(--ruimte-1);
  font-family: var(--font-tekst);
  font-size: var(--deur-vraag);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--inkt);
  text-wrap: balance;
}
/* Jij: rechts uitgelijnd, geen bubbel, geen naam. Wat je zei. */
.jij {
  align-self: flex-end;
  max-width: 80%;
  text-align: right;
  font-size: var(--maat-groot);
  line-height: 1.45;
  color: var(--tekst);
}
.jij .gezegd {
  display: block;
  font-size: var(--maat-mini);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tekst-gedempt);
  margin-bottom: 2px;
}
.jij.voorlopig {
  color: var(--tekst-gedempt);
  font-style: italic;
}
.cursor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--mic-ring);
}

/* Het huis: op papier, in de kopletter. De nieuwste zin in inkt, eronder wat gedrukt staat. */
.huisvel {
  display: grid;
  gap: var(--ruimte-4);
  padding: var(--ruimte-4);
  border: 1px solid var(--rand);
  border-radius: var(--pp-radius);
  background: var(--pp-papier);
  box-shadow: var(--pp-schaduw);
}
.huis-beurt {
  display: grid;
  gap: var(--ruimte-2);
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: var(--maat-groot);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--inkt);
}
.huis-beurt.nieuw {
  font-size: var(--kop-klein);
  line-height: 1.25;
}
.huis-beurt.oud {
  font-weight: 500;
}
/* Gedrukt: precies, klein, in de tekstletter met tabulaire cijfers — geen kapitalen meer voor een
   hele regel (doorlichting §4.9). Een haarlijn erboven, zoals de rand van een kaartje. */
.gedrukt {
  display: grid;
  gap: 2px;
  padding-top: var(--ruimte-2);
  border-top: 1px solid var(--rand);
  font-family: var(--font-tekst);
  font-weight: 400;
  font-size: var(--maat-klein);
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--tekst);
  font-variant-numeric: tabular-nums lining-nums;
}
.huis-beurt.oud .gedrukt {
  color: var(--tekst-gedempt);
}
.gedrukt .bron,
.bronregel {
  font-size: var(--maat-mini);
  letter-spacing: 0.02em;
  color: var(--tekst-gedempt);
}

/* — het antwoordblok: staat vast onderaan — */
.antwoord {
  flex: 0 0 auto;
  display: grid;
  gap: var(--ruimte-3);
  padding: 0 var(--ruimte-4) var(--ruimte-4);
}

/* Het veld: een pil met één knop. Leeg = microfoon, tekst = pijl, luisteren = inkt met ring. */
.veld {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--deur-veld-hoogte);
  padding: 0 calc(var(--tap) + var(--ruimte-1)) 0 var(--ruimte-4);
  border: 1px solid color-mix(in srgb, var(--inkt) var(--chip-rand), var(--rand));
  border-radius: var(--radius-pil);
  background: var(--oppervlak);
  box-shadow: var(--schaduw-rust);
  font-size: var(--veld-letter);
  color: var(--tekst);
  white-space: nowrap;
  overflow: hidden;
}
.veld .plaatshouder {
  color: var(--tekst-gedempt);
}
.veld.luistert {
  border-color: color-mix(in srgb, var(--inkt) 40%, var(--rand));
  box-shadow:
    var(--schaduw-rust),
    0 0 0 4px color-mix(in srgb, var(--inkt) 7%, transparent);
}
.veld .voorlopig {
  color: var(--tekst-gedempt);
  font-style: italic;
  overflow: hidden;
  white-space: nowrap;
}
.veld-knop {
  position: absolute;
  top: 50%;
  right: calc((var(--deur-veld-hoogte) - var(--veld-pijl)) / 2);
  width: var(--veld-pijl);
  height: var(--veld-pijl);
  display: grid;
  place-items: center;
  border-radius: var(--radius-pil);
  transform: translateY(-50%);
  color: var(--inkt);
}
.veld-knop.vol {
  background: var(--inkt);
  color: var(--op-accent);
  box-shadow: var(--schaduw-rust);
}
/* De ring: één gouden haarlijn om de knop (goud = een band met jou, als lijn), en een tweede die
   naar buiten ademt — in de mockup stilgezet op het midden van zijn adem. */
/* .ring zet zelf geen position: de knop waar hij om ligt is al geplaatst (absoluut in het veld,
   relatief als grote microfoon). */
.ring::before,
.ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--mic-ring);
  pointer-events: none;
}
.ring::before {
  transform: scale(var(--mic-ring-stil));
}
.ring::after {
  transform: scale(var(--mic-ring-uit));
  opacity: 0.35;
}
.ring.spreekt::before,
.ring.spreekt::after {
  border-color: var(--inkt);
}
.ring.spreekt::after {
  opacity: 0.14;
}

/* De vaste regel onder het veld: de duw na stilte, wie er luistert, een fout. Altijd even hoog,
   dus het veld beweegt nooit. */
.statusregel {
  display: flex;
  align-items: center;
  gap: var(--ruimte-2);
  min-height: var(--deur-status);
  margin-top: calc(-1 * var(--ruimte-1));
  padding-inline: var(--ruimte-4);
  font-size: var(--maat-klein);
  line-height: 1.3;
  color: var(--tekst-gedempt);
}
.statusregel b {
  font-weight: 600;
  color: var(--inkt);
}
.luisterstip {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pil);
  border: 1px solid var(--mic-ring);
  background: color-mix(in srgb, var(--mic-ring) 45%, transparent);
}

/* Voorzetten: hoogstens drie, in één rij die doorschuift; de eerste is de belangrijkste. */
.voorzetten {
  display: flex;
  gap: var(--ruimte-2);
  overflow: hidden;
  margin-inline: calc(-1 * var(--ruimte-4));
  padding-inline: var(--ruimte-4);
  mask-image: linear-gradient(to right, var(--inkt) 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, var(--inkt) 86%, transparent 100%);
}
.chip {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: var(--chip-hoogte);
  padding: 0 calc(var(--ruimte-3) + var(--ruimte-1));
  border: 1px solid color-mix(in srgb, var(--inkt) var(--chip-rand), transparent);
  border-radius: var(--radius-pil);
  color: var(--tekst);
  font-size: var(--maat-basis);
  letter-spacing: var(--knop-letter);
  white-space: nowrap;
}
.chip.eerst {
  border-color: color-mix(in srgb, var(--inkt) 30%, transparent);
  background: color-mix(in srgb, var(--inkt) 9%, var(--bg));
  color: var(--inkt);
  font-weight: 600;
}
.op-papier .chip.eerst {
  background: color-mix(in srgb, var(--inkt) 9%, var(--pp-papier));
}

/* Het ja en het nee (GesprekChips, ronde 23-09): één volle knop, één stil woord. */
.janee {
  display: grid;
  gap: 0;
  justify-items: center;
}
.ja {
  width: 100%;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pil);
  background: var(--inkt);
  color: var(--op-accent);
  font-family: var(--font-kop);
  font-size: var(--maat-basis);
  font-weight: 600;
  letter-spacing: var(--knop-letter);
  box-shadow: var(--schaduw-rust);
}
.nee {
  min-height: var(--tap);
  display: grid;
  place-items: center;
  color: var(--tekst-gedempt);
  font-size: var(--maat-basis);
}

/* ———————————————————— A · Rustig ———————————————————— */

.a .plaat {
  flex: 0 0 auto;
  position: relative;
}
.a .plaat .foto-vak {
  height: var(--plaat-open);
}
.a.midden .plaat .foto-vak {
  height: var(--plaat-midden);
}
.a.band-stand .plaat .foto-vak {
  height: var(--plaat-band);
}
/* De onderrand: het papier onder de foto, alleen nog de naam en het "i". */
.a .onderrand {
  padding: var(--ruimte-3) var(--ruimte-4);
  border-bottom: 1px solid var(--rand);
}

/* ———————————————————— B · Het beeld als achtergrond ———————————————————— */

/* Eén maat per stand: hoe hoog het vel staat. De foto, de naam erop en het vel rekenen ermee. */
.b {
  --vel-h: var(--vel-laag);
}
.b.midden {
  --vel-h: var(--vel-midden);
}
.b.hoog {
  --vel-h: var(--vel-hoog);
}
.b .achter {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 0;
}
/* De foto loopt een radius onder het vel door, zodat hij in de ronde hoeken nog te zien is. */
.b .achter .foto-vak {
  height: calc(var(--telefoon-h) - var(--vel-h) + var(--vel-radius) + var(--ruimte-2));
}
/* De naam in het verloop, net boven het vel. */
.b .opfoto {
  position: absolute;
  left: var(--ruimte-4);
  right: var(--ruimte-4);
  bottom: calc(var(--vel-h) + var(--ruimte-3));
  z-index: 2;
  display: grid;
  gap: var(--ruimte-1);
}
.b .opfoto .naamregel .naam,
.b .opfoto .naamregel .naam .plaats {
  color: var(--op-foto);
  text-shadow: 0 1px 3px color-mix(in srgb, var(--dag-inkt) 50%, transparent);
}
.b .opfoto .naamregel .naam {
  font-size: var(--kop-klein);
}
.b .opfoto .attributie {
  position: static;
}
.b.hoog .opfoto .naamregel .naam {
  font-size: var(--maat-groot);
}
/* Het vel: het passe-partout is het vel zelf. Het schuift bij elke beurt een stand hoger. */
.b .vel {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  height: var(--vel-h);
  display: flex;
  flex-direction: column;
  border-radius: var(--vel-radius) var(--vel-radius) 0 0;
  box-shadow:
    0 -1px 0 color-mix(in srgb, var(--inkt) 8%, transparent),
    0 -18px 40px -24px color-mix(in srgb, var(--dag-inkt) 70%, transparent);
}
/* Waar foto en papier elkaar raken: bij het huis een gouden haarlijn (G2/G3), anders de
   gewone haarlijn van het papier. */
.b .vel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  border-top: 1px solid var(--glas-rand);
}
.b .vel.band::after {
  border-top-color: var(--goud-lijn);
}
.b .greep {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 4px;
  margin: var(--ruimte-2) auto 0;
  border-radius: var(--radius-pil);
  background: color-mix(in srgb, var(--inkt) 16%, transparent);
}
.b .vel .stroom {
  padding-top: var(--ruimte-3);
}

/* ———————————————————— C · Gesprek eerst ———————————————————— */

.c .stroom {
  padding-top: var(--ruimte-3);
  /* de menustip ligt op het linnen: het gesprek dooft eronder langer uit */
  mask-image: linear-gradient(to bottom, transparent 0, transparent 1.5rem, var(--inkt) 5.5rem, var(--inkt) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 1.5rem, var(--inkt) 5.5rem, var(--inkt) 100%);
}
/* Een afdruk in het gesprek, zoals een gedeelde foto: papier, foto, naam in de onderrand. */
.afdruk {
  position: relative;
  display: grid;
  padding: var(--pp-rand-galerij) var(--pp-rand-galerij) 0;
  border: 1px solid var(--rand);
  border-radius: var(--pp-radius);
  background: var(--pp-papier);
  box-shadow: var(--pp-schaduw);
}
.afdruk .foto-vak {
  aspect-ratio: var(--afdruk-foto);
  border-radius: var(--pp-radius-foto);
}
.afdruk .naamregel {
  padding: var(--ruimte-2) 0 calc(var(--pp-rand-galerij) * 0.9);
}
.afdruk .naamregel .naam {
  font-size: var(--maat-basis);
}
.afdruk .huisstem {
  display: grid;
  gap: var(--ruimte-4);
  padding: var(--ruimte-1) 0 var(--ruimte-4);
  border-top: 1px solid var(--rand);
  padding-top: var(--ruimte-3);
}
.afdruk .huis-beurt.oud {
  font-size: var(--maat-basis);
}
.afdruk .huis-beurt.nieuw {
  font-size: var(--maat-groot);
}
.afdruk.klein .foto-vak {
  aspect-ratio: 21 / 9;
}
/* Het dok: stille woorden, een klein veld, de grote microfoon met zijn woord. */
.c .dok {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: var(--ruimte-2);
  padding: var(--ruimte-2) var(--ruimte-4) var(--ruimte-4);
}
.woorden {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--ruimte-3);
  max-width: 21rem;
  text-align: center;
}
.woord {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0;
  font-size: var(--maat-basis);
  color: var(--tekst);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--inkt) 22%, transparent);
  text-underline-offset: 0.3em;
}
/* 36 om te zien, --tap om te raken */
.woord::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: calc(100% + var(--ruimte-3));
  height: var(--tap);
  transform: translate(-50%, -50%);
}
.woord.eerst {
  color: var(--inkt);
  font-weight: 600;
  text-decoration-color: color-mix(in srgb, var(--inkt) 55%, transparent);
}
.c .veld.klein {
  width: 100%;
  height: var(--tap);
  background: transparent;
  box-shadow: none;
  border-color: var(--rand);
}
.mic-groot {
  position: relative;
  width: var(--mic-groot);
  height: var(--mic-groot);
  display: grid;
  place-items: center;
  margin-top: var(--ruimte-1);
  border-radius: var(--radius-pil);
  background: var(--oppervlak);
  border: 1px solid var(--rand);
  box-shadow: var(--schaduw-op);
  color: var(--inkt);
}
.mic-groot.luistert {
  background: var(--inkt);
  color: var(--op-accent);
  border-color: var(--inkt);
}
.micwoord {
  min-height: var(--deur-status);
  margin-top: var(--ruimte-1);
  font-size: var(--maat-klein);
  line-height: 1.3;
  color: var(--tekst-gedempt);
  text-align: center;
}
.micwoord b {
  color: var(--inkt);
  font-weight: 600;
}
.micwoord .privacy {
  display: block;
  font-size: var(--maat-mini);
  letter-spacing: 0.02em;
}

/* ———————————————————— de toelichting per richting ———————————————————— */

.richting-kop .tien {
  display: grid;
  gap: var(--ruimte-1);
  margin: var(--ruimte-3) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: tien;
  max-width: 78ch;
}
.richting-kop .tien li {
  position: relative;
  padding-left: 2rem;
  counter-increment: tien;
}
.richting-kop .tien li::before {
  content: counter(tien);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: var(--maat-klein);
  color: var(--tekst-gedempt);
}

/* Per moment: het toestel links op het hout, de toelichting als vel papier ernaast. */
.opstelling {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  gap: var(--ruimte-6);
  padding: var(--ruimte-5) var(--ruimte-6) var(--ruimte-6);
}
.notitie {
  max-width: 34rem;
  padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-5);
  border-radius: var(--pp-radius);
  background: var(--pp-papier);
  box-shadow: var(--pp-schaduw);
  filter: var(--tafel-afdruk-schaduw);
  display: grid;
  gap: var(--ruimte-3);
}
.notitie h3 {
  font-size: var(--kop-klein);
}
.notitie ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: var(--ruimte-2);
}
.notitie .klein {
  font-size: var(--maat-klein);
  color: var(--tekst-gedempt);
}
/* Kleine ingetekende onderdelen in de notitie: het menu, het "i", de vier staten. */
.inzet {
  display: grid;
  gap: var(--ruimte-2);
  padding: var(--ruimte-3);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  background: var(--oppervlak);
}
.inzet .label-caps {
  margin-bottom: var(--ruimte-1);
}
.menuregel {
  display: flex;
  justify-content: space-between;
  gap: var(--ruimte-3);
  min-height: 2.25rem;
  align-items: center;
  border-top: 1px solid var(--rand);
  font-size: var(--maat-basis);
  color: var(--tekst);
}
.menuregel:first-of-type {
  border-top: 0;
}
.menuregel .stand {
  color: var(--tekst-gedempt);
  font-size: var(--maat-klein);
}
.staten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ruimte-3);
  text-align: center;
  font-size: var(--maat-klein);
  color: var(--tekst-gedempt);
}
.staten .knopje {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  margin: var(--ruimte-3) auto var(--ruimte-2);
  display: grid;
  place-items: center;
  border-radius: var(--radius-pil);
  border: 1px solid var(--rand);
  background: var(--oppervlak);
  color: var(--inkt);
}
.staten .knopje.luistert {
  background: var(--inkt);
  color: var(--op-accent);
  border-color: var(--inkt);
}
.staten .knopje.denkt::before {
  border-style: dashed;
}
.staten .knopje.denkt::after {
  display: none;
}

/* ———————————————————— de laptop: 1440 × 900 ———————————————————— */

.laptop-houder {
  width: calc(1440px * var(--laptop-zoom, 0.75));
  max-width: 100%;
  margin-inline: auto;
}
.laptop {
  zoom: var(--laptop-zoom, 0.75);
  position: relative;
  width: 1440px;
  height: 900px;
  overflow: hidden;
  border-radius: var(--radius-groot);
  background: var(--hout) url("beeld/hout-walnoot.jpg") center / cover;
}
.laptop .toestel {
  position: absolute;
  left: 120px;
  top: 50%;
  zoom: 0.88;
  translate: 0 -50%;
}
.band-rij {
  position: absolute;
  left: 540px;
  top: 250px;
  display: flex;
  align-items: flex-start;
  gap: var(--ruimte-5);
}
/* Op tafel: papier volgt het thema, maar ligt op hout. Hooguit een graad scheef (--draai-max). */
.kaartje {
  width: 26rem;
  padding: var(--ruimte-4);
  border-radius: var(--pp-radius);
  background:
    linear-gradient(color-mix(in srgb, var(--inkt) 5%, transparent) 1px, transparent 1px) 0 0 / 100% 0.625rem,
    linear-gradient(90deg, color-mix(in srgb, var(--inkt) 4%, transparent) 1px, transparent 1px) 0 0 / 0.625rem 100%,
    color-mix(in srgb, var(--pp-papier) 97%, var(--inkt));
  filter: var(--tafel-afdruk-schaduw);
  rotate: -1.2deg;
  display: grid;
  gap: var(--ruimte-3);
}
.kaartje .kopje {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kaartje .zin {
  font-size: var(--kop-klein);
  line-height: 1.4;
  color: var(--inkt);
}
.kaartje .gedrukt-caps,
.band-afdruk .gedrukt-caps {
  font-size: var(--maat-klein);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tekst);
  line-height: 1.45;
}
.kaartje .bronregel-caps,
.band-afdruk .bronregel-caps {
  font-size: var(--maat-mini);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tekst-gedempt);
}
.band-afdruk {
  width: 16rem;
  padding: var(--pp-rand-galerij) var(--pp-rand-galerij) calc(var(--pp-rand-galerij) * 1.9);
  border-radius: var(--pp-radius);
  background: var(--pp-papier);
  filter: var(--tafel-afdruk-schaduw);
  display: grid;
  gap: var(--ruimte-2);
  rotate: 0.8deg;
}
.band-afdruk.ver {
  width: 13rem;
  rotate: -0.6deg;
  filter: var(--tafel-afdruk-schaduw) brightness(0.93) saturate(0.9);
}
.band-afdruk .foto-vak {
  aspect-ratio: 4 / 3.4;
  border-radius: var(--pp-radius-foto);
}
.band-afdruk.ver .foto-vak {
  aspect-ratio: 4 / 3;
}
.band-afdruk .foto-vak.band::after {
  box-shadow: inset 0 0 0 1px var(--goud-lijn);
}
.band-afdruk .hoekje {
  position: absolute;
  right: -1.5rem;
  top: -1.2rem;
  width: 5rem;
  height: 5rem;
  padding: 6px;
  border-radius: var(--pp-radius);
  background: var(--pp-papier);
  filter: var(--tafel-afdruk-schaduw);
  rotate: 2deg;
}
.band-afdruk .hoekje img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--pp-radius-foto);
}
.tijdbalk {
  position: absolute;
  left: 540px;
  right: 48px;
  bottom: 110px;
  height: 1px;
  background: var(--tijdbalk-lijn);
}
.tijdbalk::before {
  content: "";
  position: absolute;
  left: 0;
  width: 58%;
  top: -1px;
  height: 3px;
  border-radius: var(--radius-pil);
  background: var(--tijdbalk-venster);
}
.tijdbalk i {
  position: absolute;
  top: -5px;
  width: 1px;
  height: 10px;
  background: var(--tijdbalk-goud);
}

/* ———————————————————— live: het krimpende beeld (A) en het vel (B) ————————————————————
   Geen script: het beeld van A is sticky met een negatieve top (het schuift weg tot alleen de
   band overblijft), het vel van B ligt in een scrollvak met een doorzichtige ruimte erboven. */
.live .scherm {
  overflow: hidden;
}
.live-a {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}
.live-a::-webkit-scrollbar,
.live-b::-webkit-scrollbar {
  display: none;
}
.live-a .kleef {
  position: sticky;
  top: calc(var(--plaat-band) - var(--plaat-open));
  z-index: 2;
}
.live-a .kleef .foto-vak {
  height: var(--plaat-open);
}
.live-a .inhoud {
  display: grid;
  gap: var(--ruimte-4);
  padding: var(--ruimte-4) var(--ruimte-4) 10rem;
}
/* Het antwoordblok ligt vast onderin het toestel, over het scrollvak heen. */
.live .vast {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  padding-top: var(--ruimte-3);
  background: linear-gradient(to bottom, transparent, var(--bg) var(--ruimte-3));
}
/* De menustip hoort bij het toestel, niet bij het beeld dat wegschuift. */
.live .menustip {
  z-index: 6;
}
.live-b {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow-y: auto;
  scrollbar-width: none;
}
.live-b .lucht-boven {
  height: calc(var(--telefoon-h) - var(--vel-laag));
}
.live-b .vel {
  position: relative;
  height: auto;
  min-height: var(--vel-hoog);
  inset: auto;
  padding-bottom: 10rem;
}
.live-b .vel .stroom {
  justify-content: flex-start;
  mask-image: none;
  -webkit-mask-image: none;
}
.live .b .vast,
.live-b ~ .vast {
  background: linear-gradient(to bottom, transparent, var(--pp-papier) var(--ruimte-3));
}
/* De band die blijft: een kopie van het bovenste stuk van dezelfde foto, boven het scrollvak. Het
   vel schuift eerst over de straat en verdwijnt daarna onder deze band — dan staat het vel "hoog"
   en scrolt alleen nog zijn inhoud. Dezelfde maat en uitsnede als de foto eronder, dus geen naad. */
.live-b-band {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  height: calc(var(--telefoon-h) - var(--vel-hoog));
  overflow: hidden;
  pointer-events: none;
  border-bottom: 1px solid var(--glas-rand);
}
.live-b-band .foto-vak {
  height: calc(var(--telefoon-h) - var(--vel-laag) + var(--vel-radius) + var(--ruimte-2));
}
.probeer {
  font-size: var(--maat-klein);
  color: var(--dag-pp-papier);
  text-shadow: 0 1px 2px var(--hout-diep);
}

/* ———————————————————— de tabel onderaan ———————————————————— */

.tabelrol {
  overflow-x: auto;
  margin-top: var(--ruimte-4);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--oppervlak);
}
table.code {
  width: 100%;
  min-width: 52rem;
  border-collapse: collapse;
  font-size: var(--maat-basis);
}
table.code th,
table.code td {
  text-align: left;
  vertical-align: top;
  padding: var(--ruimte-3) var(--ruimte-4);
  border-bottom: 1px solid var(--rand);
}
table.code tr:last-child td {
  border-bottom: 0;
}
table.code th {
  font-size: var(--maat-mini);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tekst-gedempt);
  font-weight: 600;
}
table.code td:first-child {
  font-family: var(--font-kop);
  font-weight: 700;
  color: var(--inkt);
  white-space: nowrap;
}
table.code code {
  font-size: 0.86em;
}
table.code td.cijfer {
  white-space: nowrap;
}
.risico {
  display: inline-block;
  padding: 1px var(--ruimte-2);
  border: 1px solid var(--rand);
  border-radius: var(--radius-pil);
  font-size: var(--maat-klein);
  font-weight: 600;
  color: var(--inkt);
  white-space: nowrap;
}

.voet {
  margin-top: var(--ruimte-6);
  padding: var(--ruimte-5) 0 var(--ruimte-6);
  border-top: 1px solid var(--rand);
  font-size: var(--maat-klein);
  color: var(--tekst-gedempt);
  display: grid;
  gap: var(--ruimte-2);
}
.volgende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-3);
  margin-top: var(--ruimte-4);
}
.volgende a {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  min-height: var(--tap);
  padding: 0 var(--ruimte-4);
  border: 1px solid var(--rand);
  border-radius: var(--radius-pil);
  background: var(--oppervlak);
  text-decoration: none;
  font-weight: 600;
}

/* ———————————————————— schalen ————————————————————
   Het toestel is 390 × 844 en blijft dat; alleen de weergave schaalt (zoom), zodat niets in het
   scherm opnieuw breekt. */
.rij .toestel,
.opstelling .toestel {
  zoom: 1;
}
@media (max-width: 1479px) {
  .rij .toestel {
    zoom: 0.84;
  }
  .rij {
    gap: var(--ruimte-5);
  }
  .laptop-houder {
    --laptop-zoom: 0.66;
  }
}
@media (max-width: 1199px) {
  .rij .toestel {
    zoom: 0.7;
  }
  .opstelling .toestel {
    zoom: 0.84;
  }
  .laptop-houder {
    --laptop-zoom: 0.58;
  }
}
@media (max-width: 959px) {
  /* De rij wordt een band om door te vegen; de pagina zelf schuift nooit opzij. */
  .rij {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--ruimte-4);
    padding: var(--ruimte-4);
  }
  .rij > .plek {
    scroll-snap-align: center;
  }
  .rij .toestel {
    zoom: 0.72;
  }
  .rij-regels {
    grid-template-columns: 1fr;
  }
  .opstelling {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: var(--ruimte-4);
    gap: var(--ruimte-4);
  }
  .laptop-houder {
    --laptop-zoom: 0.46;
  }
}
@media (max-width: 719px) {
  .laptop-houder {
    --laptop-zoom: 0.235;
  }
  .opstelling .toestel {
    zoom: 0.78;
  }
  .kop {
    padding-top: var(--ruimte-5);
  }
}
@media (max-width: 420px) {
  .rij .toestel {
    zoom: 0.7;
  }
  .opstelling .toestel {
    zoom: 0.74;
  }
  .laptop-houder {
    --laptop-zoom: 0.23;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}