/* ============================================================
   EEN DAG IN HET LEVEN — /een-dag-in-het-leven
   Prefix: dg-

   Vier medewerkersrollen (event manager, chef, directeur,
   floormanager) als één dag die je doorscrollt, plus het
   volledige traject van de gast, plus een vergelijkweergave
   waarin beide tijdlijnen naast elkaar staan.

   Twee dragende ideeën:
   1. DE LUCHT VERSCHUIFT. Elk rolpaneel heeft zijn eigen
      verloop van dageraad naar nacht, afgestemd op de úren van
      díe rol (de floormanager begint om 14:00 en eindigt in het
      donker; de directeur is om 18:30 thuis). Puur CSS — geen
      JS, dus ook zonder scripts klopt het beeld.
   2. ALLE TEKST STAAT OP EEN VAST PLAATJE. Kaarten zijn wit,
      adempauzes zachtwit, tijdlabels een witte pil. Zo blijft
      élke letter op élk moment van de dag ≥ 4,5:1, ook als de
      band achter de kaarten inktzwart wordt. De lucht is
      decor, nooit ondergrond van leestekst.

   Tokens, knoppen, chips, badges en de reveal-motie komen uit
   het designsysteem. Hier staat alleen wat aan deze pagina
   uniek is.
   ============================================================ */

:root {
  --dg-tijd-w: 5rem;
  --dg-spoor-w: 3rem;
  /* De spoorlijn moet zowel op ochtendgrijs (#E6E6E6) als op nacht
     (#17171D) leesbaar blijven: één middengrijs doet beide. */
  --dg-lijn: rgba(127, 127, 140, 0.55);
}

/* =========================================================
   1. HERO — de vijf hoofdrolspelers op inkt
   ========================================================= */
/* Donkere vlakken zetten de focusring om naar krijt (base.css §focus):
   zonder dit tekent de browser een inktzwarte ring op inktzwart. */
.dg-hero, .dg-balk-inner, .dg-vgl { --focus-ring: var(--c-on-dark); }

.dg-hero {
  position: relative;
  background: var(--c-dark);
  color: var(--c-on-dark);
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(3.5rem, 8vw, 6rem) 0;
}
/* Zachte avondzon-gloed achter de cast, laag genoeg om de tekst
   niet te raken. */
.dg-hero::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -18%;
  width: min(120rem, 165%); aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 153, 102, 0.30) 0%, rgba(255, 153, 102, 0.10) 42%, rgba(255, 153, 102, 0) 70%);
  z-index: 0; pointer-events: none;
}
.dg-hero > .container { position: relative; z-index: 1; }
.dg-hero-tekst { max-width: 46rem; }
.dg-hero .eyebrow { color: var(--c-orange); }
.dg-hero h1 { font-size: var(--fs-display); line-height: 1.04; color: #fff; text-wrap: balance; margin-bottom: var(--sp-5); }
.dg-hero .lead { color: var(--c-on-dark); max-width: 40rem; }
/* De eyebrow draagt hier een hele zin in plaats van één woord. Getrackte
   hoofdletters lopen op smalle schermen over drie regels; zonder eigen
   regelafstand plakken die tegen elkaar. */
.dg-hero .eyebrow { line-height: 1.6; max-width: 42rem; }
.dg-hero-acties { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-7); }

/* De cast: vijf figuren op één grondlijn, oplopend van klein naar
   groot en weer terug, zodat er een groepsfoto-ritme in zit. */
.dg-cast {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(0.25rem, 2vw, 2.5rem);
  position: relative;
}
/* De grondlijn die de figuren in de gegenereerde tekening niet meer
   hebben: één dunne ellips per figuur, hier in CSS zodat hij op elke
   maat scherp blijft. */
.dg-cast::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0.5rem;
  height: 1px; background: rgba(244, 244, 245, 0.22);
}
/* Elke figuur is een link naar zijn eigen dag: aanwijzen licht hem op en
   zet de anderen een stap terug, zodat je ziet dat je erop kunt klikken. */
.dg-cast-fig {
  position: relative; flex: 0 1 auto; min-width: 0;
  display: block; text-decoration: none; color: inherit;
  padding-bottom: 2.6rem; border-radius: var(--r-media);
  transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}
.dg-cast-fig img {
  display: block; width: auto; height: clamp(9rem, 21vw, 20rem);
  max-width: 100%; object-fit: contain; object-position: bottom center;
  transition: filter var(--t-med) var(--ease);
}
.dg-cast:hover .dg-cast-fig { opacity: 0.45; }
.dg-cast .dg-cast-fig:hover,
.dg-cast .dg-cast-fig:focus-visible { opacity: 1; transform: translateY(-10px); }
.dg-cast-fig:hover img,
.dg-cast-fig:focus-visible img { filter: drop-shadow(0 0 26px rgba(255, 153, 102, 0.55)); }
.dg-cast-fig::after {
  content: ""; position: absolute; left: 50%; bottom: 2.75rem;
  width: 78%; aspect-ratio: 5 / 1; transform: translateX(-50%);
  border: 1px solid rgba(244, 244, 245, 0.28); border-radius: 50%;
  transition: border-color var(--t-med) var(--ease);
}
.dg-cast-fig:hover::after,
.dg-cast-fig:focus-visible::after { border-color: var(--c-orange); }
.dg-cast-fig .dg-cast-naam {
  position: absolute; left: 50%; bottom: 0.5rem; transform: translateX(-50%);
  font-size: var(--fs-eyebrow); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-on-dark); white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.dg-cast-fig:hover .dg-cast-naam,
.dg-cast-fig:focus-visible .dg-cast-naam { color: var(--c-orange); }
.dg-cast { padding-bottom: 1.5rem; }
@media (max-width: 760px) {
  /* Vijf namen naast elkaar passen hier niet: ze plakten aan elkaar
     ("DIRECTEURFLOORMANAGER"). De cast is op deze maat een groepsportret;
     de namen staan even verderop in de rolkiezer. */
  .dg-cast { gap: 0.1rem; padding-bottom: 0; }
  .dg-cast-fig { padding-bottom: 0.75rem; }
  .dg-cast-fig::after { bottom: 0.9rem; }
  .dg-cast-fig .dg-cast-naam { display: none; }
}

/* =========================================================
   2. DE STICKY DAGBALK — rolkiezer + dagboog + klok
   ========================================================= */
