/* apparaten.css, spoor mix (28 oktober 2026): de apparaten in de opening. Rechts van de kop staat één apparaat dat van
   telefoon naar tablet naar laptop groeit (het gebaar van aaltun.nl, hier in de taal van Dailight), met daarop de AI van
   Dailight: een bol van levende tekens, hetzelfde materiaal als de A en de I van het woordmerk, met daglicht erachter en
   blauwe vonken. Op de telefoon stelt hij zich voor en regelt hij de klantvraag van Emre (jij tikt "ja"); op de tablet
   schuift hij mee naar het zijpaneel en vult de planning zich; op de laptop landt hij in de balk van het systeem en ademt
   hij uit: elk onderdeel gaat live. Daarna kiest de bezoeker zelf het apparaat. Komt na opening.css en gebruikt uit
   stijl.css de kleuren, de letters en .sr-only. Nergens cursief, geen kapitalen; de tekens van de AI in Geist Mono (de
   enige mono, zoals het woordmerk). Alle maten in het scherm zijn em's op een letter van 10 px maal --s (de schaal van
   het apparaat, uit apparaten.js), zodat het scherm scherp meeschaalt. De regie en de AI staan in apparaten.js. */

/* ===== De opening in twee kolommen ===== */
.oi-opening.met-apparaten .oi-in { max-width: calc(1320px + 2 * var(--oi-rand)); }
.oi-opening.met-apparaten .oi-tekst { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-width: 0; }
@media (min-width: 1024px) {
  .oi-opening.met-apparaten .oi-in { display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); column-gap: clamp(24px, 3vw, 56px); align-items: start; }
  .oi-opening.met-apparaten .oi-kop { font-size: clamp(44px, 4.5vw, 74px); max-width: 8.4em; }
  .oi-opening.met-apparaten .oi-podium { align-self: stretch; }
}
@media (max-width: 1023.98px) {
  .oi-opening.met-apparaten .oi-podium { margin-top: clamp(28px, 5svh, 48px); min-height: clamp(460px, 78svh, 640px); }
}

/* ===== Het podium: de keuze, de vloer met het apparaat en de AI, het onderschrift ===== */
.ap-podium { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; min-height: 0; }
.ap-keuze { display: inline-flex; flex: none; gap: 2px; padding: 4px; border-radius: 999px; background: var(--glas); border: 1px solid var(--glas-rand);
  box-shadow: 0 14px 34px -22px rgba(29, 52, 110, 0.45), 0 1px 3px -1px rgba(11, 18, 32, 0.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transition: opacity 0.5s ease; }
.ap-podium.ap-klaar .ap-keuze, .ap-podium.ap-stil .ap-keuze { opacity: 1; }
.ap-keuze button { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent;
  color: #334155; font: inherit; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; transition: color 0.2s ease, background 0.25s ease; }
.ap-keuze button:hover { color: var(--inkt); }
.ap-keuze button[aria-selected="true"] { background: var(--inkt); color: #fff; }
.ap-keuze button:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; }
.ap-keuze svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 599px) { .ap-keuze button span { display: none; } .ap-keuze button { padding: 0 13px; } }

.ap-vloer { position: relative; width: 100%; flex: 1; min-height: 0; display: grid; place-items: center; padding: 22px 0 16px; }
.ap-apparaat { position: relative; will-change: transform; transition: transform 0.95s cubic-bezier(0.22, 1.12, 0.36, 1), opacity 0.4s ease; }
.ap-podium.ap-wacht .ap-apparaat { transform: translateY(72vh); opacity: 0; transition: none; }
.ap-frame { position: relative; box-sizing: content-box; background: var(--inkt);
  box-shadow: 0 60px 140px -44px rgba(11, 18, 32, 0.78), 0 2px 10px -4px rgba(11, 18, 32, 0.35);
  transition: width 0.9s cubic-bezier(0.34, 1.16, 0.64, 1), height 0.9s cubic-bezier(0.34, 1.16, 0.64, 1), border-radius 0.9s cubic-bezier(0.34, 1.16, 0.64, 1), padding 0.9s cubic-bezier(0.34, 1.16, 0.64, 1); }
.ap-scherm { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--papier); color: var(--inkt);
  font-family: var(--tekst); font-size: calc(10px * var(--s, 1)); line-height: 1.3; -webkit-font-smoothing: antialiased;
  transition: border-radius 0.9s cubic-bezier(0.34, 1.16, 0.64, 1); }
