/* ============================================================
   HUISSTIJL — pas hier kleuren en lettertype aan
   ============================================================ */
:root {
  --navy: #0c2340;
  --orange: #f26a1b;
  --yellow: #d9e021;
  --paper: #f6f4ef;
  --ink: #14202e;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --ratio: 297 / 210;            /* A4 liggend: zelfde verhouding online én in de PDF */
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  background: radial-gradient(circle at 50% 40%, #22344d, #0a1422 70%);
  color: var(--ink);
  overflow: hidden;
}

/* ============================================================
   VIEWER (online)
   ============================================================ */
#stage {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 2vh 2vw 70px;
  perspective: 2400px;
}
#book {
  position: relative;
  width: min(94vw, (100vh - 100px) * 297 / 210);
  aspect-ratio: var(--ratio);
}
.sheet {
  position: absolute;
  inset: 0;
  container-type: size;          /* hierdoor schaalt ook de gewone tekst mee met de pagina */
  visibility: hidden;
  transform-origin: left center;
  backface-visibility: hidden;
  border-radius: 4px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  overflow: hidden;
  background: var(--paper);
}
.sheet.current { visibility: visible; z-index: 2; }
.sheet.turn-out-next { visibility: visible; z-index: 3; animation: outNext .7s cubic-bezier(.6,.05,.4,1) forwards; }
.sheet.turn-in-prev  { visibility: visible; z-index: 3; animation: inPrev  .7s cubic-bezier(.6,.05,.4,1) forwards; }
@keyframes outNext { to { transform: rotateY(-95deg); filter: brightness(.6); } }
@keyframes inPrev  { from { transform: rotateY(-95deg); filter: brightness(.6); } to { transform: none; } }
/* een dun "rugje" links, voor het boekgevoel */
.sheet::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2.2%;
  background: linear-gradient(90deg, rgba(0,0,0,.18), transparent);
  pointer-events: none; z-index: 5;
}

/* foto's niet los kunnen slepen; swipen bladert */
.sheet img { -webkit-user-drag: none; user-drag: none; }
body:not(.edit) #book { user-select: none; -webkit-user-select: none; touch-action: pan-y; }

#nav {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  background: rgba(10,20,34,.75); backdrop-filter: blur(8px);
  padding: 6px 10px; border-radius: 999px; color: #fff;
}
#nav button {
  background: none; border: 0; color: #fff; font-size: 26px; line-height: 1;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
}
#nav button:hover { background: rgba(255,255,255,.12); }
#nav button:disabled { opacity: .3; cursor: default; }
#nav #fullscreen { font-size: 18px; }
#dots { display: flex; gap: 6px; }
#dots button { width: 10px !important; height: 10px !important; padding: 0; background: rgba(255,255,255,.35) !important; }
#dots button.on { background: var(--orange) !important; }
#counter { font-size: 13px; opacity: .7; min-width: 3.5em; text-align: center; }

.print-only { display: none !important; }

/* ============================================================
   PAGINA — alle maten in cqw (procent van paginabreedte),
   zodat alles meeschaalt: telefoon, groot scherm én A4-PDF
   ============================================================ */
.page {
  position: absolute; inset: 0;
  container-type: size;
  padding: 6cqw 7cqw;
  font-size: 1.45cqw;
  line-height: 1.5;
}
.page h1 { font-size: 4.6cqw; line-height: 1.02; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; }
.page h2 { font-size: 3.6cqw; line-height: 1.08; font-weight: 800; letter-spacing: -.015em; color: var(--navy); margin-bottom: 2cqw; }
.page h3 { font-size: 1.9cqw; color: var(--navy); margin-bottom: .6cqw; }
.page p + p { margin-top: 1cqw; }
.kicker {
  font-size: 1.1cqw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 1.2cqw;
}

/* Animatie: alles met .anim schuift in zodra de pagina actief wordt */
.anim { opacity: 0; transform: translateY(1.6cqw); }
.sheet.current .anim, .print .anim {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--d, 0) * .15s + .25s);
}

/* ---------- Cover ---------- */
.cover { padding: 0; color: #fff; }
.cover .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
.cover::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(12,35,64,.94) 0%, rgba(12,35,64,.75) 28%, rgba(12,35,64,0) 48%);
}
.cover-text { position: absolute; z-index: 2; left: 6cqw; top: 8cqw; width: 34cqw; }
.cover .kicker { color: var(--yellow); }
.cover h1 { margin-bottom: 2.2cqw; }
.cover .lead { font-size: 1.75cqw; line-height: 1.4; max-width: 30cqw; }
.cover .hint { position: absolute; z-index: 2; left: 7cqw; bottom: 4cqw; font-size: 1.1cqw; opacity: .8; }
.sheet.current .cover .bg { animation: slowzoom 14s ease-out forwards; }
@keyframes slowzoom { from { transform: scale(1.06); } to { transform: scale(1); } }

/* ---------- Tekst + media ---------- */
.split { display: grid; grid-template-columns: 36% 1fr; gap: 5cqw; align-items: center; }
.split .media video, .video-print {
  display: block; width: 100%; border-radius: .8cqw; background: #000;
  box-shadow: 0 2cqw 4cqw -1.5cqw rgba(0,0,0,.45);
}

