/* Toestellen op de casepagina's: dezelfde MacBook en iPhone als op de
   homepage (27 okt 2026, Steven: "doe het zelfde op de casepaginas").
   Foto's van mockups-design.com met een uitgestanst scherm; de site ligt er in
   HTML onder en is te scrollen. Uitleg, bron, licentie en schermmaten:
   klyo-assets/TOESTELLEN.md. De homepage heeft dezelfde regels inline (voor
   de eerste verf); api/toestellen.test.js houdt de schermmaten gelijk. */
.wr-toestel { position: relative; padding-bottom: clamp(14px, 2vw, 26px); }
.wr-venster { position: relative; display: block; }
.wr-macbook, .wr-iphone { position: relative; z-index: 1; display: block; width: 100%; height: auto; pointer-events: none; }
.wr-scherm { position: absolute; left: 13.52%; top: 6.89%; width: 72.04%; height: 68.76%; display: flex; flex-direction: column; overflow: hidden; background: #0d0d0f; container-type: inline-size; }
.wr-scherm::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(112deg, rgba(255,255,255,0) 52%, rgba(255,255,255,0.07) 61%, rgba(255,255,255,0) 72%); }
.wr-balk { display: flex; flex: none; align-items: center; gap: 1.1cqi; padding: 1.5cqi 2.2cqi; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.wr-balk i { width: 1.5cqi; height: 1.5cqi; flex: none; border-radius: 50%; background: var(--line-strong); }
.wr-balk em { margin-left: 1.6cqi; min-width: 0; font-family: var(--mono); font-style: normal; font-size: clamp(7px, 1.9cqi, 11px); color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-beeld { position: relative; display: block; flex: 1; min-height: 0; }

/* De iPhone staat vóór de laptop, rechts (in de tekstkolom van een case). */
.wr-telefoon { position: absolute; bottom: 0; right: clamp(-26px, -1.8vw, -12px); z-index: 2; width: 19%; min-width: 80px; pointer-events: none; filter: drop-shadow(0 18px 22px rgba(26,26,24,0.24)) drop-shadow(0 3px 5px rgba(26,26,24,0.16)); }
.wr-telscherm { position: absolute; left: 3.86%; top: 2%; width: 92.29%; height: 95.95%; overflow: hidden; border-radius: 13.6% / 6.4%; background: #000; pointer-events: auto; }

/* Scrollen: elk scherm is een eigen scrollvlak met de hele pagina erin. Eerst
   alleen de bovenkant (licht), de hele pagina laadt pas bij gebruik
   (toestel.js). Geen schuifbalk; de hint zegt dat scrollen kan. */
.wr-beeld, .wr-telscherm { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior-x: none; }
.wr-beeld::-webkit-scrollbar, .wr-telscherm::-webkit-scrollbar { display: none; }
.wr-beeld a, .wr-telscherm a { display: block; }
.wr-beeld img, .wr-telscherm img { display: block; width: 100%; height: auto; }
.tel-balk { position: sticky; top: 0; z-index: 1; }
.wr-beeld:focus-visible, .wr-telscherm:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }
/* Een vast beeld (een open venster, zoals de afspraakmodule): niets te scrollen. */
.wr-beeld.vast, .wr-telscherm.vast { overflow: hidden; }
.wr-beeld.vast img { height: 100%; object-fit: cover; object-position: top; }

/* Alleen een telefoon (bijv. "zo ziet het er mobiel uit"): groot, midden. */
.wr-toestel.alleen-telefoon { padding-bottom: 0; }
.alleen-telefoon .wr-telefoon { position: relative; display: block; right: auto; bottom: auto; width: min(280px, 64%); margin: 0 auto; }

/* De hint (Steven: "er moet duidelijker scroll door de site staan"): altijd
   zichtbaar tot er in dat scherm gescrold is; het wieltje rolt drie keer als
   het toestel in beeld komt; alleen als scrollen echt kan (toestel.js zet
   .toestel-scroll, niet zonder script of bij databesparing). */
.wr-hint { display: none; }
.toestel-scroll .wr-hint { position: absolute; left: 50%; bottom: 7%; z-index: 3; display: inline-flex; align-items: center; gap: 0.55em; transform: translateX(-50%); padding: 0.7em 1.25em 0.7em 1em; border-radius: 999px; background: rgba(26,26,24,0.9); box-shadow: 0 0 0 1px rgba(244,240,232,0.25), 0 12px 28px -10px rgba(0,0,0,0.55); color: var(--bg); font-family: var(--sans); font-size: clamp(12px, 3.6cqi, 17px); font-weight: 600; line-height: 1; white-space: nowrap; pointer-events: none; transition: opacity 0.25s ease; }
.alleen-telefoon .wr-hint { font-size: 12px; bottom: 9%; }
.wr-hint svg { flex: none; width: 0.95em; height: 1.4em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.in-beeld .wr-hint-wiel { animation: hintWiel 1.3s cubic-bezier(0.77, 0, 0.175, 1) 0.4s 3; }
@keyframes hintWiel { 50% { transform: translateY(4px); opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .in-beeld .wr-hint-wiel { animation: none; } }
.toestel-scroll .gescrold .wr-hint { opacity: 0; }

@media (max-width: 560px) {
  /* De telefoon blijft binnen de schermbreedte. */
  .wr-telefoon { right: 0; width: 22%; min-width: 0; }
}