/*
  De uitlegpagina's van de teamtools (/examples/<demo>, 23 oktober 2026): de app groot in
  beeld, een venster op desktop met een telefoon ernaast. Alleen op die pagina's geladen.
*/
.appbeeld{border-top:0}
.appbeeld>.hm-wrap{padding-top:0}
.app-schot{position:relative;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.app-schot img{display:block;width:100%;height:auto}
.venster{display:block;margin-right:clamp(0px,9vw,150px);border:1px solid var(--dag-lijn-sterk);background:#fff;box-shadow:0 2px 4px rgba(21,25,29,.06),0 30px 60px -30px rgba(21,25,29,.45);text-decoration:none;overflow:hidden;transition:transform .5s var(--gemak),box-shadow .5s var(--gemak)}
.venster:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(21,25,29,.06),0 40px 70px -30px rgba(21,25,29,.5)}
.venster-kop{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:1px solid var(--dag-lijn);background:#f4f5f6}
.venster-kop i{width:9px;height:9px;border-radius:50%;background:#cfd3d7}
.venster-kop span{margin-left:10px;font:400 .72rem/1 var(--mono);color:var(--dag-mist)}
.telefoon{position:absolute;right:0;bottom:56px;width:clamp(150px,19vw,260px);border:7px solid var(--dag-ink);border-radius:30px;overflow:hidden;background:var(--dag-ink);box-shadow:0 30px 60px -24px rgba(21,25,29,.55);transition:transform .5s var(--gemak)}
.telefoon:hover{transform:translateY(-4px)}
.telefoon img{border-radius:23px}
.app-schot figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-right:clamp(0px,22vw,300px);font-size:.92rem;color:var(--dag-mist)}
.app-schot figcaption a:not(.knop){font-weight:600;color:var(--dag-ink)}
@media (max-width:760px){
  .venster{margin-right:0}
  .venster-kop{height:24px}
  .telefoon{position:relative;right:auto;bottom:auto;justify-self:center;width:min(260px,72vw);margin-top:6px}
  .app-schot figcaption{margin-right:0}
}
@media (prefers-reduced-motion:reduce){.venster,.telefoon{transition:none}.venster:hover,.telefoon:hover{transform:none}}
@media (min-width:700px){.raster.twee{grid-template-columns:repeat(2,minmax(0,1fr))}}