/* ---------- Hotspots ---------- */
.team { display: grid; grid-template-columns: 68% 1fr; grid-template-rows: auto 1fr; gap: 0 4cqw; }
.team .head { grid-column: 1 / -1; }
.hotspot-image { position: relative; align-self: center; }
.hotspot-image img { display: block; width: 100%; border-radius: .8cqw; }
.hotspot {
  position: absolute; transform: translate(-50%, -50%);
  width: 3cqw; height: 3cqw; border-radius: 50%; border: .3cqw solid #fff;
  background: var(--orange); cursor: pointer; color: #fff; font: 700 1.3cqw var(--font);
  box-shadow: 0 0 0 0 rgba(242,106,27,.7); animation: pulse 2s infinite;
}
.hotspot.on { background: var(--navy); animation: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 1.6cqw rgba(242,106,27,0); } 100% { box-shadow: 0 0 0 0 rgba(242,106,27,0); } }
.hotspot-panel { align-self: center; }
.hotspot-panel .card {
  background: #fff; border-left: .5cqw solid var(--orange); padding: 2cqw; border-radius: .6cqw;
  box-shadow: 0 1cqw 3cqw -1.5cqw rgba(0,0,0,.25); animation: cardIn .35s ease;
}
.hotspot-panel .empty { color: #6b7684; font-style: italic; }
@keyframes cardIn { from { opacity: 0; transform: translateX(1cqw); } }

/* ---------- Stappen ---------- */
.step-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; margin-top: 3cqw; }
.step-list li { background: #fff; padding: 2.4cqw; border-radius: .8cqw; border-top: .5cqw solid var(--orange); }
.step-list .num {
  display: inline-grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 800; font-size: 1.7cqw; margin-bottom: 1.4cqw;
}

/* ============================================================
   PDF-MODUS  (index.html?print)
   ============================================================ */
@page { size: 297mm 210mm; margin: 0; }
body.print { background: #fff; overflow: visible; height: auto; }
body.print #stage { display: block; padding: 0; height: auto; perspective: none; }
body.print #book { width: 297mm; aspect-ratio: auto; }
body.print .sheet {
  position: relative; visibility: visible; width: 297mm; height: 210mm;
  box-shadow: none; border-radius: 0; break-after: page; page-break-after: always;
}
body.print .sheet::after { display: none; }
body.print .online-only { display: none !important; }
body.print .print-only { display: flex !important; }
body.print .hotspot { animation: none; cursor: default; }
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* video → poster met play-knop, link en QR */
.video-print-wrap { display: flex; flex-direction: column; gap: 1.4cqw; }
.video-print { position: relative; aspect-ratio: auto; overflow: hidden; text-decoration: none; }
.video-print img { display: block; width: 100%; }
.video-print .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 8cqw; height: 8cqw; border-radius: 50%; background: rgba(242,106,27,.95);
  display: grid; place-items: center;
}
.video-print .play::before { content: ""; margin-left: .8cqw; border-left: 2.6cqw solid #fff; border-top: 1.6cqw solid transparent; border-bottom: 1.6cqw solid transparent; }
.online-link { display: flex; align-items: center; gap: 1.6cqw; font-size: 1.2cqw; line-height: 1.35; color: var(--ink); text-decoration: none; }
.online-link a { color: var(--orange); }
.qr { width: 7.5cqw; height: 7.5cqw; flex: none; }
.qr svg { width: 100%; height: 100%; display: block; }
.steps .online-link { position: absolute; right: 7cqw; bottom: 5cqw; }

/* hotspots → legenda */
.hotspot-legend { list-style: none; padding: 0; display: grid; gap: 1.2cqw; font-size: 1.2cqw; }
.hotspot-legend li { display: grid; grid-template-columns: 2.6cqw 1fr; gap: 1cqw; }
.hotspot-legend .n { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 700; display: grid; place-items: center; }
.hotspot-legend strong { color: var(--navy); }

/* klein scherm (telefoon staand) */
@media (max-width: 600px) and (orientation: portrait) {
  #stage { padding-bottom: 80px; }
}

/* ============================================================
   BEWERKMODUS  (?edit)
   ============================================================ */
body.edit #stage { padding-top: 56px; }
body.edit #book { width: min(94vw, (100vh - 150px) * 297 / 210); }
#editbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 46px;
  display: flex; align-items: center; gap: 8px; padding: 0 14px;
  background: #fff; color: var(--ink); font: 14px var(--font);
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
#editbar button, #editbar a {
  font: inherit; border: 1px solid #d0d5dc; background: #fff; border-radius: 6px;
  padding: 5px 10px; cursor: pointer; color: inherit; text-decoration: none;
}
#editbar button:hover, #editbar a:hover { background: #f1f3f6; }
#editbar .primary { background: var(--navy); color: #fff; border-color: var(--navy); }
#editbar .primary.dirty { background: var(--orange); border-color: var(--orange); }
#editbar .primary.dirty::after { content: " •"; }
#editbar .sep { width: 1px; height: 22px; background: #e1e4e8; }
#editmsg { margin-left: auto; color: #2a7a3b; }
#editmsg.bad { color: #c0392b; }
body.edit [contenteditable] { outline: 1px dashed transparent; outline-offset: .3cqw; border-radius: 2px; cursor: text; }
body.edit [contenteditable]:hover { outline-color: rgba(242,106,27,.7); }
body.edit [contenteditable]:focus { outline: 2px solid var(--orange); background: rgba(255,255,255,.08); }
body.edit .anim { opacity: 1 !important; transform: none !important; }
body.edit .hotspot { cursor: grab; animation: none; touch-action: none; }
#replace-float { position: fixed; z-index: 60; display: none; gap: 6px; }
#replace-float.show { display: flex; }
#replace-float button {
  font: 13px var(--font); background: rgba(12,35,64,.92); color: #fff; border: 0;
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
}
#replace-float button:hover { background: var(--orange); }
.edit-card { display: grid; gap: 1cqw; font-size: 1.1cqw; }
.edit-card label { display: grid; gap: .3cqw; font-weight: 600; color: var(--navy); }
.edit-card input, .edit-card textarea { font: 1.2cqw var(--font); padding: .6cqw; border: 1px solid #ccd; border-radius: 4px; resize: vertical; }
.edit-card .danger { justify-self: start; font: 1.05cqw var(--font); color: #c0392b; background: none; border: 1px solid #e3b3ad; border-radius: 4px; padding: .4cqw .8cqw; cursor: pointer; }
.edit-card .tip { color: #6b7684; font-size: 1cqw; }

/* ============================================================
   FLIPBOOKS: overzicht, velden, extra paginatypes
   ============================================================ */
#nav #home { color: #fff; text-decoration: none; font-size: 18px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; }
#nav #home:hover { background: rgba(255,255,255,.12); }
#nav #home[hidden] { display: none; }
#editbar > a { border: 0 !important; font-size: 18px; padding: 2px 6px !important; }
#editbar strong { max-width: 18em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Overzicht ---------- */
body.hub { overflow: auto; }
body.hub #nav { display: none; }
body.hub #stage { display: block; padding: 48px clamp(16px, 5vw, 64px); height: auto; perspective: none; }
body.hub #book { width: 100%; aspect-ratio: auto; max-width: 1280px; margin: 0 auto; color: #fff; }
.hub-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.hub-head h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
.hub-head .kicker { font-size: 13px; margin-bottom: 8px; color: var(--yellow); }
.hub-tools { display: flex; gap: 10px; }
.hub-tools button, .hub-card .actions a, .hub-card .actions button {
  font: 600 14px var(--font); border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff;
  padding: 8px 14px; border-radius: 8px; cursor: pointer; text-decoration: none;
}
.hub-tools button:hover, .hub-card .actions a:hover, .hub-card .actions button:hover { background: rgba(255,255,255,.1); }
.hub-tools .primary { background: var(--orange); border-color: var(--orange); }
.hub-tools .primary:hover { background: #ff7d33; }
#hubmsg { min-height: 1.4em; margin-bottom: 12px; color: #9fe0a8; }
#hubmsg.bad { color: #ff9b8f; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.hub-card { background: #fff; color: var(--ink); border-radius: 10px; overflow: hidden; box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); display: flex; flex-direction: column; }
.hub-card .thumb { display: block; aspect-ratio: 297 / 210; background: var(--navy) center / cover no-repeat; }
.hub-card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hub-card h3 { font-size: 18px; color: var(--navy); }
.hub-card .meta { font-size: 13px; color: #6b7684; }
.hub-card .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.hub-card .actions a, .hub-card .actions button { color: var(--navy); border-color: #d0d5dc; padding: 6px 11px; font-size: 13px; }
.hub-card .actions a:hover, .hub-card .actions button:hover { background: #f1f3f6; }
.hub-card .actions a:first-child { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- Velden ---------- */
body.edit .veld { background: rgba(217,224,33,.35); outline: 1px dashed rgba(12,35,64,.4); border-radius: 3px; padding: 0 .15em; cursor: help; }
#velden-panel {
  position: fixed; top: 56px; right: 16px; z-index: 70; width: 340px; max-height: calc(100vh - 80px); overflow: auto;
  background: #fff; color: var(--ink); border-radius: 10px; padding: 18px; font: 14px var(--font); box-shadow: 0 20px 50px rgba(0,0,0,.45);
  display: grid; gap: 10px;
}
#velden-panel h3 { color: var(--navy); }
#velden-panel .tip { color: #6b7684; font-size: 13px; }
#velden-panel .rows { display: grid; gap: 8px; }
#velden-panel label { display: grid; gap: 3px; font-weight: 600; font-size: 13px; color: var(--navy); }
#velden-panel input { font: 14px var(--font); padding: 7px 9px; border: 1px solid #ccd; border-radius: 6px; }
#velden-panel .add { display: flex; gap: 6px; }
#velden-panel .add input { flex: 1; }
#velden-panel button { font: 14px var(--font); padding: 7px 12px; border-radius: 6px; border: 1px solid #ccd; background: #fff; cursor: pointer; }
#velden-panel .close { justify-self: end; }

/* ---------- Paginatype: cover met gegevens (offerte) ---------- */
.cover .meta-line { position: absolute; z-index: 2; left: 6cqw; bottom: 5cqw; display: flex; gap: 3cqw; font-size: 1.2cqw; color: rgba(255,255,255,.85); }
.cover .meta-line strong { display: block; color: var(--yellow); font-size: .9cqw; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .2cqw; }

/* ---------- Paginatype: kaartjes (diensten) ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; margin-top: 2.5cqw; }
.cards .card-link {
  display: flex; flex-direction: column; background: #fff; border-radius: .8cqw; overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: 0 1cqw 2.4cqw -1.4cqw rgba(0,0,0,.3); transition: transform .2s;
}
.cards .card-link:hover { transform: translateY(-.4cqw); }
.cards .card-link img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cards .card-link > div { padding: 1.4cqw 1.6cqw 1.8cqw; }
.cards .card-title { font-size: 1.6cqw; font-weight: 800; color: var(--navy); margin-bottom: .5cqw; }
.cards .card-text { font-size: 1.15cqw; line-height: 1.45; color: #45505e; }
.cards .more { display: inline-block; margin-top: .8cqw; font-size: 1.1cqw; font-weight: 700; color: var(--orange); }

/* ---------- Paginatype: tabel (offerte) ---------- */
.price { width: 100%; border-collapse: collapse; margin-top: 2cqw; font-size: 1.35cqw; background: #fff; border-radius: .8cqw; overflow: hidden; }
.price th, .price td { text-align: left; padding: 1.1cqw 1.6cqw; border-bottom: 1px solid #e8e6e0; }
.price th { background: var(--navy); color: #fff; font-size: 1.05cqw; letter-spacing: .08em; text-transform: uppercase; }
.price td:last-child, .price th:last-child { text-align: right; white-space: nowrap; }
.price tr.total td { font-weight: 800; color: var(--navy); border-bottom: 0; background: #fbf3ec; }
.note { margin-top: 1.6cqw; font-size: 1.1cqw; color: #6b7684; }

/* ---------- Video inkorten (bewerkmodus) ---------- */
#trim-panel {
  position: fixed; top: 56px; right: 16px; z-index: 70; width: 380px;
  background: #fff; color: var(--ink); border-radius: 10px; padding: 18px; font: 14px var(--font);
  box-shadow: 0 20px 50px rgba(0,0,0,.45); display: grid; gap: 12px;
}
#trim-panel h3 { color: var(--navy); }
#trim-panel .tip { color: #6b7684; font-size: 13px; }
.trim-bar { position: relative; height: 34px; }
.trim-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 8px; border-radius: 4px; background: #e3e6ea; }
.trim-bar .sel { position: absolute; top: 13px; height: 8px; border-radius: 4px; background: var(--orange); }
.trim-bar input[type=range] { position: absolute; left: 0; width: 100%; top: 0; height: 34px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.trim-bar input[type=range]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 18px; height: 26px; border-radius: 4px; background: var(--navy); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: ew-resize; }
.trim-bar input[type=range]::-moz-range-thumb { pointer-events: auto; width: 14px; height: 22px; border-radius: 4px; background: var(--navy); border: 2px solid #fff; cursor: ew-resize; }
.trim-times { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.trim-times input { width: 64px; font: 13px var(--font); padding: 4px 6px; border: 1px solid #ccd; border-radius: 5px; }
.trim-times .len { color: #6b7684; font-size: 12px; text-align: center; }
#trim-panel .chk { display: flex; gap: 8px; align-items: center; font-size: 13px; }
#trim-panel .btns { display: flex; gap: 8px; justify-content: space-between; }
#trim-panel button { font: 14px var(--font); padding: 7px 12px; border-radius: 6px; border: 1px solid #ccd; background: #fff; cursor: pointer; }
#trim-panel button.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
body.edit .drop-on { outline: 4px dashed var(--orange) !important; outline-offset: -4px; }
#editbar { overflow-x: auto; scrollbar-width: thin; }
#editbar button, #editbar a, #editbar strong { white-space: nowrap; flex: none; }
#editmsg { flex: 1 0 auto; white-space: nowrap; text-align: right; }
.trim-times { flex-wrap: wrap; }
.trim-times .len { order: 3; width: 100%; }
.trim-times label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ============================================================
   SHOWCASE-PAGINA'S (AR-trainingen)
   ============================================================ */
.page .logo { position: absolute; z-index: 3; left: 6cqw; top: 4.2cqw; height: 4.4cqw; width: auto; }
.cover .logo ~ .cover-text { top: 13cqw; }
.caption { margin-top: 1cqw; font-size: 1.05cqw; color: #6b7684; }
.split.model, .split.data-page { grid-template-columns: 34% 1fr; }

/* tekst + twee staande beelden */
.duo { display: grid; grid-template-columns: 1fr 22cqw 22cqw; gap: 3cqw; align-items: center; }
.duo .portrait video, .duo .portrait img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: .8cqw; background: #000; box-shadow: 0 2cqw 4cqw -1.5cqw rgba(0,0,0,.45); }
body.print .duo .video-print img { aspect-ratio: 9 / 16; object-fit: cover; }
body.print .duo .portrait .online-link { font-size: 1cqw; }
.ticks { list-style: none; padding: 0; display: grid; gap: 1.2cqw; margin-top: 1cqw; }
.ticks li { position: relative; padding-left: 2.6cqw; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .35cqw; width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: var(--orange); box-shadow: inset 0 0 0 .4cqw #fff; outline: .15cqw solid var(--orange); }

/* 3D */
model-viewer { display: block; width: 100%; height: 38cqw; background: radial-gradient(circle at 50% 40%, #ffffff, #e9e6df); border-radius: .8cqw; --poster-color: transparent; }
.badge3d { position: absolute; right: 1.2cqw; top: 1.2cqw; background: var(--navy); color: #fff; font-weight: 800; font-size: 1.1cqw; padding: .4cqw .9cqw; border-radius: 99px; }
.model-print img { width: 100%; height: 30cqw; object-fit: contain; background: radial-gradient(circle at 50% 40%, #ffffff, #e9e6df); }

/* apparaten */
.lead-dark { font-size: 1.6cqw; max-width: 60cqw; color: #45505e; }
.devices { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.8cqw; margin-top: 3.5cqw; }
.device { background: #fff; border-radius: .8cqw; padding: 2.4cqw 1.6cqw; text-align: center; box-shadow: 0 1cqw 2.4cqw -1.4cqw rgba(0,0,0,.25); }
.device svg { width: 6cqw; height: 6cqw; fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; margin-bottom: 1.2cqw; }
.device .card-title { font-size: 1.6cqw; font-weight: 800; color: var(--navy); margin-bottom: .3cqw; }
.device .card-text { font-size: 1.1cqw; color: #6b7684; }
.device + .device { }

/* dashboard (voorbeeld) */
.dash { background: #fff; border-radius: .9cqw; padding: 2cqw; box-shadow: 0 2cqw 4cqw -2cqw rgba(0,0,0,.4); font-size: 1.1cqw; }
.dash-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.4cqw; }
.dash-top strong { font-size: 1.6cqw; color: var(--navy); }
.dash-top span { color: #6b7684; font-size: 1cqw; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw; margin-bottom: 1.6cqw; }
.kpis div { background: #f4f2ed; border-radius: .6cqw; padding: 1.1cqw 1.2cqw; }
.kpis b { display: block; font-size: 2.6cqw; line-height: 1; color: var(--navy); }
.kpis span { font-size: 1cqw; color: #6b7684; }
.bars { display: grid; gap: .8cqw; margin-bottom: 1.6cqw; }
.bars div { display: grid; grid-template-columns: 13cqw 1fr 3.5cqw; gap: 1cqw; align-items: center; }
.bars i { display: block; height: 1cqw; border-radius: 99px; background: linear-gradient(90deg, var(--orange) var(--v), #eceae4 var(--v)); }
.bars em { font-style: normal; font-weight: 700; color: var(--navy); text-align: right; }
.dash table { width: 100%; border-collapse: collapse; }
.dash th, .dash td { text-align: left; padding: .6cqw .4cqw; border-top: 1px solid #ecebe6; }
.dash th { font-size: .9cqw; color: #6b7684; text-transform: uppercase; letter-spacing: .08em; border-top: 0; }
.dash .ok { color: #2a7a3b; font-weight: 700; }
.dash .todo { color: var(--orange); font-weight: 700; }

/* klanten */
.logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw 2cqw; margin-top: 2.6cqw; }
.logos img { width: 100%; aspect-ratio: 3 / 1; object-fit: contain; background: #fff; border-radius: .8cqw; padding: 1.4cqw 2.4cqw; box-shadow: 0 1cqw 2.4cqw -1.4cqw rgba(0,0,0,.2); }

/* wie zijn wij */
.about { display: grid; grid-template-columns: 1fr 40%; gap: 4cqw; align-items: center; }
.about .logo-dark { height: 4.5cqw; width: auto; margin-bottom: 1.6cqw; display: block; }
.about h2 { margin-bottom: 1.2cqw; }
.crew { list-style: none; padding: 0; margin: 1.6cqw 0; display: grid; gap: .8cqw; }
.crew li { display: grid; }
.crew strong { color: var(--navy); font-size: 1.5cqw; }
.crew span { color: #6b7684; font-size: 1.15cqw; }
.contact { display: flex; gap: 1.6cqw; align-items: center; font-size: 1.2cqw; line-height: 1.45; }
.contact a { color: var(--orange); }
.about-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: .8cqw; box-shadow: 0 2cqw 4cqw -1.5cqw rgba(0,0,0,.45); }
.page.steps, .page.clients, .page.devices-page { display: flex; flex-direction: column; justify-content: center; }

/* ---------- Merk: gezicht + woordmerk, en watermerk ---------- */
.brand { display: flex; align-items: center; gap: 1.2cqw; }
.brand .face { height: 100%; width: auto; }
.brand .word { height: 46%; width: auto; }
.cover .brand.logo { height: 6cqw; }
.cover .brand.logo ~ .cover-text { top: 15cqw; }
.about .brand.dark { height: 4.6cqw; margin-bottom: 1.8cqw; }
.watermark { position: absolute; right: 2.4cqw; bottom: 2.2cqw; width: 3.2cqw; height: auto; opacity: .55; z-index: 4; pointer-events: none; }
.logos img.on-dark { background: var(--navy); }

/* ---------- Apparaat-frames (telefoon / laptop) om video of 3D ---------- */
.frame { position: relative; margin: 0 auto; }
.frame .frame-img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.frame .screen { position: absolute; overflow: hidden; background: #ece9e2; z-index: 1; }
.frame .screen > video, .frame .screen > img, .frame .screen > model-viewer, .frame .screen > .screen-link, .frame .screen > .screen-link img {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; aspect-ratio: auto; background: transparent;
}
.frame.phone { aspect-ratio: 1067 / 1914; height: 50cqw; }
.frame.phone .screen { left: 4.97%; top: 2.09%; width: 90.25%; height: 95.98%; border-radius: 12% / 6.5%; }
.frame.laptop { aspect-ratio: 1203 / 695; width: 100%; }
.frame.laptop .screen { left: 11.97%; top: 6.04%; width: 76.06%; height: 82.45%; }
.frame .screen model-viewer { background: radial-gradient(circle at 50% 40%, #ffffff, #e6e2d9); }
.screen-link { position: relative; }
.screen-link .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 7cqw; height: 7cqw; border-radius: 50%; background: rgba(242,106,27,.95); display: grid; place-items: center; }
.screen-link .play::before { content: ""; margin-left: .7cqw; border-left: 2.2cqw solid #fff; border-top: 1.4cqw solid transparent; border-bottom: 1.4cqw solid transparent; }
.frame-qr { margin-top: 1.2cqw; justify-content: center; font-size: 1cqw; }
.frame-qr .qr { width: 5.5cqw; height: 5.5cqw; }

/* Mr King-pagina */
.king { display: grid; grid-template-columns: 1fr auto 21cqw; gap: 3cqw; align-items: center; }
.king .photos { display: grid; gap: 1.6cqw; }
.king .photos img { width: 100%; border-radius: .6cqw; object-fit: cover; box-shadow: 0 1.4cqw 3cqw -1.4cqw rgba(0,0,0,.45); border: .5cqw solid #fff; }
.king .photos img:first-child { aspect-ratio: 4 / 5; transform: rotate(1.5deg); }
.king .photos img:last-child { aspect-ratio: 4 / 3; object-position: 50% 35%; transform: rotate(-1.5deg); }
.king .frame.phone { height: 52cqw; }

/* 3D-galerij */
.gallery { display: grid; grid-template-columns: 1fr auto; gap: 5cqw; align-items: center; }
.gallery .frame.phone { height: 54cqw; }
.chips { display: flex; flex-wrap: wrap; gap: .9cqw; margin-top: 2cqw; }
.chip { font: 600 1.15cqw var(--font); padding: .7cqw 1.3cqw; border-radius: 99px; border: .15cqw solid #d6d2c8; background: #fff; color: var(--navy); cursor: pointer; }
.chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip:hover { border-color: var(--orange); }
.split .frame.laptop { width: 100%; }

/* ---------- Interactief scenario ---------- */
.scenario { display: grid; grid-template-columns: 34% 1fr; gap: 4cqw; align-items: center; }
.scenario .q-block, .scenario .fb, .scenario .again { display: none; }
.scenario.asking .q-block { display: block; animation: cardIn .35s ease; }
.scenario .fb.show { display: block; animation: cardIn .35s ease; }
.scenario.answered .again { display: inline-block; }
.scenario .q { font-weight: 800; color: var(--navy); font-size: 1.6cqw; margin: 1.6cqw 0 1cqw; }
.answers { display: grid; gap: .8cqw; }
.answer { font: 700 1.35cqw var(--font); text-align: left; padding: 1cqw 1.4cqw; border-radius: .7cqw; border: .2cqw solid var(--navy); background: #fff; color: var(--navy); cursor: pointer; }
.answer:hover:not(:disabled) { background: var(--navy); color: #fff; }
.scenario.right .answer.picked { background: #2a7a3b; border-color: #2a7a3b; color: #fff; }
.scenario.wrong .answer.picked { background: #c0392b; border-color: #c0392b; color: #fff; }
.answer:disabled:not(.picked) { opacity: .45; cursor: default; }
.scenario .fb { margin-top: 1.4cqw; padding: 1.2cqw 1.4cqw; border-radius: .7cqw; background: #fff; border-left: .5cqw solid #2a7a3b; font-size: 1.2cqw; }
.scenario .fb[data-for]:not([data-correct]) { }
.scenario.wrong .fb.show { border-left-color: #c0392b; }
.again { margin-top: 1.2cqw; font: 600 1.1cqw var(--font); background: none; border: 0; color: var(--orange); cursor: pointer; padding: 0; }
.hs3d {
  font: 700 1.05cqw var(--font); color: #fff; background: var(--orange); border: .25cqw solid #fff; border-radius: 99px;
  padding: .45cqw 1cqw; cursor: pointer; box-shadow: 0 0 0 0 rgba(242,106,27,.7); animation: pulse 2s infinite; white-space: nowrap;
}
.scenario.asking .hs3d { animation: none; opacity: .75; }
body.edit .scenario .q-block, body.edit .scenario .fb { display: block; }
body.print .scenario .q-block { display: block; }
body.print .hs3d, body.print .again { display: none; }
.king .photos.landscape img:first-child, .king .photos.landscape img:last-child { aspect-ratio: 4 / 3; object-position: 50% 50%; }
.king .ticks { font-size: 1.25cqw; gap: .7cqw; }

/* klantlogo's als link */
.logos .logo-link { display: block; border-radius: .8cqw; transition: transform .2s, box-shadow .2s; }
.logos .logo-link:hover { transform: translateY(-.3cqw); }
.logos .logo-link img { width: 100%; }

/* Mr King & Ron: tweede foto is een poster, tekst onderin laten zien */
.king .photos img.poster-crop { aspect-ratio: 4 / 5; object-position: 50% 78%; }

/* Politie: grotere foto's */
.king.wide-photos { grid-template-columns: 25cqw auto 1fr; gap: 2.2cqw; }
.king.wide-photos .frame.phone { height: 38cqw; }
.king.wide-photos .photos img { aspect-ratio: 16 / 10 !important; transform: none !important; }
.photo-note { font-size: 1.05cqw; color: #6b7684; font-style: italic; margin-top: -.4cqw; }

/* Actemium: laptop + telefoon over elkaar, fotorij */
.combo-page { display: grid; grid-template-columns: 34% 1fr; gap: 4cqw; align-items: center; }
.combo { position: relative; padding-right: 5cqw; padding-bottom: 4cqw; }
.combo .frame.phone { position: absolute; right: 0; bottom: 0; height: 30cqw; z-index: 3; filter: drop-shadow(0 1.5cqw 2cqw rgba(0,0,0,.35)); }
.photo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw; margin-top: 1.8cqw; }
.photo-row img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: .5cqw; border: .35cqw solid #fff; box-shadow: 0 1cqw 2cqw -1.2cqw rgba(0,0,0,.4); }
body.print .combo .frame-qr { display: none; }
.combo .online-link { margin-top: 2cqw; }
.king.wide-photos .photos { gap: 1.2cqw; }

/* Hotspot-kaart met 3D-scène */
.hotspot-panel .card.with-model { padding: 0 0 1.6cqw; overflow: hidden; }
.hotspot-panel .card.with-model h3, .hotspot-panel .card.with-model p { padding: 0 1.8cqw; }
.hotspot-panel .card.with-model h3 { margin-top: 1.2cqw; }
.hs-model { display: block; width: 100%; height: 19cqw; background: radial-gradient(circle at 50% 40%, #ffffff, #e9e5dc); }
.hotspot-legend li { grid-template-columns: 2.6cqw 1fr 7cqw; align-items: start; }
.hs-thumb { width: 7cqw; height: 5.5cqw; object-fit: contain; background: #fff; border-radius: .4cqw; }
.team .hotspot-panel { align-self: center; }
.zones-legend { display: none; gap: .8cqw; flex-wrap: wrap; margin-top: 1.2cqw; font-size: 1.05cqw; font-weight: 700; }
.scenario.zones .zones-legend { display: flex; animation: cardIn .35s ease; }
.zones-legend .z { display: inline-flex; align-items: center; gap: .5cqw; padding: .4cqw .9cqw; background: #fff; border-radius: 99px; }
.zones-legend .z::before { content: ""; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; border: .35cqw solid currentColor; }
.zones-legend .red { color: #db1f1a; } .zones-legend .yellow { color: #c79a00; } .zones-legend .green { color: #1f9a3f; }

/* Data pages: mini steps + results page with pies and scores */
.steps-mini { list-style: none; padding: 0; margin: 1.6cqw 0 0; display: flex; gap: .5cqw; flex-wrap: nowrap; white-space: nowrap; font-size: .9cqw; font-weight: 600; }
.steps-mini li { display: inline-flex; align-items: center; gap: .6cqw; background: #fff; border-radius: 99px; padding: .45cqw 1cqw .45cqw .45cqw; }
.steps-mini b { display: grid; place-items: center; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--orange); color: #fff; font-size: .95cqw; }
.results-page { display: grid; grid-template-columns: 1fr 40%; gap: 3cqw; align-items: center; }
.results-page .frame.laptop { margin-top: 1.4cqw; width: 92%; margin-left: 0; }
.results-page h2 { margin-bottom: .6cqw; }
.results-side { display: flex; flex-direction: column; gap: 1cqw; }
.pie-card { background: #fff; border-radius: .9cqw; padding: 1.2cqw 1.4cqw; box-shadow: 0 1.4cqw 3cqw -2cqw rgba(0,0,0,.35); }
.pie-card h4 { margin: 0 0 .8cqw; font-size: 1.1cqw; line-height: 1.3; color: var(--navy); }
.pie-card h4 span { float: right; font-weight: 500; color: #6b7684; font-size: .9cqw; }
.pie-row { display: flex; align-items: center; gap: 1.4cqw; }
.pie { flex: 0 0 auto; width: 6.4cqw; aspect-ratio: 1; border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 38%, #000 39%); mask: radial-gradient(circle, transparent 38%, #000 39%); }
.pie-legend { list-style: none; margin: 0; padding: 0; font-size: .95cqw; display: grid; gap: .4cqw; }
.pie-legend li { display: flex; align-items: baseline; gap: .5cqw; flex-wrap: wrap; }
.pie-legend i { width: .8cqw; height: .8cqw; border-radius: 50%; flex: 0 0 auto; transform: translateY(.05cqw); }
.pie-legend b { margin-left: auto; padding-left: .6cqw; }
.pie-legend em { flex-basis: 100%; padding-left: 1.3cqw; color: #1f9a3f; font-style: normal; font-size: .85cqw; font-weight: 600; }
.score { display: grid; grid-template-columns: 4.5cqw 1fr 3cqw; align-items: center; gap: .8cqw; font-size: .95cqw; margin-top: .45cqw; }
.score i { height: .7cqw; border-radius: 99px; background: linear-gradient(to right, var(--navy) var(--v), #ecebe6 var(--v)); }
.score b { text-align: right; }

/* Hotspot page: once a character is picked, the photo shrinks to the bottom left and the 3D view gets the room */
.team { transition: grid-template-columns .5s ease; }
.team.picked { grid-template-columns: 27% 1fr; gap: 0 3cqw; }
.team.picked .hotspot-image { align-self: end; }
.team.picked .hotspot { width: 2.2cqw; height: 2.2cqw; font-size: 1cqw; border-width: .2cqw; }
.team.picked .hotspot-panel { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.team.picked .hotspot-panel .card.with-model { display: grid; grid-template-columns: 1fr 30%; grid-template-rows: 1fr auto; padding: 0; }
.team.picked .hs-model { grid-row: 1 / 3; height: 44cqw; }
.team.picked .hotspot-panel .card.with-model h3 { align-self: end; margin: 0 0 .6cqw; padding: 0 1.8cqw; font-size: 2cqw; }
.team.picked .hotspot-panel .card.with-model p { margin: 0 0 2cqw; font-size: 1.2cqw; }
.score { grid-template-columns: 9.5cqw 1fr 2.6cqw; }
.score span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pie-legend em.who { color: #6b7684; font-weight: 500; }
.pie-card .also { margin: .8cqw 0 0; font-size: .9cqw; color: #6b7684; }

/* Foto vergroten: springt op z'n plek ~30% groter, licht gedraaid */
img.zoomable { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 1000; display: none; cursor: zoom-out; background: rgba(10,16,26,.18); }
.lightbox.open { display: block; animation: lbFade .2s ease; }
.lightbox figure { position: absolute; margin: 0; padding: 7px 7px 0; background: #fff; border-radius: 6px;
  box-shadow: 0 24px 60px -10px rgba(0,0,0,.55); transform: rotate(var(--rot)); animation: lbPop .28s cubic-bezier(.2,.9,.3,1.2); }
.lightbox img { display: block; object-fit: contain; border-radius: 3px; }
.lightbox figcaption { font: 500 15px/1.35 var(--font); color: #24303d; padding: 10px 4px 12px; text-align: center; }
.lightbox figcaption:empty { padding: 0 0 7px; }
@keyframes lbPop { from { transform: scale(var(--from)) rotate(0deg); opacity: .6; } }
@keyframes lbFade { from { background: transparent; } }
body.print .lightbox { display: none !important; }

/* Hegeman: projectiescherm + telefoon */
.frame.wall { aspect-ratio: 1080 / 1000; width: 62%; }
.frame.wall .screen { inset: 0; border-radius: .8cqw; border: .5cqw solid #1b1f24; box-shadow: 0 2cqw 4cqw -2cqw rgba(0,0,0,.45); }
.frame.wall .screen > video { object-fit: cover; }
.photo-row.four { grid-template-columns: repeat(4, 1fr); }

/* Hotspot page: intro text in the panel until a colleague is picked */
.hotspot-intro { display: none; }
body.edit .hotspot-intro { display: block; max-width: 60cqw; margin-top: 1cqw; outline: 1px dashed rgba(242,106,27,.5); padding: .6cqw; }
.intro-card { animation: cardIn .35s ease; }
.intro-card h3 { font-size: 2.1cqw; line-height: 1.2; color: var(--navy); margin: 0 0 1cqw; }
.intro-card p { font-size: 1.3cqw; line-height: 1.55; margin: 0 0 1.2cqw; }
.intro-card .hint { display: inline-flex; align-items: center; gap: .6cqw; font-weight: 700; color: var(--orange); font-size: 1.15cqw; }
.intro-card .hint::before { content: ""; width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 .25cqw #fff, 0 0 0 .5cqw rgba(242,106,27,.35); }

/* Paginanummer, alleen in de PDF */
.page-num { position: absolute; left: 50%; bottom: 1.6cqw; transform: translateX(-50%); z-index: 5; font-size: .95cqw; font-weight: 600; letter-spacing: .05em; color: #6b7684; background: rgba(255,255,255,.75); padding: .2cqw .8cqw; border-radius: 99px; }

/* Eigen AR-knop (opent de XR-app) */
.ar-own { position: absolute; right: 1cqw; bottom: 1cqw; z-index: 3; display: inline-flex; align-items: center; gap: .5cqw; padding: .55cqw 1.1cqw; border-radius: 99px; background: var(--orange); color: #fff; font-weight: 700; font-size: 1cqw; text-decoration: none; box-shadow: 0 .6cqw 1.4cqw -.6cqw rgba(0,0,0,.5); }
.ar-own::before { content: ""; width: 1.1cqw; height: 1.1cqw; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 3 7v10l9 5 9-5V7l-9-5zm0 2.3L18.6 8 12 11.7 5.4 8 12 4.3zM5 9.7l6 3.4v6.6l-6-3.4V9.7zm8 10v-6.6l6-3.4v6.6l-6 3.4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 3 7v10l9 5 9-5V7l-9-5zm0 2.3L18.6 8 12 11.7 5.4 8 12 4.3zM5 9.7l6 3.4v6.6l-6-3.4V9.7zm8 10v-6.6l6-3.4v6.6l-6 3.4z'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (pointer: coarse) { .ar-own { font-size: 13px; padding: 8px 14px; gap: 6px; } .ar-own::before { width: 16px; height: 16px; } }

/* AR op de computer: QR-code om op je telefoon in AR te kijken */
.ar-qr-pop { position: fixed; inset: 0; z-index: 1001; display: none; align-items: center; justify-content: center; background: rgba(10,16,26,.55); cursor: pointer; }
.ar-qr-pop.open { display: flex; animation: lbFade .2s ease; }
.ar-qr-card { background: #fff; border-radius: 14px; padding: 26px 28px 20px; width: 300px; text-align: center; box-shadow: 0 30px 70px -20px rgba(0,0,0,.6); font-family: var(--font); color: #14233a; animation: lbPop .25s cubic-bezier(.2,.9,.3,1.2); --rot: 0deg; --from: .9; }
.ar-qr-card .qr { width: 220px; height: 220px; margin: 0 auto 14px; }
.ar-qr-card .qr svg { width: 100%; height: 100%; display: block; }
.ar-qr-card p { margin: 0 0 8px; font-size: 15px; line-height: 1.35; }
.ar-qr-card a { font-size: 11px; color: #6b7684; word-break: break-all; }

/* Landingspagina na het scannen: één model, grote AR-knop */
body.ar-landing { background: #f4f2ec; }
body.ar-landing #stage { perspective: none; padding: 0; }
body.ar-landing #nav { display: none; }
body.ar-landing #book { position: fixed; inset: 0; width: auto; aspect-ratio: auto; display: flex; flex-direction: column; }
body.ar-landing model-viewer { flex: 1; width: 100%; --poster-color: transparent; }
.ar-big { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); border: 0; border-radius: 99px; padding: 16px 34px; font: 700 18px/1 var(--font); background: var(--orange); color: #fff; box-shadow: 0 10px 30px -8px rgba(0,0,0,.45); }
.ar-tip { margin: 0; padding: 12px 20px 22px; text-align: center; font: 500 14px/1.4 var(--font); color: #4a5563; }

/* ============================================================
   TELEFOON  (body.phone: kleinste schermzijde ≤ 600px, of ?phone)
   Op de computer doen .pv/.pvc niets. Op een telefoon is .pvc --k keer zo breed als het scherm,
   zodat 1cqw ≈ 10px: tekst wordt leesbaar groot, de pagina scrolt verticaal en
   staand (body.portrait) komen kolommen onder elkaar.
   ============================================================ */
.pv, .pvc { display: contents; }
body.phone { --navh: 50px; }
body.phone:not(.portrait) { --navh: 44px; }
body.phone #stage { display: block; padding: 0; height: 100%; perspective: 1600px; }
body.phone #book { width: 100vw; height: calc(100dvh - var(--navh)); aspect-ratio: auto; }
body.phone .sheet { border-radius: 0; box-shadow: none; }
body.phone .sheet::after { display: none; }
body.phone .pv { display: block; position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.phone .pvc { display: block; width: calc(100% * var(--k)); container-type: inline-size; }
body.phone .page { position: relative; inset: auto; width: calc(100% / var(--k)); min-height: calc(100dvh - var(--navh)); container-type: normal; padding: 3.2cqw 2.4cqw 5cqw; font-size: 1.5cqw; }
body.phone .page h1 { font-size: 3.6cqw; }
body.phone .page h2 { font-size: 2.6cqw; margin-bottom: 1.4cqw; }
body.phone .page h3 { font-size: 1.9cqw; }
body.phone .kicker { font-size: 1.2cqw; margin-bottom: .8cqw; }
body.phone .watermark { right: 1.6cqw; bottom: 1.4cqw; width: 2.8cqw; }

/* navigatie compact onderin */
body.phone #nav { bottom: calc((var(--navh) - 40px) / 2); padding: 2px 8px; gap: 4px; }
body.phone #nav button { width: 36px; height: 36px; font-size: 24px; }
body.phone #dots { display: none; }

/* kleine tekst wat groter */
body.phone .caption, body.phone .photo-note { font-size: 1.25cqw; }
body.phone .chip { font-size: 1.35cqw; padding: .8cqw 1.4cqw; }
body.phone .king .ticks { font-size: 1.5cqw; }
body.phone .answer { font-size: 1.6cqw; padding: 1.1cqw 1.4cqw; }
body.phone .scenario .q { font-size: 1.8cqw; }
body.phone .scenario .fb { font-size: 1.5cqw; }
body.phone .again { font-size: 1.4cqw; }
body.phone .hs3d { font-size: 1.3cqw; padding: .5cqw 1.1cqw; }
body.phone .zones-legend { font-size: 1.3cqw; }
body.phone .steps-mini { font-size: 1.2cqw; flex-wrap: wrap; white-space: normal; gap: .6cqw; }
body.phone .steps-mini b { width: 2.2cqw; height: 2.2cqw; font-size: 1.15cqw; }
body.phone .pie-card h4 { font-size: 1.4cqw; }
body.phone .pie-card h4 span { font-size: 1.15cqw; }
body.phone .pie { width: 8cqw; }
body.phone .pie-legend { font-size: 1.25cqw; }
body.phone .pie-legend i { width: 1cqw; height: 1cqw; }
body.phone .pie-legend em { font-size: 1.1cqw; }
body.phone .score { font-size: 1.25cqw; grid-template-columns: 13cqw 1fr 3.6cqw; }
body.phone .score i { height: .9cqw; }
body.phone .pie-card .also { font-size: 1.15cqw; }
body.phone .dash { font-size: 1.3cqw; }
body.phone .dash th { font-size: 1.1cqw; }
body.phone .dash-top span, body.phone .kpis span { font-size: 1.15cqw; }
body.phone .bars div { grid-template-columns: 15cqw 1fr 4.5cqw; }
body.phone .crew strong { font-size: 1.7cqw; }
body.phone .crew span { font-size: 1.35cqw; }
body.phone .contact { font-size: 1.4cqw; }
body.phone .intro-card h3 { font-size: 2.1cqw; }
body.phone .intro-card p { font-size: 1.5cqw; }
body.phone .intro-card .hint { font-size: 1.4cqw; }
body.phone .device .card-text { font-size: 1.3cqw; }
body.phone .device .card-title { font-size: 1.7cqw; }
body.phone .hotspot-panel .card.with-model p, body.phone .team.picked .hotspot-panel .card.with-model p { font-size: 1.5cqw; }
body.phone .team.picked .hotspot { width: 3cqw; height: 3cqw; font-size: 1.3cqw; border-width: .3cqw; }

/* cover: foto over het hele scherm */
body.phone .cover { min-height: calc(100dvh - var(--navh)); }
body.phone .cover h1 { font-size: 3.8cqw; margin-bottom: 1.4cqw; }
body.phone .cover .lead { font-size: 1.6cqw; max-width: 46cqw; }
body.phone .cover .brand.logo { height: 5cqw; left: 2.4cqw; top: 2.4cqw; }
body.phone .cover .brand.logo ~ .cover-text, body.phone .cover-text { top: 10cqw; left: 2.4cqw; width: 44cqw; }
body.phone .cover .hint { left: 2.4cqw; bottom: 2cqw; font-size: 1.2cqw; }

/* liggend: twee kolommen blijven, beelden passen in de schermhoogte */
body.phone:not(.portrait) .frame.phone { height: min(50cqw, calc(100dvh - var(--navh) - 7cqw)) !important; }
body.phone:not(.portrait) model-viewer { height: min(38cqw, calc(100dvh - var(--navh) - 8cqw)); }
body.phone:not(.portrait) .frame model-viewer, body.phone:not(.portrait) .hs-model { height: 100%; }
body.phone:not(.portrait) .hotspot-panel .hs-model { height: min(26cqw, calc(100dvh - var(--navh) - 14cqw)); }
body.phone:not(.portrait) .team.picked .hs-model { height: min(44cqw, calc(100dvh - var(--navh) - 6cqw)); }
body.phone:not(.portrait) .combo .frame.phone { height: min(30cqw, calc(100dvh - var(--navh) - 10cqw)) !important; }
body.phone:not(.portrait) .about-img img { aspect-ratio: auto; max-height: calc(100dvh - var(--navh) - 6cqw); }

/* staand: alles onder elkaar, beeld over de volle breedte */
body.phone.portrait .split, body.phone.portrait .team, body.phone.portrait .king, body.phone.portrait .gallery,
body.phone.portrait .scenario, body.phone.portrait .combo-page, body.phone.portrait .results-page,
body.phone.portrait .about, body.phone.portrait .duo { display: flex; flex-direction: column; align-items: stretch; gap: 3cqw; }
body.phone.portrait .page.steps, body.phone.portrait .page.clients, body.phone.portrait .page.devices-page { justify-content: flex-start; }
body.phone.portrait .cover .bg { object-position: 32% 50%; }
body.phone.portrait .cover::before { background: linear-gradient(0deg, rgba(12,35,64,.96) 0%, rgba(12,35,64,.82) 34%, rgba(12,35,64,0) 60%); }
body.phone.portrait .cover .brand.logo ~ .cover-text, body.phone.portrait .cover-text { top: auto; bottom: 7cqw; right: 2.4cqw; width: auto; }
body.phone.portrait .cover .lead { max-width: none; }
body.phone.portrait .king .photos { grid-template-columns: 1fr 1fr; align-items: start; }
body.phone.portrait .king .photos img { transform: none !important; }
body.phone.portrait .frame.phone, body.phone.portrait .king .frame.phone, body.phone.portrait .gallery .frame.phone,
body.phone.portrait .king.wide-photos .frame.phone { height: 52cqw; }
body.phone.portrait .combo { padding: 0; display: flex; flex-direction: column; align-items: center; gap: 3cqw; }
body.phone.portrait .combo .frame.phone { position: relative; right: auto; bottom: auto; height: 50cqw; }
body.phone.portrait .frame.wall { width: 100%; }
body.phone.portrait .photo-row.four { grid-template-columns: 1fr 1fr; }
body.phone.portrait .step-list { grid-template-columns: 1fr; gap: 2cqw; }
body.phone.portrait .devices { grid-template-columns: 1fr 1fr; gap: 1.6cqw; }
body.phone.portrait .logos { grid-template-columns: 1fr 1fr; gap: 1.4cqw; }
body.phone.portrait .cards { grid-template-columns: 1fr; }
body.phone.portrait .results-page .frame.laptop { width: 100%; }
body.phone.portrait .hs-model { height: 36cqw; }
body.phone.portrait .team.picked .hotspot-panel .card.with-model { display: block; padding: 0 0 1.6cqw; }
body.phone.portrait .team.picked .hs-model { height: 46cqw; }
body.phone.portrait .team.picked .hotspot-panel .card.with-model h3 { margin: 1.2cqw 0 .6cqw; }
body.phone.portrait .about-img img { aspect-ratio: 4 / 4.4; }
/* scenario: het 3D-beeld blijft bovenin staan (zonder laptoprand) terwijl je de vraag leest */
body.phone.portrait .scenario > div:not(.text) { order: -1; position: sticky; top: 0; z-index: 4; margin: -3.2cqw -2.4cqw 0; padding: 0; background: var(--paper); box-shadow: 0 1cqw 2cqw -1.5cqw rgba(0,0,0,.35); }
body.phone.portrait .scenario .frame.laptop { aspect-ratio: 4 / 3; }
body.phone.portrait .scenario .frame.laptop .frame-img { display: none; }
body.phone.portrait .scenario .frame.laptop .screen { left: 0; top: 0; width: 100%; height: 100%; }
/* staand: groepsfoto met bolletjes ingezoomd op de personen (de foto is breder dan het scherm, de randen vallen weg) */
body.phone.portrait .team .hotspot-image { width: var(--phone-zoom, 175%); margin-left: calc(var(--phone-x, -37.5%)); align-self: auto; }
body.phone.portrait .team.picked .hotspot-image { width: 100%; margin-left: 0; }
body.phone.portrait .team.picked .hotspot-image img { border-radius: .8cqw; }
body.phone.portrait .team .hotspot-image img { border-radius: 0; }
body.phone.portrait .combo .frame.laptop { width: 100%; }
body.phone .logos img { padding: 1cqw 1.6cqw; }
body.phone.portrait .pie-row { align-items: flex-start; }