.ap-raster { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(11, 18, 32, 0.11) 1px, transparent 1.4px); background-size: 2em 2em; }
.ap-notch { position: absolute; z-index: 6; left: 50%; top: 1em; width: 9.6em; height: 2em; border-radius: 999px; background: var(--inkt); transform: translateX(-50%); transition: opacity 0.25s ease; }
.ap-camera { position: absolute; z-index: 6; left: 50%; top: 0.8em; width: 0.6em; height: 0.6em; border-radius: 50%; background: rgba(11, 18, 32, 0.8); transform: translateX(-50%); transition: opacity 0.25s ease; }
.ap-podium:not([data-stage="phone"]) .ap-notch { opacity: 0; }
.ap-podium[data-stage="phone"] .ap-camera { opacity: 0; }
/* Het onderstel van de laptop. */
.ap-voet { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); transform-origin: 50% 0; pointer-events: none; opacity: 0;
  transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.34, 1.16, 0.64, 1); }
.ap-podium[data-stage="laptop"] .ap-voet { opacity: 1; transition-delay: 0.12s; }
.ap-podium:not([data-stage="laptop"]) .ap-voet { transform: translateX(-50%) scaleY(0.2); }
.ap-voet-plaat { background: linear-gradient(to bottom, #1a2238, #0a0e1c); }
.ap-voet-lip { margin: 0 auto; background: rgba(10, 14, 28, 0.7); }

/* De drie schermen liggen over elkaar; alleen het actieve is zichtbaar (kort overlappend, zodat het frame nooit leeg is). */
.ap-scherm [data-scherm] { position: absolute; inset: 0; opacity: 0; transition: opacity 0.22s ease; }
.ap-scherm [data-scherm].aan { opacity: 1; transition: opacity 0.35s ease 0.24s; }
.ap-anker { flex: none; border-radius: 50%; }

/* De AI: één doek over de hele vloer; apparaten.js tekent er de bol van tekens op, op de plek van het anker van het scherm. */
.ap-ai { position: absolute; inset: 0; z-index: 7; width: 100%; height: 100%; pointer-events: none; }
/* Zonder JavaScript: een stil merkteken in de balk van de laptop. */
.ap-ai-stil { display: block; width: 100%; height: 100%; }
.ap-js .ap-ai-stil { display: none; }
/* Een bevroren stand (?apparaten=<ms>): niets beweegt. */
.ap-podium.ap-geen-overgang, .ap-podium.ap-geen-overgang * { transition: none !important; animation: none !important; }

.ap-onderschrift { flex: none; margin: 0; padding: 0 12px; min-height: 1.45em; font-size: 14px; line-height: 1.45; color: #334155; text-align: center; text-wrap: balance;
  transition: opacity 0.3s ease; }
.ap-onderschrift.wisselt { opacity: 0; }

/* ===== Wat in alle schermen hetzelfde is ===== */
.ap-rij { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ap-rij.aan { grid-template-rows: 1fr; }
.ap-rij > * { min-height: 0; overflow: hidden; }
.ap-rij > * > * { opacity: 0; transform: translateY(0.5em); transition: opacity 0.3s ease 0.08s, transform 0.3s ease 0.08s; }
.ap-rij.aan > * > * { opacity: 1; transform: none; }
.ap-stip { display: inline-block; flex: none; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--nevel-diep); }
.ap-stip.ap-groen { background: var(--groen); }
.ap-stip.ap-blauw { background: var(--blauw); }
.ap-vink { flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--nevel); color: #fff; display: inline-grid; place-items: center; transition: background 0.3s ease; }
.ap-vink svg { width: 0.9em; height: 0.9em; }
.ap-vink.ap-groen { background: var(--groen); }
.ap-vink.ap-blauw { background: var(--blauw); }
.ap-merkje { flex: none; display: inline-grid; place-items: center; width: 2em; height: 2em; border-radius: 0.55em; background: var(--blauw); color: #fff; font-size: 1em; font-weight: 600; }
.ap-initialen { flex: none; display: inline-grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--inkt); color: #fff; font-size: 0.9em; font-weight: 600; letter-spacing: 0.02em; }
.ap-statusbalk { display: flex; align-items: center; justify-content: space-between; font-size: 1.15em; font-weight: 600; }
.ap-statusbalk svg { height: 1em; width: auto; }
.ap-statusbalk span { display: inline-flex; align-items: center; gap: 0.45em; }

/* ===== De telefoon: het gesprek met Dailight ===== */
.ap-telefoon { display: flex; flex-direction: column; gap: 0.8em; padding: 4.2em 1.4em 1.3em; }
.ap-chatkop { display: flex; align-items: center; gap: 1em; padding: 0.4em 0 0.9em; border-bottom: 1px solid var(--lijn-fijn); }
.ap-chatkop .ap-anker { width: 3.6em; height: 3.6em; }
.ap-chatkop b { display: block; font-size: 1.3em; font-weight: 600; line-height: 1.1; }
.ap-chatkop small { display: flex; align-items: center; gap: 0.45em; margin-top: 0.35em; font-size: 1em; color: #475569; }
.ap-chatkop small .ap-stip { width: 0.6em; height: 0.6em; }
.ap-chat { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.ap-anker-midden { position: absolute; left: 50%; top: 42%; width: 8em; height: 8em; transform: translate(-50%, -50%); pointer-events: none; }
.ap-bel { position: relative; max-width: 88%; margin-top: 0.7em; padding: 0.8em 1em; border-radius: 1.4em; background: #fff; font-size: 1.15em; line-height: 1.35;
  box-shadow: 0 0 0 1px var(--lijn-fijn), 0 10px 24px -18px rgba(29, 52, 110, 0.4); }
.ap-bel.ap-van-ai { align-self: flex-start; border-top-left-radius: 0.4em; }
.ap-bel.ap-breed { max-width: 100%; }
.ap-bel.ap-van-jij { align-self: flex-end; border-top-right-radius: 0.4em; background: var(--tint); box-shadow: none; }
.ap-bel.ap-van-jij .ap-vink { display: inline-grid; vertical-align: middle; margin-left: 0.4em; width: 1.1em; height: 1.1em; }
.ap-kaart { align-self: stretch; margin-top: 0.7em; padding: 0.8em 1em 0.9em; border-radius: 1.2em; background: #fff; box-shadow: 0 0 0 1px var(--lijn), 0 10px 24px -18px rgba(29, 52, 110, 0.4); }
.ap-kaart-kop { display: flex; align-items: center; gap: 0.6em; font-size: 1.05em; color: #475569; }
.ap-kaart-kop img { width: 1.5em; height: 1.5em; border-radius: 0.4em; }
.ap-kaart-kop b { color: var(--inkt); font-weight: 600; }
.ap-kaart-kop time { margin-left: auto; font-size: 0.9em; }
.ap-kaart p { margin: 0.5em 0 0; font-size: 1.15em; line-height: 1.35; }
.ap-knoppen { display: flex; gap: 0.6em; margin-top: 0.8em; transition: opacity 0.3s ease; }
.ap-knopje { display: inline-flex; align-items: center; height: 2.5em; padding: 0 1em; white-space: nowrap; border-radius: 999px; font-size: 1em; font-weight: 500; background: var(--blauw); color: #fff;
  box-shadow: 0 10px 20px -12px rgba(37, 99, 235, 0.9); transition: transform 0.18s ease, background 0.18s ease; }
.ap-knopje.ap-tweede { background: var(--tint); color: var(--blauw-diep); box-shadow: none; }
.ap-telefoon.ap-gedrukt .ap-knopje.ap-ja { transform: scale(0.95); background: var(--blauw-diep); }
.ap-telefoon.ap-gedrukt .ap-knoppen { opacity: 0.45; }
.ap-typt { display: none; align-self: flex-start; align-items: center; gap: 0.6em; margin-top: 0.7em; padding: 0.75em 1em; border-radius: 1.4em; border-top-left-radius: 0.4em; background: #fff;
  font-size: 1.05em; color: #475569; box-shadow: 0 0 0 1px var(--lijn-fijn); }
.ap-typt.aan { display: inline-flex; animation: ap-op 0.25s ease both; }
.ap-typt i { display: inline-flex; gap: 0.3em; }
.ap-typt i b { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--nevel-diep); animation: ap-typt 1.1s ease-in-out infinite; }
.ap-typt i b:nth-child(2) { animation-delay: 0.18s; }
.ap-typt i b:nth-child(3) { animation-delay: 0.36s; }
.ap-typt:empty, .ap-typt span:empty { display: none; }
@keyframes ap-typt { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(-0.25em); opacity: 1; } }
@keyframes ap-op { from { opacity: 0; transform: translateY(0.4em); } to { opacity: 1; transform: none; } }
.ap-invoer { flex: none; display: flex; align-items: center; gap: 0.6em; height: 3.6em; margin-top: 0.9em; padding: 0 1.2em; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 1px var(--lijn); color: #64748b; font-size: 1.1em; }
.ap-invoer svg { margin-left: auto; width: 1.3em; height: 1.3em; color: var(--blauw); }

/* ===== De tablet: de planner van Polderpad, met Dailight in het zijpaneel ===== */
.ap-tablet { display: flex; flex-direction: column; gap: 1em; padding: 2.6em 1.6em 1.4em; }
.ap-tabbalk { display: flex; align-items: center; gap: 1em; font-size: 1.05em; }
.ap-tabbalk b { font-weight: 600; }
.ap-tabbalk nav { display: flex; gap: 1.2em; margin-left: 1em; color: #475569; }
.ap-tabbalk nav em { font-style: normal; color: var(--inkt); font-weight: 600; box-shadow: inset 0 -2px 0 var(--blauw); padding-bottom: 0.2em; }
.ap-tabbalk .ap-initialen { margin-left: auto; }
.ap-tabkop h3 { margin: 0; font-size: 1.7em; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.ap-tabkop p { margin: 0.3em 0 0; font-size: 1.05em; color: #475569; }
.ap-tabbody { display: grid; grid-template-columns: minmax(0, 1fr) 15.6em; gap: 1em; flex: 1; min-height: 0; }
.ap-planner { display: flex; flex-direction: column; }
.ap-uur { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); align-items: center; gap: 0.8em; padding: 0.55em 0; border-top: 1px solid var(--lijn-fijn); }
.ap-uur:first-child { border-top: 0; }
.ap-uur time { font-size: 1.02em; color: #475569; line-height: 1.25; }
.ap-slot { display: flex; align-items: center; gap: 0.7em; padding: 0.6em 0.9em; border-radius: 0.9em; background: #fff; box-shadow: 0 0 0 1px var(--lijn); font-size: 1.05em; }
.ap-slot b { font-weight: 600; }
.ap-slot span { color: #475569; }
.ap-slot small { margin-left: auto; font-size: 0.88em; color: var(--groen); white-space: nowrap; }
.ap-slot small.ap-voorstel { color: var(--blauw); }
.ap-slot.ap-leeg { background: transparent; box-shadow: 0 0 0 1px var(--lijn-fijn); color: #64748b; border: 1px dashed var(--nevel-diep); }
.ap-uur .ap-rij { align-self: center; }
.ap-slot.ap-nieuw { box-shadow: 0 0 0 1px var(--blauw), 0 0 0 4px rgba(96, 165, 250, 0.35); animation: ap-nieuw 1.6s ease-out 0.35s both; }
@keyframes ap-nieuw { 0% { box-shadow: 0 0 0 1px var(--blauw), 0 0 0 4px rgba(96, 165, 250, 0.45); } 100% { box-shadow: 0 0 0 1px var(--blauw), 0 0 0 0 rgba(96, 165, 250, 0); } }
.ap-rij.aan + .ap-slot.ap-leeg { display: none; }
.ap-zij { display: flex; flex-direction: column; gap: 0.9em; padding: 1em; border-radius: 1.2em; background: #fff; box-shadow: 0 0 0 1px var(--lijn), var(--kaart-schaduw); }
.ap-zijkop { display: flex; align-items: center; gap: 0.8em; }
.ap-zijkop .ap-anker { width: 4.4em; height: 4.4em; }
.ap-zijkop b { display: block; font-size: 1.2em; font-weight: 600; line-height: 1.1; }
.ap-zijkop small { display: block; margin-top: 0.3em; font-size: 0.98em; line-height: 1.3; color: #475569; }
.ap-stappen { display: flex; flex-direction: column; gap: 0.55em; margin: 0; padding: 0.4em 0 0; list-style: none; border-top: 1px solid var(--lijn-fijn); }
.ap-stappen li { display: flex; align-items: center; gap: 0.6em; font-size: 1.02em; line-height: 1.3; color: #64748b; transition: color 0.3s ease; }
.ap-stappen li.aan { color: var(--inkt); }
.ap-stappen li.aan .ap-vink { background: var(--blauw); }
.ap-stappen li.ap-slot-klaar.aan .ap-vink { background: var(--groen); }
.ap-stappen li.ap-slot-klaar { margin-top: 0.3em; padding-top: 0.7em; border-top: 1px solid var(--lijn-fijn); font-weight: 500; }

/* ===== De laptop: het overzicht van de zaak, met Dailight in de balk ===== */
.ap-laptop { display: flex; flex-direction: column; }
.ap-browser { flex: none; display: flex; align-items: center; gap: 0.8em; height: 2.9em; padding: 0 1.1em; background: rgba(255, 255, 255, 0.62); border-bottom: 1px solid var(--lijn-fijn); }
.ap-browser i { width: 0.9em; height: 0.9em; border-radius: 50%; background: #e2e8f0; }
.ap-browser i:nth-child(1) { background: #fca5a5; } .ap-browser i:nth-child(2) { background: #fcd34d; } .ap-browser i:nth-child(3) { background: #86efac; }
.ap-adres { margin: 0 auto; padding: 0.3em 1.2em; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--lijn-fijn); font-size: 0.95em; color: #475569; }
.ap-app { display: grid; grid-template-columns: 13.6em minmax(0, 1fr); flex: 1; min-height: 0; }
.ap-zijbalk { display: flex; flex-direction: column; gap: 0.3em; padding: 1.1em 0.9em; border-right: 1px solid var(--lijn-fijn); background: rgba(255, 255, 255, 0.5); }
.ap-zijbalk .ap-merk { display: flex; align-items: center; gap: 0.6em; margin: 0 0.3em 0.9em; font-size: 1.1em; font-weight: 600; }
.ap-zijbalk a { display: flex; align-items: center; gap: 0.6em; padding: 0.5em 0.7em; border-radius: 0.7em; font-size: 1.02em; color: #334155; text-decoration: none; }
.ap-zijbalk a.aan { background: var(--tint); color: var(--blauw-diep); font-weight: 500; }
.ap-zijbalk a svg { width: 1.1em; height: 1.1em; }
.ap-zijbalk .ap-gebruiker { display: flex; align-items: center; gap: 0.6em; margin-top: auto; padding: 0.3em; font-size: 0.98em; color: #334155; }
.ap-hoofd { display: flex; flex-direction: column; gap: 0.9em; min-height: 0; padding: 1.1em 1.3em 1.2em; }
.ap-bovenbalk { display: flex; align-items: center; gap: 1em; }
.ap-bovenbalk h3 { margin: 0; font-size: 1.5em; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.ap-bovenbalk p { margin: 0.2em 0 0; font-size: 0.98em; color: #475569; }
.ap-chip { display: flex; align-items: center; gap: 0.6em; margin-left: auto; padding: 0.35em 0.9em 0.35em 0.4em; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--lijn); font-size: 1.02em; white-space: nowrap; }
.ap-chip .ap-anker { width: 2em; height: 2em; }
.ap-chip span { display: grid; }
.ap-chip span > * { grid-area: 1 / 1; transition: opacity 0.3s ease; }
.ap-chip span > [data-stap].uit { opacity: 0; }
.ap-tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9em; }
.ap-tegel { padding: 0.9em 1.05em 0.95em; border-radius: 1.05em; background: #fff; box-shadow: 0 0 0 1px var(--lijn); transition: box-shadow 0.4s ease; }
.ap-tegel small { display: block; font-size: 0.98em; line-height: 1.25; color: #475569; }
.ap-tegel strong { display: block; margin-top: 0.45em; font-size: 2em; font-weight: 600; line-height: 1; letter-spacing: -0.02em; opacity: 0.32; transition: opacity 0.4s ease; }
.ap-tegel strong em { font-style: normal; font-size: 0.55em; font-weight: 500; letter-spacing: 0; color: #475569; }
.ap-tegel .ap-leven { display: flex; align-items: center; gap: 0.45em; margin-top: 0.6em; font-size: 0.95em; color: #64748b; }
.ap-tegel.ap-live strong { opacity: 1; }
.ap-tegel.ap-live .ap-stip { background: var(--groen); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
.ap-tegel.ap-live .ap-leven { color: #166534; }
.ap-tegel.ap-live { box-shadow: 0 0 0 1px var(--lijn), 0 14px 30px -22px rgba(29, 52, 110, 0.45); }
.ap-strook { flex: 1; min-height: 0; padding: 0.9em 1.05em; border-radius: 1.05em; background: #fff; box-shadow: 0 0 0 1px var(--lijn); }
.ap-strook > small { display: block; font-size: 0.98em; color: #475569; }
.ap-strook ul { margin: 0.5em 0 0; padding: 0; list-style: none; }
.ap-regel { display: flex; align-items: center; gap: 0.8em; padding: 0.45em 0; border-top: 1px solid var(--lijn-fijn); font-size: 1em; color: #64748b; transition: color 0.3s ease; }
.ap-regel time { flex: none; width: 3.2em; color: #475569; }
.ap-regel .ap-vink { margin-left: auto; width: 1.4em; height: 1.4em; }
.ap-regel.ap-live { color: var(--inkt); }
.ap-regel.ap-live .ap-vink { background: var(--groen); }

/* ===== Stil ===== */
@media (prefers-reduced-motion: reduce) {
  .ap-apparaat, .ap-frame, .ap-scherm, .ap-voet, .ap-scherm [data-scherm], .ap-rij, .ap-rij > * > *, .ap-keuze, .ap-onderschrift { transition: none; }
  .ap-podium.ap-wacht .ap-apparaat { transform: none; opacity: 1; }
  .ap-typt i b, .ap-slot.ap-nieuw, .ap-typt.aan { animation: none; }
}