.dg-dag { position: relative; scroll-margin-top: 5rem; }
/* GEEN position:sticky. Een script van derden (de consent-laag) zet
   `overflow:hidden` op <body>, en daarmee is body de scroll-container van
   elke sticky eronder — die plakt dan nooit. Vandaar een vaste balk die
   met een IntersectionObserver alleen verschijnt zolang je ín de dag zit.
   Zonder JS is hij helemaal weg (zie html.no-js hieronder) en staan de
   vier dagen gewoon onder elkaar. */
.dg-balk {
  position: fixed; top: var(--em-nav-h, 4.5rem); left: 0; right: 0;
  z-index: var(--z-sticky);
  padding-block: var(--sp-3);
  pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility var(--t-med);
}
.dg-dag.is-actief .dg-balk { opacity: 1; visibility: visible; transform: none; }
.dg-balk-inner {
  pointer-events: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: var(--sp-5);
  background: var(--c-dark); color: var(--c-on-dark);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-pop);
  padding: 0.4rem 1rem 0.4rem 0.4rem;
}
.dg-rollen { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; }
.dg-rollen::-webkit-scrollbar { display: none; }
.dg-rol {
  display: inline-flex; align-items: center; gap: 0.5rem;
  flex: 0 0 auto; cursor: pointer;
  font: inherit; font-size: var(--fs-small); font-weight: 500;
  color: var(--c-on-dark); background: rgba(244, 244, 245, 0.10);
  border: 1px solid rgba(244, 244, 245, 0.16); border-radius: var(--r-pill);
  padding: 0.3rem 0.9rem 0.3rem 0.3rem;
  min-height: 44px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dg-rol:hover { background: rgba(244, 244, 245, 0.20); }
.dg-rol[aria-selected="true"] { background: var(--c-on-dark); color: var(--c-ink); border-color: transparent; }
.dg-rol-kop {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(244, 244, 245, 0.16); overflow: hidden;
  display: block;
}
.dg-rol[aria-selected="true"] .dg-rol-kop { background: var(--c-bg-shade); }
/* Een schijfje van de héle figuur is een zwarte vlek; hier staat daarom een
   aparte hoofd-uitsnede (kop-<rol>.png), al vierkant aangeleverd. */
.dg-rol-kop img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* De boog van de dag, met de zon die met je mee zakt. */
.dg-boog { display: flex; align-items: center; gap: var(--sp-4); flex: 0 0 auto; }
.dg-boog svg { width: 170px; height: 40px; overflow: visible; display: block; }
.dg-boog-baan { fill: none; stroke: rgba(244, 244, 245, 0.28); stroke-width: 1.5; stroke-linecap: round; }
.dg-boog-gelopen { fill: none; stroke: var(--c-orange); stroke-width: 2; stroke-linecap: round; }
.dg-zon { fill: var(--c-orange); }
.dg-zon-halo { fill: rgba(255, 153, 102, 0.28); }
.dg-boog-uur { font-size: 0.6875rem; color: var(--c-on-dark); opacity: 0.72; font-variant-numeric: tabular-nums; }
/* Klokstanden staan in Space Grotesk, niet in Cormorant: die zet mediëvale
   cijfers en heeft geen lining-variant, waardoor een 1 als kleine-kapitaal-I
   leest — "10:29" werd "IO:29". De serif blijft voor koppen en de grote
   displaycijfers; een tijdstip is meta, geen displaycijfer. */
.dg-klok {
  font-family: var(--font-body); font-weight: 600; font-size: 1.375rem; line-height: 1;
  font-variant-numeric: tabular-nums; color: #fff; min-width: 5.2ch; text-align: right;
}
/* De balk blijft op élke maat één rij; wat niet past valt weg, in volgorde
   van minst naar meest informatief. Eerst de boog met zijn uurlabels
   (sfeer), dan pas de rolnamen (functie) — de klok blijft altijd staan.
   De knoppen houden hun aria-label, dus de naam gaat nooit écht verloren. */
@media (max-width: 1160px) {
  .dg-boog svg, .dg-boog-uur { display: none; }
  .dg-boog { gap: 0; }
}
@media (max-width: 700px) {
  .dg-rol span:not(.dg-rol-kop) { display: none; }
  .dg-rol { padding: 0.3rem; }
  .dg-balk-inner { padding: 0.4rem 0.9rem 0.4rem 0.4rem; }
  .dg-klok { font-size: 1.25rem; min-width: 4.8ch; }
}

/* =========================================================
   3. HET ROLPANEEL — de lucht van die rol
   ========================================================= */
.dg-panel { position: relative; padding-bottom: var(--section-y); }
.dg-panel[hidden] { display: none; }
/* De no-JS-terugval staat in een <noscript>-blok in de pagina zelf: de
   `no-js`-klasse van de andere pagina's wordt door een inline script gezet
   en ontbreekt dus juist wanneer JS uitstaat. */

/* De luchten. Elk verloop loopt van het eerste tot het laatste uur van
   díe rol — daarom heeft elke rol zijn eigen stops. */
.dg-panel::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
/* 06:47 -> 21:40 · dageraad, dag, avondzon, schemer */
.dg-panel[data-rol="event-manager"]::before {
  background: linear-gradient(180deg, #D7DAE2 0%, #E4E4E6 14%, #EFEFEF 38%, #F6EADF 60%, #F5D6B8 76%, #C79A8C 90%, #4A3F4C 100%);
}
/* 06:30 -> 22:15 · van dageraad helemaal tot nacht */
.dg-panel[data-rol="chef"]::before {
  background: linear-gradient(180deg, #D3D7E1 0%, #E4E4E6 14%, #EFEFEF 38%, #F6EADF 62%, #F2CBA6 78%, #9C7F80 91%, #17171D 100%);
}
/* 07:30 -> 18:30 · ochtend tot schemer */
.dg-panel[data-rol="directeur"]::before {
  background: linear-gradient(180deg, #DFE1E7 0%, #EFEFEF 34%, #F4EBE2 66%, #F3D5B8 88%, #D9AC91 100%);
}
/* 14:00 -> 23:15 · middag, avondzon, nacht */
.dg-panel[data-rol="floormanager"]::before {
  background: linear-gradient(180deg, #EFEFEF 0%, #F6E9DC 22%, #F4C79E 46%, #C99B8A 66%, #6B5A66 82%, #17171D 100%);
}
.dg-panel > * { position: relative; z-index: 1; }

/* ---- De kop van het paneel: personage + wie het is ---- */
.dg-kop {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end;
  padding-top: var(--sp-8); padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.dg-kop-fig { position: relative; align-self: end; }
.dg-kop-fig img { display: block; height: clamp(11rem, 24vw, 19rem); width: auto; }
.dg-kop-fig::after {
  content: ""; position: absolute; left: 50%; bottom: -0.4rem;
  width: 84%; aspect-ratio: 5 / 1; transform: translateX(-50%);
  border: 1px solid rgba(23, 23, 29, 0.20); border-radius: 50%;
}
.dg-kop-tekst { padding-bottom: var(--sp-4); }
.dg-kop-tekst h2 { margin-bottom: var(--sp-3); }
.dg-kop-tekst .lead { max-width: 34rem; }
.dg-kop-feit {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5);
}
.dg-kop-feit span {
  font-size: var(--fs-small); background: var(--c-surface); color: var(--c-ink);
  border-radius: var(--r-pill); padding: 0.35rem 0.8rem; box-shadow: var(--shadow-tile);
}
@media (max-width: 760px) {
  .dg-kop { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .dg-kop-fig { justify-self: start; }
  .dg-kop-fig img { height: 12rem; }
}

/* =========================================================
   4. DE TIJDLIJN
   ========================================================= */
/* De tijdlijn is smaller dan de container: over de volle 1200px wordt een
   kaart een leeg wit vlak met tekst in de linkerhelft, én er blijft geen
   lucht over om de dag in te zien verschuiven. 62rem laat aan weerszijden
   een strook hemel staan. */
.dg-momenten { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 62rem; display: grid; gap: clamp(1.25rem, 2.6vw, 2rem); }
.dg-momenten::before {
  content: ""; position: absolute; top: 1.6rem; bottom: 1.6rem;
  left: calc(var(--dg-tijd-w) + var(--dg-spoor-w) / 2 - 1px); width: 2px;
  background: var(--dg-lijn); z-index: 0;
}
.dg-moment {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: var(--dg-tijd-w) var(--dg-spoor-w) minmax(0, 1fr);
  align-items: start;
}
.dg-punt {
  grid-area: 1 / 2 / 2 / 3; justify-self: center; margin-top: 1.15rem;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--c-surface); border: 2px solid var(--dg-lijn);
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.dg-moment.is-nu .dg-punt { background: var(--c-orange); border-color: var(--c-ink); transform: scale(1.35); }
.dg-tijd {
  grid-area: 1 / 1 / 2 / 2; justify-self: end; margin: 0.85rem 0 0;
  font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; line-height: 1.2;
  font-variant-numeric: tabular-nums; color: var(--c-ink);
  background: rgba(255, 255, 255, 0.92); border-radius: var(--r-pill);
  padding: 0.15rem 0.6rem; white-space: nowrap;
}
/* Het gasttraject rekent niet in klokuren maar in dagen en maanden; die
   labels zijn langer, dus krijgt de kolom meer ruimte en mag het label
   over twee regels. */
.dg-spoor--traject { --dg-tijd-w: 7.5rem; }
.dg-spoor--traject .dg-tijd {
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small);
  line-height: 1.35; white-space: normal; text-align: right; border-radius: var(--r-tile);
  padding: 0.3rem 0.65rem;
}

.dg-kaart {
  grid-area: 1 / 3 / 3 / 4;
  background: var(--c-surface); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.dg-kaart h3 { font-size: var(--fs-kaartkop); margin: 0 0 var(--sp-3); text-wrap: balance; }
/* Ook de tekstkolom van de grote kaarten (die heeft geen eigen klasse). */
.dg-kaart > p,
.dg-kaart-in > div > p { margin: 0; max-width: 62ch; }

/* Het moment waar je nú leest, licht op: dezelfde witte kaart, maar hij
   komt een stap naar voren en krijgt een warme rand mee. Geen andere
   achtergrondkleur — dan zou de leesbaarheid per moment verschillen. */
.dg-moment.is-nu .dg-kaart {
  transform: translateY(-3px);
  box-shadow: var(--shadow-pop), 0 0 0 1px rgba(255, 153, 102, 0.55), 0 0 44px -6px rgba(255, 153, 102, 0.42);
}

/* ---- Kaart met een echt productscherm ernaast ---- */
.dg-kaart--beeld .dg-kaart-in {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.6vw, 2rem); align-items: center;
}
@media (max-width: 880px) {
  .dg-kaart--beeld .dg-kaart-in { grid-template-columns: minmax(0, 1fr); }
  /* Eén kolom: dan hoort het beeld bovenaan. Anders staat de doorverwijs-
     knop (die aan het eind van de tekstkolom hangt) ineens vóór het beeld. */
  .dg-kaart--beeld .dg-kaart-in > .dg-schot,
  .dg-kaart--beeld .dg-kaart-in > .dg-vrij { order: -1; }
}

/* Het schermbeeld in een kadertje met een browserrand: zo leest het als
   "dit is het echte product", niet als een losse plaat. */
.dg-schot {
  position: relative; border-radius: var(--r-tile); overflow: hidden;
  background: var(--c-surface-soft); box-shadow: var(--shadow-tile);
  border: 1px solid var(--c-line);
}
.dg-schot img { display: block; width: 100%; height: auto; }
.dg-schot--vol img { aspect-ratio: 1420 / 764; object-fit: cover; object-position: top center; }
/* Beelden die zelf al een omgeving hebben (telefoon in een hand, widget op
   een site) krijgen géén kader — dat zou een kader om een kader zijn. */
.dg-vrij { display: block; }
.dg-vrij img { display: block; width: 100%; height: auto; border-radius: var(--r-tile); }

/* ---- Kleine doorverwijzing naar de functiepagina ---- */
.dg-naar {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: var(--sp-4);
  font-size: var(--fs-small); font-weight: 500; text-decoration: none;
  color: var(--c-ink); background: var(--c-surface-soft);
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  /* 44px raakvlak zonder een dikke knop te worden: de padding doet het werk. */
  padding: 0.65rem 1rem;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.dg-naar:hover { background: var(--c-orange-wash); border-color: var(--c-orange-tint); }
.dg-naar svg { width: 14px; height: 14px; flex: 0 0 auto; transition: transform var(--t-fast) var(--ease); }
.dg-naar:hover svg { transform: translateX(3px); }
/* Staat de knop onder een Constell-strook, dan hoort hij bij de kaart en
   niet bij die strook — vandaar een streep lucht ertussen. */
.dg-doet + .dg-naar { margin-top: var(--sp-5); }

/* ---- Sfeerfoto tussen de momenten door ---- */
.dg-foto {
  grid-column: 1 / -1; margin-block: clamp(0.5rem, 1.5vw, 1.25rem);
  border-radius: var(--r-media); overflow: hidden;
  /* Boven de spoorlijn, anders loopt die dwars door de foto. */
  position: relative; z-index: 1;
  box-shadow: var(--shadow-card);
}
.dg-foto img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 20 / 7; }
/* De scrim heeft stops in PIXELS, niet in procenten (BOUWGIDS §5.8): het
   bijschrift begint op een vaste afstand van de onderrand, ongeacht hoe hoog
   de foto op dit scherm is. Deze foto's zijn stuk voor stuk licht — een
   zonovergoten kasteel, een zaal met hoge ramen — dus moet de scrim onderin
   diep zijn. Boven 200px is de foto volledig onaangeraakt. */
.dg-foto-bij {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: 5rem clamp(1.25rem, 3vw, 2rem) clamp(1rem, 2vw, 1.5rem);
  color: #fff; font-size: var(--fs-lead); text-wrap: balance;
  max-width: 46rem;
  background: linear-gradient(0deg,
    rgba(9, 9, 14, 0.92) 0,
    rgba(9, 9, 14, 0.88) 60px,
    rgba(9, 9, 14, 0.74) 110px,
    rgba(9, 9, 14, 0.34) 160px,
    rgba(9, 9, 14, 0) 200px);
}
.dg-foto-bij b { display: block; font-family: var(--font-display); font-size: var(--fs-kaartkop); font-weight: 700; margin-bottom: 0.15rem; }
@media (max-width: 780px) {
  .dg-foto { grid-column: 1 / -1; }
  .dg-foto img { aspect-ratio: 3 / 2; }
  /* Op deze breedte wikkelt het bijschrift naar vier regels terwijl de foto
     juist korter is — dan reikt de bovenste regel tot ver boven de donkere
     zone. Gemeten: met de desktop-stops kwam "Zes uur…" op 2,2:1 uit. Deze
     stops houden de tekst overal ≥ 4,5:1 en laten de foto vanaf 200px alsnog
     onaangeraakt. */
  .dg-foto-bij {
    padding-top: 3rem;
    background: linear-gradient(0deg,
      rgba(9, 9, 14, 0.95) 0,
      rgba(9, 9, 14, 0.93) 120px,
      rgba(9, 9, 14, 0.86) 160px,
      rgba(9, 9, 14, 0.42) 196px,
      rgba(9, 9, 14, 0) 230px);
  }
}

/* Feature-chip: lavendel = een onderdeel van het EMS, avondzon = de
   agent die zelf handelt. Kleur is betekenis, niet decoratie. */
.dg-label {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--fs-small); font-weight: 500; line-height: 1;
  background: var(--c-lavender); color: var(--c-ink);
  border-radius: var(--r-pill); padding: 0.35rem 0.75rem; margin-bottom: var(--sp-4);
}
.dg-label--agent { background: var(--c-orange-tint); }
.dg-label svg { flex: 0 0 auto; }

/* De Constell-strook onderaan de kaart: wat het systeem intussen doet. */
.dg-doet {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem;
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
}
/* De Constell-ster is een hoge ruit (viewBox 50×84), dus smal en hoog —
   niet vierkant, anders letterboxt hij in zijn eigen doos. */
.dg-doet-ster { width: 14px; height: 23px; color: var(--c-ink); margin-top: 0.1rem; flex: 0 0 auto; }
.dg-label svg { width: 9px; height: 15px; }
.dg-doet b { display: block; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: 500; color: var(--c-ink-soft); margin-bottom: 0.35rem; }
.dg-doet p { margin: 0; font-size: var(--fs-small); color: var(--c-ink-soft); max-width: 62ch; }

/* Adempauze: een moment waar geen software aan te pas komt. Zachtwit
   in plaats van wit, geen schaduw — het valt letterlijk stiller. */
.dg-moment--adem .dg-kaart {
  background: var(--c-surface-soft); box-shadow: none;
  padding: var(--sp-4) clamp(1.25rem, 2.4vw, 1.75rem);
}
.dg-moment--adem .dg-kaart p { font-size: var(--fs-lead); color: var(--c-ink-soft); font-style: italic; }
.dg-moment--adem .dg-punt { width: 9px; height: 9px; margin-top: 1.35rem; background: var(--dg-lijn); }

/* Het hoogtepunt van de dag: kaart met een gebouwd mini-scherm ernaast. */
.dg-kaart--groot { padding: clamp(1.5rem, 3vw, 2.25rem); }
.dg-kaart--groot .dg-kaart-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
@media (max-width: 880px) { .dg-kaart--groot .dg-kaart-in { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 780px) {
  .dg-momenten::before { left: 0.75rem; }
  .dg-moment { grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: var(--sp-3); }
  .dg-punt { grid-area: 1 / 1 / 2 / 2; margin-top: 0.3rem; }
  .dg-tijd { grid-area: 1 / 2 / 2 / 3; justify-self: start; margin: 0 0 var(--sp-3); text-align: left; }
  .dg-kaart { grid-area: 2 / 2 / 3 / 3; }
  .dg-moment--adem .dg-punt { margin-top: 0.45rem; }
}

/* =========================================================
   4b. HET HEMELLICHAAM — de zon komt op, klimt, zakt, en dan
   de maan. Staat in de rechtermarge náást de tijdlijn (die is
   62rem in een container van 75rem, dus daar is ruimte over)
   en verschuift met het uur waar je leest. Onder 1200px is die
   marge er niet meer en verdwijnt hij: de dagboog in de balk
   vertelt hetzelfde verhaal.
   ========================================================= */
.dg-hemel {
  position: fixed; z-index: 1; pointer-events: none;
  top: 46%; right: max(1.25rem, calc((100vw - 66rem) / 4));
  width: 8.5rem; height: 8.5rem; transform: translate(50%, -50%);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-med) var(--ease), visibility var(--t-med);
}
.dg-dag.is-actief .dg-hemel { opacity: 1; visibility: visible; }
@media (max-width: 1199px) { .dg-hemel { display: none; } }
.dg-hemel svg { width: 100%; height: 100%; overflow: visible; display: block; }

.hm-horizon { stroke: rgba(23, 23, 29, 0.22); stroke-width: 1.5; stroke-linecap: round; transition: stroke 900ms var(--ease); }
.hm-zon, .hm-maan, .hm-sterren { transition: transform 900ms var(--ease), opacity 900ms var(--ease); }
.hm-schijf { transition: fill 900ms var(--ease), r 900ms var(--ease); }
.hm-stralen { transition: opacity 900ms var(--ease), transform 900ms var(--ease); transform-origin: 80px 80px; }
.hm-stralen line { stroke-width: 3; stroke-linecap: round; transition: stroke 900ms var(--ease); }
.hm-maan, .hm-sterren { opacity: 0; }
.hm-maan path { fill: #EDEDF2; }
.hm-sterren circle { fill: #F4F4F5; }

/* dageraad — half boven de kim, bleek en zonder stralen */
.dg-hemel[data-hemel="dageraad"] .hm-zon { transform: translateY(30px); }
.dg-hemel[data-hemel="dageraad"] .hm-schijf { fill: #F6C9A6; }
.dg-hemel[data-hemel="dageraad"] .hm-stralen { opacity: 0.25; transform: scale(0.78); }
.dg-hemel[data-hemel="dageraad"] .hm-stralen line { stroke: #F6C9A6; }
/* ochtend — klimt, stralen komen op */
.dg-hemel[data-hemel="ochtend"] .hm-zon { transform: translateY(8px); }
.dg-hemel[data-hemel="ochtend"] .hm-schijf { fill: #FBC17F; }
.dg-hemel[data-hemel="ochtend"] .hm-stralen { opacity: 0.7; transform: scale(0.9); }
.dg-hemel[data-hemel="ochtend"] .hm-stralen line { stroke: #FBC17F; }
/* middag — hoogste punt, volle stralenkrans */
.dg-hemel[data-hemel="middag"] .hm-zon { transform: translateY(-14px); }
.dg-hemel[data-hemel="middag"] .hm-schijf { fill: #FFB05C; }
.dg-hemel[data-hemel="middag"] .hm-stralen { opacity: 1; transform: scale(1.06); }
.dg-hemel[data-hemel="middag"] .hm-stralen line { stroke: #FFB05C; }
/* avondzon — zakt en wordt dieper oranje */
.dg-hemel[data-hemel="avondzon"] .hm-zon { transform: translateY(16px); }
.dg-hemel[data-hemel="avondzon"] .hm-schijf { fill: var(--c-orange); }
.dg-hemel[data-hemel="avondzon"] .hm-stralen { opacity: 0.78; transform: scale(0.94); }
.dg-hemel[data-hemel="avondzon"] .hm-stralen line { stroke: var(--c-orange); }
/* schemer — bijna weg, stralen doven */
.dg-hemel[data-hemel="schemer"] .hm-zon { transform: translateY(38px); }
.dg-hemel[data-hemel="schemer"] .hm-schijf { fill: #E2703A; }
.dg-hemel[data-hemel="schemer"] .hm-stralen { opacity: 0.28; transform: scale(0.8); }
.dg-hemel[data-hemel="schemer"] .hm-stralen line { stroke: #E2703A; }
.dg-hemel[data-hemel="schemer"] .hm-horizon { stroke: rgba(244, 244, 245, 0.34); }
/* nacht — zon onder, maan en sterren op */
.dg-hemel[data-hemel="nacht"] .hm-zon { transform: translateY(72px); opacity: 0; }
.dg-hemel[data-hemel="nacht"] .hm-maan { opacity: 1; transform: translateY(-8px); }
.dg-hemel[data-hemel="nacht"] .hm-sterren { opacity: 1; }
.dg-hemel[data-hemel="nacht"] .hm-horizon { stroke: rgba(244, 244, 245, 0.28); }

/* =========================================================
   5. MINI-SCHERMEN — gebouwd, niet gescreenshot
   ========================================================= */
.dg-mini {
  background: var(--c-ink); border-radius: var(--r-tile); padding: var(--sp-4);
  color: var(--c-on-dark); font-size: var(--fs-small);
  box-shadow: var(--shadow-tile);
}
.dg-mini-kop {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(244, 244, 245, 0.80); margin-bottom: var(--sp-3);
}
.dg-mini-rij {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: 0.65rem; align-items: center;
  padding: 0.5rem 0.6rem; border-radius: 6px;
  background: rgba(244, 244, 245, 0.07);
}
.dg-mini-rij + .dg-mini-rij { margin-top: 0.4rem; }
.dg-mini-rij b { font-weight: 600; font-variant-numeric: tabular-nums; }
.dg-mini-rij em { font-style: normal; color: rgba(244, 244, 245, 0.80); font-size: 0.75rem; white-space: nowrap; }
/* De regels komen één voor één binnen zodra het blok in beeld staat.
   Eindstand staat in de HTML; .dg-mini.in speelt hem opnieuw af. */
.reveal-armed .dg-mini.dg-mini--speel .dg-mini-rij { opacity: 0; transform: translateY(8px); }
.reveal-armed .dg-mini.dg-mini--speel.in .dg-mini-rij { opacity: 1; transform: none; transition: opacity 460ms var(--ease), transform 460ms var(--ease); }
.reveal-armed .dg-mini.dg-mini--speel.in .dg-mini-rij:nth-child(2) { transition-delay: 160ms; }
.reveal-armed .dg-mini.dg-mini--speel.in .dg-mini-rij:nth-child(3) { transition-delay: 320ms; }
.reveal-armed .dg-mini.dg-mini--speel.in .dg-mini-rij:nth-child(4) { transition-delay: 480ms; }
.reveal-armed .dg-mini.dg-mini--speel.in .dg-mini-rij:nth-child(5) { transition-delay: 640ms; }

/* Statusreeks: aanvraag -> in optie -> geboekt */
.dg-status { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: var(--sp-3); }
/* De statuschip gaat van "nog niet" naar "gehaald". BEIDE standen zijn
   donkere tekst op een licht vlak — alleen de vulling verandert van gedempt
   krijt naar avondzon. Dat is geen smaak: eerst was de ruststand krijttekst
   op een donker vlak, en dan kruist de overgang onvermijdelijk door een punt
   waar voor- en achtergrond even licht zijn (gemeten 1,4:1 halverwege). Met
   twee lichte vullingen blijft élk tussenbeeld leesbaar. */
.dg-status i {
  font-style: normal; font-size: 0.75rem; font-weight: 500; border-radius: var(--r-pill);
  padding: 0.3rem 0.7rem; background: rgba(244, 244, 245, 0.55); color: var(--c-ink);
  transition: background 400ms var(--ease);
}
.dg-status svg { width: 13px; height: 13px; color: rgba(244, 244, 245, 0.55); flex: 0 0 auto; }
.reveal-armed .dg-mini.in .dg-status i { background: var(--c-orange); }
.reveal-armed .dg-mini.in .dg-status i:nth-of-type(2) { transition-delay: 500ms; }
.reveal-armed .dg-mini.in .dg-status i:nth-of-type(3) { transition-delay: 1000ms; }

/* Staafgrafiek voor de directeur */
.dg-staven { display: flex; align-items: flex-end; gap: 0.5rem; height: 7rem; margin-top: var(--sp-3); }
.dg-staaf { flex: 1; background: rgba(244, 244, 245, 0.18); border-radius: 4px 4px 0 0; position: relative; display: flex; align-items: flex-end; }
.dg-staaf span { display: block; width: 100%; background: var(--c-lavender); border-radius: 4px 4px 0 0; height: var(--h); transform-origin: bottom; }
.dg-staaf:last-child span { background: var(--c-orange); }
.reveal-armed .dg-mini--staven .dg-staaf span { transform: scaleY(0); }
.reveal-armed .dg-mini--staven.in .dg-staaf span { transform: scaleY(1); transition: transform 760ms var(--ease); }
.reveal-armed .dg-mini--staven.in .dg-staaf:nth-child(2) span { transition-delay: 110ms; }
.reveal-armed .dg-mini--staven.in .dg-staaf:nth-child(3) span { transition-delay: 220ms; }
.reveal-armed .dg-mini--staven.in .dg-staaf:nth-child(4) span { transition-delay: 330ms; }
.reveal-armed .dg-mini--staven.in .dg-staaf:nth-child(5) span { transition-delay: 440ms; }
.dg-staven-voet { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.dg-staven-voet span { flex: 1; text-align: center; font-size: 0.6875rem; color: rgba(244, 244, 245, 0.80); }

/* De vier-minuten-klok van de gast */
.dg-teller { text-align: center; padding-block: var(--sp-4); }
.dg-teller b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 8vw, 4.5rem); line-height: 1; color: var(--c-orange); font-variant-numeric: tabular-nums; }
.dg-teller span { display: block; font-size: var(--fs-small); color: rgba(244, 244, 245, 0.72); margin-top: var(--sp-2); }

/* =========================================================
   6. HET GASTTRAJECT (zachtwit)
   ========================================================= */
.dg-gast .dg-momenten::before { background: var(--c-orange-tint); }
.dg-gast .dg-punt { border-color: var(--c-orange-tint); }
.dg-gast .dg-tijd { background: var(--c-surface); }
.dg-gast-kop { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.dg-gast-kop img { display: block; height: clamp(11rem, 22vw, 18rem); width: auto; }
.dg-gast-kop .lead { max-width: 42rem; }

/* ---- Particulier of zakelijk: twee figuren om uit te kiezen ----
   Dezelfde taal als de cast in de hero: de gekozen kant staat vol in beeld,
   de andere zakt terug. Zo is het meteen duidelijk dat je hier iets kiest,
   zonder dat er een tabbalk boven de sectie hoeft. */
.dg-trajecten { display: flex; align-items: flex-end; gap: clamp(0.5rem, 2vw, 1.5rem); }
.dg-traject {
  position: relative; display: block; cursor: pointer;
  background: none; border: 0; padding: 0 0 2.4rem; font: inherit; color: inherit;
  border-radius: var(--r-media);
  transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}
.dg-traject img { display: block; height: clamp(9rem, 20vw, 16rem); width: auto; transition: filter var(--t-med) var(--ease); }
.dg-traject > span {
  position: absolute; left: 50%; bottom: 0.6rem; transform: translateX(-50%);
  font-size: var(--fs-eyebrow); letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; color: var(--c-ink-soft);
  transition: color var(--t-fast) var(--ease);
}
/* De grondellips die de figuren zelf niet meer hebben. */
.dg-traject::after {
  content: ""; position: absolute; left: 50%; bottom: 2.55rem;
  width: 80%; aspect-ratio: 5 / 1; transform: translateX(-50%);
  border: 1px solid var(--c-line-strong); border-radius: 50%;
  transition: border-color var(--t-med) var(--ease);
}
.dg-traject[aria-selected="false"] { opacity: 0.42; }
.dg-traject:hover, .dg-traject:focus-visible { opacity: 1; transform: translateY(-6px); }
.dg-traject[aria-selected="true"] > span { color: var(--c-orange-deep); font-weight: 500; }
.dg-traject[aria-selected="true"]::after { border-color: var(--c-orange); }
.dg-traject[aria-selected="true"] img { filter: drop-shadow(0 14px 26px rgba(23, 23, 29, 0.18)); }

/* ---- De schuif tussen de twee trajecten ----
   De uitgaande tijdlijn schuift naar links weg, de nieuwe komt van rechts
   binnen. Geen carrousel met twee panelen naast elkaar: die zouden even hoog
   moeten zijn, en deze twee trajecten verschillen tientallen procenten in
   lengte. Eén paneel tegelijk, met een in- en uitloop. */
.dg-traject-paneel[hidden] { display: none; }
.dg-traject-paneel { animation: dg-traject-in 460ms var(--ease) both; }
.dg-traject-paneel.is-weg { animation: dg-traject-uit 260ms var(--ease) both; }
@keyframes dg-traject-in { from { opacity: 0; transform: translateX(56px); } to { opacity: 1; transform: none; } }
@keyframes dg-traject-uit { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-56px); } }
/* Bij de allereerste weergave mag er niets schuiven: dan is er niets gekozen,
   dan is de pagina gewoon aan het laden. */
.dg-gast:not(.is-gewisseld) .dg-traject-paneel { animation: none; }
.dg-traject-intro[hidden] { display: none; }

@media (max-width: 760px) {
  .dg-gast-kop { grid-template-columns: minmax(0, 1fr); }
  .dg-gast-kop img { height: 12rem; }
  .dg-traject img { height: 10rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dg-traject-paneel, .dg-traject-paneel.is-weg { animation: none; }
  .dg-traject { transition: none; }
}
/* In het gasttraject heet de onderste strook niet "Constell doet" maar
   "wat er ondertussen gebeurt": dezelfde vorm, andere stem. */
.dg-gast .dg-doet-ster { color: var(--c-orange-deep); }

/* =========================================================
   7. HET GESPREK — de raakpunten (inkt)

   Herbouwd 04-08-2026: dit was een tabel met twee kolommen
   kaarten, en dat las als een spreadsheet. Nu is elk raakpunt
   een SCÈNE: links wat jouw team zegt, rechts wat je gast
   ervaart, en daartussen een verlicht toneel met het beeld van
   dat moment — een illustratie van de ontmoeting waar jullie
   elkaar écht treffen, of het object dat het werk doet (een
   bel, een envelop, een agenda, een factuur).

   Drie dingen dragen het:
   1. SPREEKBALLONNEN met een puntje naar het midden, zodat het
      als een gesprek leest en niet als twee lijstjes.
   2. EEN VERLICHT TONEEL. De figuren zijn bijna-zwart en zouden
      op de inktband verdwijnen; daarom staat elk beeld op een
      licht vlak met een warme gloed eromheen.
   3. GESTAFFELDE ENTREE: eerst spreekt links, dan gebeurt het
      ding in het midden, dan antwoordt rechts. ~180ms uit
      elkaar — dat is precies het ritme van een gesprek.
   ========================================================= */
.dg-vgl { position: relative; }
/* De schakelaar staat in één lijn met de gecentreerde sectiekop. */
.dg-vgl-schakel {
  display: flex; justify-content: center; gap: 0.35rem; padding: 0.35rem;
  width: fit-content; margin: 0 auto clamp(3rem, 7vw, 5rem);
  background: rgba(244, 244, 245, 0.10); border-radius: var(--r-pill);
  max-width: 100%; flex-wrap: wrap;
}
.dg-vgl-schakel button {
  font: inherit; font-size: var(--fs-small); font-weight: 500; cursor: pointer;
  border: 0; border-radius: var(--r-pill); padding: 0.6rem 1.1rem; min-height: 44px;
  background: transparent; color: var(--c-on-dark);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dg-vgl-schakel button:hover { background: rgba(244, 244, 245, 0.14); }
.dg-vgl-schakel button[aria-selected="true"] { background: var(--c-on-dark); color: var(--c-ink); }

/* ---- De reeks scènes ---- */
.dg-scenes { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(3.5rem, 8vw, 6.5rem); }
.dg-scene { position: relative; }

/* Kopregel boven de scène: welk soort moment en wanneer. */
.dg-scene-kop {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  flex-wrap: wrap; margin: 0 0 var(--sp-5);
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
}
.dg-scene-soort {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.3rem 0.75rem; border-radius: var(--r-pill);
  background: rgba(255, 153, 102, 0.16); color: var(--c-orange);
}
.dg-scene-soort svg { width: 9px; height: 15px; flex: 0 0 auto; }
.dg-scene--jij .dg-scene-soort { background: rgba(192, 199, 250, 0.16); color: var(--c-lavender); }
.dg-scene--jij .dg-scene-soort svg { width: 13px; height: 13px; }
.dg-scene--samen .dg-scene-soort { background: var(--c-on-dark); color: var(--c-ink); }
.dg-scene--samen .dg-scene-soort svg { width: 14px; height: 14px; }
.dg-scene-tijd { color: rgba(244, 244, 245, 0.72); }

.dg-scene-rij {
  display: grid; grid-template-columns: 1fr minmax(0, 15rem) 1fr;
  gap: clamp(1rem, 2.5vw, 2rem); align-items: center;
}
/* Een ontmoeting krijgt een breder toneel dan een los voorwerp: dáár gaat
   het over, dus dáár mag het beeld het overnemen. */
.dg-scene--samen .dg-scene-rij { grid-template-columns: 1fr minmax(0, 30rem) 1fr; }

/* ---- De spreekballonnen ---- */
.dg-bubbel {
  position: relative;
  background: rgba(244, 244, 245, 0.08);
  border: 1px solid rgba(244, 244, 245, 0.16);
  border-radius: 20px;
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.dg-bubbel b {
  display: block; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; font-weight: 500;
  color: rgba(244, 244, 245, 0.72); margin-bottom: var(--sp-2);
}
.dg-bubbel h3 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 600; color: #fff; margin: 0 0 var(--sp-2); }
.dg-bubbel p { margin: 0; font-size: var(--fs-small); color: var(--c-on-dark); max-width: 44ch; }
/* Het puntje naar het midden: een gedraaid vierkantje met dezelfde vulling
   en rand, waarvan de twee binnenste zijden geen rand krijgen. */
.dg-bubbel::after {
  content: ""; position: absolute; top: 2.6rem;
  width: 15px; height: 15px; transform: rotate(45deg);
  background: rgba(38, 38, 44, 1);
  border: 1px solid rgba(244, 244, 245, 0.16);
}
.dg-bubbel--jij { text-align: right; }
.dg-bubbel--jij p { margin-left: auto; }
.dg-bubbel--jij::after { right: -8px; border-left: 0; border-bottom: 0; }
.dg-bubbel--gast::after { left: -8px; border-right: 0; border-top: 0; }
.dg-scene--samen .dg-bubbel { background: rgba(244, 244, 245, 0.13); border-color: rgba(244, 244, 245, 0.34); }
.dg-scene--samen .dg-bubbel::after { background: rgb(48, 48, 54); border-color: rgba(244, 244, 245, 0.34); }

/* ---- Het toneel: een lichtvlak op de inktband ---- */
.dg-toneel {
  position: relative; margin: 0; display: grid; place-items: center;
  background: var(--c-surface); border-radius: var(--r-media);
  padding: clamp(1rem, 2.5vw, 1.75rem);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
/* Warme gloed eromheen — dat is wat het een tóneel maakt in plaats van een
   witte doos. Als `box-shadow` en niet als pseudo-element met z-index:-1:
   die laatste verdwijnt achter de bandachtergrond, omdat er tussen het
   toneel en de sectie geen stapelcontext zit. Bij een ontmoeting is de
   gloed sterker; bij "jij, met één klik" lavendel in plaats van avondzon. */
.dg-toneel { box-shadow: 0 0 70px -6px rgba(255, 153, 102, 0.30); }
.dg-scene--samen .dg-toneel { box-shadow: 0 0 110px -6px rgba(255, 153, 102, 0.46); }
.dg-scene--jij .dg-toneel { box-shadow: 0 0 70px -6px rgba(192, 199, 250, 0.34); }
.dg-toneel img { display: block; width: 100%; height: auto; }
/* Een voorwerp staat in een ronde lichtcirkel. `aspect-ratio` is hier niet
   optioneel: zonder dat wordt de hoogte door het beeld bepaald en maakt
   border-radius:50% er een platte ellips van — bij het agenda-icoon (199×101)
   viel dat meteen op. */
.dg-toneel--object {
  aspect-ratio: 1; width: min(15rem, 100%); justify-self: center;
  border-radius: 50%; padding: clamp(1rem, 2.4vw, 1.75rem);
}
.dg-toneel--object img { width: auto; max-width: 100%; max-height: 100%; }

/* De scène waar je nú bent (of waar je overheen gaat) komt naar voren: de
   gloed wordt sterker, alsof het licht op dat toneel aangaat. */
.dg-scene:hover .dg-toneel,
.dg-scene.is-nu .dg-toneel { transform: translateY(-4px) scale(1.02); box-shadow: 0 0 130px -4px rgba(255, 153, 102, 0.52), var(--shadow-pop); }
.dg-scene--jij:hover .dg-toneel,
.dg-scene--jij.is-nu .dg-toneel { box-shadow: 0 0 130px -4px rgba(192, 199, 250, 0.5), var(--shadow-pop); }
.dg-scene:hover .dg-bubbel,
.dg-scene.is-nu .dg-bubbel { background: rgba(244, 244, 245, 0.14); border-color: rgba(244, 244, 245, 0.30); }

/* ---- Gestaffelde entree: links spreekt, het midden gebeurt, rechts antwoordt ---- */
.reveal-armed .dg-scene .dg-bubbel--jij { opacity: 0; transform: translateX(-24px); }
.reveal-armed .dg-scene .dg-toneel { opacity: 0; transform: scale(0.92); }
.reveal-armed .dg-scene .dg-bubbel--gast { opacity: 0; transform: translateX(24px); }
.reveal-armed .dg-scene .dg-scene-kop { opacity: 0; transform: translateY(-8px); }
.reveal-armed .dg-scene.in .dg-scene-kop,
.reveal-armed .dg-scene.in .dg-bubbel--jij,
.reveal-armed .dg-scene.in .dg-toneel,
.reveal-armed .dg-scene.in .dg-bubbel--gast {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.reveal-armed .dg-scene.in .dg-bubbel--jij { transition-delay: 120ms; }
.reveal-armed .dg-scene.in .dg-toneel { transition-delay: 300ms; }
.reveal-armed .dg-scene.in .dg-bubbel--gast { transition-delay: 480ms; }

/* ---- Legenda ---- */
.dg-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-5); margin-top: clamp(3rem, 7vw, 4.5rem); }
.dg-legenda-item { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--fs-small); color: var(--c-on-dark); }
.dg-legenda-item i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-pill); flex: 0 0 auto; }
.dg-legenda-item:nth-child(1) i { background: rgba(255, 153, 102, 0.16); color: var(--c-orange); }
.dg-legenda-item:nth-child(2) i { background: rgba(192, 199, 250, 0.16); color: var(--c-lavender); }
.dg-legenda-item:nth-child(3) i { background: var(--c-on-dark); color: var(--c-ink); }
.dg-legenda-item svg { width: 13px; height: 13px; }
.dg-legenda-item:nth-child(1) svg { width: 9px; height: 15px; }

/* ---- Alleen jij / alleen je gast ---- */
.dg-vgl[data-weergave="jij"] .dg-scene-rij,
.dg-vgl[data-weergave="gast"] .dg-scene-rij { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); }
.dg-vgl[data-weergave="jij"] .dg-bubbel--gast,
.dg-vgl[data-weergave="gast"] .dg-bubbel--jij { display: none; }
/* In enkelbaans-weergave staat de tekst altijd links en het beeld rechts. */
.dg-vgl[data-weergave="gast"] .dg-bubbel--gast { order: -1; }
.dg-vgl[data-weergave="gast"] .dg-bubbel--gast::after { right: -8px; left: auto; border: 1px solid rgba(244, 244, 245, 0.16); border-left: 0; border-bottom: 0; }
.dg-vgl[data-weergave="gast"] .dg-bubbel--gast { text-align: right; }
.dg-vgl[data-weergave="gast"] .dg-bubbel--gast p { margin-left: auto; }
.dg-vgl[data-weergave="jij"] .dg-scene--samen .dg-scene-rij,
.dg-vgl[data-weergave="gast"] .dg-scene--samen .dg-scene-rij { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }

@media (max-width: 900px) {
  /* Eén kolom: het toneel bovenaan, dan wie er wat doet. De ballonnen
     houden hun puntje, maar dan naar boven gericht. */
  .dg-scene-rij,
  .dg-vgl[data-weergave="jij"] .dg-scene-rij,
  .dg-vgl[data-weergave="gast"] .dg-scene-rij,
  .dg-scene--samen .dg-scene-rij,
  .dg-vgl[data-weergave="jij"] .dg-scene--samen .dg-scene-rij,
  .dg-vgl[data-weergave="gast"] .dg-scene--samen .dg-scene-rij { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .dg-toneel { order: -1; justify-self: center; width: min(22rem, 100%); }
  .dg-scene--samen .dg-toneel { width: min(28rem, 100%); }
  .dg-bubbel--jij,
  .dg-vgl[data-weergave="gast"] .dg-bubbel--gast { text-align: left; }
  .dg-bubbel--jij p,
  .dg-vgl[data-weergave="gast"] .dg-bubbel--gast p { margin-left: 0; }
  .dg-bubbel::after,
  .dg-vgl[data-weergave="gast"] .dg-bubbel--gast::after {
    top: -8px; left: 2.4rem; right: auto;
    border: 1px solid rgba(244, 244, 245, 0.16); border-right: 0; border-bottom: 0;
  }
  .dg-scene--samen .dg-bubbel::after { border-color: rgba(244, 244, 245, 0.34); border-right: 0; border-bottom: 0; }
  .reveal-armed .dg-scene .dg-bubbel--jij,
  .reveal-armed .dg-scene .dg-bubbel--gast { transform: translateY(16px); }
}

/* =========================================================
   8. Wat het oplevert (steen) — hergebruikt .cijferbalk
   ========================================================= */
.dg-uitkomst .cijfer .groot { color: var(--c-ink); }

/* =========================================================
   9. Reduced motion — alles direct in de eindstand
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .reveal-armed .dg-mini.dg-mini--speel .dg-mini-rij { opacity: 1; transform: none; }
  .reveal-armed .dg-mini--staven .dg-staaf span { transform: scaleY(1); }
  .reveal-armed .dg-mini .dg-status i { background: var(--c-orange); }
  .dg-punt, .dg-status i, .dg-staaf span { transition: none; }
  .dg-balk { position: static; }
  /* De kaart mag nog steeds oplichten (dat is betekenis, geen sier), maar
     zonder de verschuiving. Het hemellichaam wisselt zonder overgang. */
  .dg-kaart, .dg-cast-fig, .dg-cast-fig img { transition: none; }
  .dg-moment.is-nu .dg-kaart { transform: none; }
  /* Het gesprek staat er meteen helemaal: geen ballonnen die van opzij
     komen invliegen, wel gewoon alle tekst en alle beelden. */
  .reveal-armed .dg-scene .dg-scene-kop,
  .reveal-armed .dg-scene .dg-bubbel,
  .reveal-armed .dg-scene .dg-toneel { opacity: 1; transform: none; transition: none; }
  .dg-scene.is-nu .dg-toneel { transform: none; }
  .hm-zon, .hm-maan, .hm-sterren, .hm-schijf, .hm-stralen, .hm-stralen line, .hm-horizon { transition: none; }
}