/* ============================================================================
   Sterenberg Software: de opmaak
   ----------------------------------------------------------------------------
   Eén donkere, rustige achtergrond met twee zachte lichtvelden; alles wat
   op de pagina staat is een glazen paneel daaroverheen. Het enige beeld is de
   software zelf: een laptop op een laptop, een telefoon op een telefoon.
   Geen beweging behalve wat iets laat zien; alles achter prefers-reduced-motion.
   ========================================================================= */

/* Lettertypen: zelf meegeleverd in assets/fonts (zelfde bestanden als Google Fonts serveert,
   variabel, dus één bestand per familie voor alle gewichten). Zo gaat er geen verzoek naar Google.
   Licentie: SIL Open Font License, zie assets/fonts/OFL-*.txt. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("assets/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("assets/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --bg: #0f1424;
  --tekst: #eef1f7;
  --tekst-2: #c4cbd9;
  --muted: #8e99ae;
  --lijn: rgba(255, 255, 255, 0.10);
  --lijn-2: rgba(255, 255, 255, 0.18);
  --glas: rgba(255, 255, 255, 0.055);
  --glas-2: rgba(255, 255, 255, 0.10);
  --wit: #ffffff;
  --knop-bg: #ffffff; --knop-tekst: #0f1424; --knop-hover: #e6ebf5;
  --paneel-1: rgba(255, 255, 255, 0.085); --paneel-2: rgba(255, 255, 255, 0.04);
  --uitgelicht-1: rgba(255, 255, 255, 0.15); --uitgelicht-2: rgba(255, 255, 255, 0.07);
  --uitgelicht-kolom: rgba(255, 255, 255, 0.055);
  --kop-bg: rgba(15, 20, 36, 0.55);
  --teken-1: #2e3d6b; --teken-2: #131a30;
  --vink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  --font-kop: "Schibsted Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-tekst: "Inter", "Segoe UI", system-ui, sans-serif;
  --r-groot: 24px;
  --r: 16px;
  --kop-hoogte: 68px;
}

/* De lichte uitvoering. Actief als het apparaat licht wil (zie onderaan) of als de bezoeker
   met de knop in de kop voor licht koos (data-stijl="licht", onthouden in localStorage). */
:root[data-stijl="licht"] {
  color-scheme: light;
  --bg: #eef1f6;
  --tekst: #10141f; --tekst-2: #3a4356; --muted: #6b7486;
  --lijn: rgba(16, 20, 31, 0.10); --lijn-2: rgba(16, 20, 31, 0.18);
  --glas: rgba(255, 255, 255, 0.50); --glas-2: rgba(255, 255, 255, 0.72);
  --knop-bg: #10141f; --knop-tekst: #ffffff; --knop-hover: #262d3f;
  --paneel-1: rgba(255, 255, 255, 0.74); --paneel-2: rgba(255, 255, 255, 0.52);
  --uitgelicht-1: rgba(255, 255, 255, 0.96); --uitgelicht-2: rgba(255, 255, 255, 0.82);
  --uitgelicht-kolom: rgba(255, 255, 255, 0.8);
  --kop-bg: rgba(238, 241, 246, 0.65);
  --teken-1: #1d2542; --teken-2: #0f1424;
  --vink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310141f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
:root[data-stijl="licht"] body::before {
  background:
    radial-gradient(55vw 55vh at 22% 18%, rgba(76, 118, 214, 0.30), transparent 62%),
    radial-gradient(45vw 45vh at 84% 28%, rgba(214, 160, 84, 0.24), transparent 62%),
    radial-gradient(70vw 60vh at 55% 100%, rgba(58, 92, 178, 0.22), transparent 62%);
}
:root[data-stijl="licht"] body::after { opacity: 0.03; }
:root[data-stijl="licht"] .paneel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 30px 60px -44px rgba(16, 20, 31, 0.35); }
:root[data-stijl="licht"] .telefoon-rand, :root[data-stijl="licht"] .mini { box-shadow: 0 40px 70px -36px rgba(16, 20, 31, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
/* de tablet in de hero (alleen op een tablet; op een laptop blijft het scherm zoals het is) */
@media (pointer: coarse) and (min-width: 600px) {
  :root[data-stijl="licht"] .laptop-scherm { box-shadow: 0 50px 90px -44px rgba(16, 20, 31, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
}

/* ------------------------------------------------------------------ basis */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--kop-hoogte) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--tekst-2);
  font-family: var(--font-tekst); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* De twee lichtvelden en een heel fijne korrel, achter alles. */
body::before {
  content: ""; position: fixed; z-index: -2; inset: -30vh -30vw; pointer-events: none;
  background:
    radial-gradient(55vw 55vh at 22% 18%, rgba(76, 118, 214, 0.42), transparent 62%),
    radial-gradient(45vw 45vh at 84% 28%, rgba(214, 160, 84, 0.17), transparent 62%),
    radial-gradient(70vw 60vh at 55% 100%, rgba(58, 92, 178, 0.30), transparent 62%);
  animation: drijf 46s ease-in-out infinite alternate;
}
body::after {
  content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes drijf {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-4vw, 3vh, 0); }
}
img, svg { max-width: 100%; display: block; }
[hidden] { display: none !important; }
.iconen { position: absolute; }
a { color: var(--tekst); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-kop); color: var(--tekst); margin: 0 0 0.45em; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 6.6vw, 4.8rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.75rem); font-weight: 600; line-height: 1.1; }
h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 720px) { .wrap { padding-inline: 32px; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--knop-bg); color: var(--knop-tekst); padding: 10px 14px; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--tekst); outline-offset: 3px; border-radius: 6px; }
.intro { font-size: 1.15rem; line-height: 1.55; color: var(--tekst-2); max-width: 60ch; }
.klein { font-size: 0.92rem; color: var(--muted); }
.r { text-align: right; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.ic-groot { width: 26px; height: 26px; stroke-width: 1.5; color: var(--tekst); }

/* ------------------------------------------------------------------- glas */
.paneel {
  background: linear-gradient(180deg, var(--paneel-1), var(--paneel-2));
  border: 1px solid var(--lijn); border-radius: var(--r-groot);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 30px 60px -44px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.chip {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--glas-2); border: 1px solid var(--lijn-2); color: var(--tekst);
  font-size: 0.85rem; font-weight: 500; line-height: 1;
}
.chip-wit { background: var(--knop-bg); border-color: var(--knop-bg); color: var(--knop-tekst); font-weight: 600; }

/* ---------------------------------------------------------------- knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 1rem; line-height: 1.2; white-space: nowrap;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.knop-wit { background: var(--knop-bg); color: var(--knop-tekst); }
.knop-wit:hover { background: var(--knop-hover); }
.knop-glas { background: var(--glas-2); border: 1px solid var(--lijn-2); color: var(--tekst); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.knop-glas:hover { background: rgba(255, 255, 255, 0.16); }
.knop-klein { min-height: 40px; padding: 0 16px; font-size: 0.95rem; }
.knop-breed { width: 100%; }

/* -------------------------------------------------------------------- kop */
.kop {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: var(--kop-bg);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--lijn);
}
.kop-rij { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: var(--kop-hoogte); }
.merk { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--tekst); }
.merk-teken { width: 34px; height: 34px; flex: 0 0 auto; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35)); }
#lg-tegel stop:first-child { stop-color: var(--teken-1); }
#lg-tegel stop:last-child { stop-color: var(--teken-2); }
.merk-naam { font-family: var(--font-kop); font-size: 1.1rem; color: var(--muted); letter-spacing: -0.01em; }
.merk-naam b { font-weight: 600; color: var(--tekst); }
/* smalle telefoons (onder 360): kleiner merk en minder ruimte, anders valt de menuknop naar een tweede regel */
@media (max-width: 359px) {
  .kop-rij { column-gap: 4px; }
  .merk { gap: 8px; }
  .merk-teken { width: 30px; height: 30px; }
  .merk-naam { font-size: 0.95rem; }
}
.stijlknop { order: 2; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; background: var(--glas); border: 1px solid var(--lijn); color: var(--tekst); display: grid; place-items: center; cursor: pointer; padding: 0; }
.stijlknop:hover { background: var(--glas-2); }
.stijlknop .ic { width: 20px; height: 20px; }
.stijlknop .ic-maan { display: none; }
:root[data-stijl="licht"] .stijlknop .ic-zon { display: none; }
:root[data-stijl="licht"] .stijlknop .ic-maan { display: block; }
.menuknop { order: 3; margin-left: 0; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: var(--tekst); }
.menuknop-lijn, .menuknop-lijn::before, .menuknop-lijn::after { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; position: relative; content: ""; transition: transform 160ms ease, background-color 160ms ease; }
.menuknop-lijn::before { position: absolute; top: -7px; }
.menuknop-lijn::after { position: absolute; top: 7px; }
.kop.is-open { background: rgba(15, 20, 36, 0.94); }
:root[data-stijl="licht"] .kop.is-open { background: rgba(238, 241, 246, 0.96); }
.kop.is-open .menuknop-lijn { background: transparent; }
.kop.is-open .menuknop-lijn::before { transform: translateY(7px) rotate(45deg); }
.kop.is-open .menuknop-lijn::after { transform: translateY(-7px) rotate(-45deg); }
.menu { order: 4; display: none; width: 100%; flex-direction: column; gap: 2px; padding: 6px 0 14px; }
.kop.is-open .menu { display: flex; }
.menu a:not(.knop) { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 10px; text-decoration: none; color: var(--tekst-2); font-weight: 500; }
.menu a:not(.knop):hover { background: var(--glas-2); color: var(--tekst); }
.menu .knop { margin-top: 8px; align-self: flex-start; min-height: 44px; }
/* Menu open op een telefoon: de bovenste rij met logo en naam blijft precies staan waar hij stond,
   het menu schuift eronder open als een eigen paneel, en de pagina erachter wordt iets donkerder. */
/* Onder 1024 een uitschuifmenu (Snelstart 06): vijf links, knop en stijlknop passen daar niet naast de naam. */
@media (max-width: 1023px) {
  .kop-rij { align-content: flex-start; row-gap: 0; }
  .merk { min-height: var(--kop-hoogte); }
  .kop.is-open { border-bottom-color: transparent; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.6); }
  .kop.is-open::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; background: rgba(5, 7, 12, 0.5); pointer-events: none; }
  .menu { gap: 0; padding: 6px 0 20px; border-top: 1px solid var(--lijn); }
  .kop.is-open .menu { animation: menu-open 220ms ease both; }
  .menu a:not(.knop) { min-height: 52px; padding: 0 4px; border-radius: 0; font-size: 1.08rem; color: var(--tekst); border-bottom: 1px solid var(--lijn); }
  .menu a:not(.knop):hover { background: transparent; }
  .menu .knop { margin-top: 18px; align-self: stretch; justify-content: center; min-height: 50px; font-size: 1rem; }
}
@keyframes menu-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
:root[data-stijl="licht"] .kop.is-open::after { background: rgba(16, 20, 31, 0.22); }
@media (min-width: 1024px) {
  .menuknop { display: none; }
  .menu { order: 1; display: flex; width: auto; flex-direction: row; align-items: center; gap: 2px; margin-left: auto; padding: 0; }
  .stijlknop { margin-left: 10px; }
  .menu a:not(.knop) { padding: 0 12px; }
  .menu .knop { margin: 0 0 0 10px; }
}
/* smalle laptop: vijf links, de knop en de stijlknop moeten op één regel blijven */
@media (min-width: 1024px) and (max-width: 1099px) {
  .menu a:not(.knop) { padding: 0 8px; font-size: 0.95rem; }
  .menu .knop { margin-left: 6px; }
  .stijlknop { margin-left: 6px; }
}

/* ------------------------------------------------------------------- hero */
.hero { padding: calc(var(--kop-hoogte) + 40px) 0 32px; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
.hero-sub { font-size: 1.2rem; line-height: 1.55; color: var(--tekst-2); max-width: 44ch; margin-top: 18px; }
.hero-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 28px; }
.hero-feiten { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--tekst-2); font-size: 0.98rem; }
.hero-feiten li { display: flex; align-items: center; gap: 12px; }
.hero-feiten .ic { color: var(--muted); }
@media (min-width: 900px) {
  .hero { padding: calc(var(--kop-hoogte) + 64px) 0 56px; }
  .hero-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: 56px; }
}
@media (min-width: 1200px) { .hero-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); gap: 64px; } }

/* Eén keer opkomen bij het laden; verder staat alles stil. */
[data-opkomen] { animation: opkomen 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.demo[data-opkomen] { animation-delay: 160ms; }
@keyframes opkomen { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------- demo */
/* --toestel zegt welk apparaat de hero toont (telefoon, laptop of tablet); de schermtest leest het. */
.demo { --toestel: telefoon; position: relative; display: grid; gap: 22px; justify-items: center; }
.demo-tekst { margin: 0; color: var(--muted); text-align: center; font-size: 0.98rem; min-height: 1.6em; }
/* Op de smalste telefoons past niet elk onderschrift op één regel; vaste hoogte, anders springt de pagina bij elke wissel. */
@media (max-width: 359px) { .demo-tekst { min-height: 3.2em; } }

/* laptop: alleen vanaf 900px. Een echte laptop in 3D, schuin, zoals een productfoto.
   Bij het laden: dicht binnenkomen, openklappen, scherm aan. Daarna staat hij stil en zweeft zacht. */
.laptop {
  display: none; position: relative; width: 100%; max-width: 780px;
  padding-bottom: 28%; perspective: 3000px; perspective-origin: 50% 30%;
  animation: zweef 10s ease-in-out 3s infinite;
}
.laptop-romp {
  position: relative; transform-style: preserve-3d; transform-origin: 50% 100%;
  --stand: translateX(5%) rotateX(-11deg) rotateY(-22deg) scale(0.86);
  transform: var(--stand);
  animation: laptop-binnen 2400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.laptop-deksel { position: relative; transform-style: preserve-3d; transform-origin: 50% 100%; transform: rotateX(12deg); animation: deksel-open 1800ms cubic-bezier(0.5, 0, 0.15, 1) 450ms both; }
.laptop-scherm {
  position: relative; padding: 11px 11px 13px; border-radius: 18px 18px 6px 6px; backface-visibility: hidden;
  background: #07090f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 0 0 1.5px #3a4258, 0 0 0 2.5px #1c2232;
}
.laptop-rug {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 18px 18px 6px 6px;
  transform: rotateY(180deg) translateZ(3px); backface-visibility: hidden;
  background: linear-gradient(160deg, #3d4660, #232a3c 55%, #1a2030);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.laptop-rug img { width: 13%; opacity: 0.7; }
.laptop-camera { position: absolute; top: 4px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #0c0f18; box-shadow: 0 0 0 1.5px #2a3144; transform: translateX(-50%); }
.laptop-glans { position: absolute; inset: 11px 11px 13px; border-radius: 6px; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 38%, transparent 38.2%); }
/* tijdens het openklappen staat er al iets op het scherm: eerst gloeit het logo op, dan schuift de app eroverheen */
.app-laptop::after { content: ""; position: absolute; inset: 0; z-index: 10; pointer-events: none; background: #05070c; animation: scherm-aan 800ms ease 1550ms both; }
.app-laptop::before {
  content: ""; position: absolute; inset: 0; z-index: 11; pointer-events: none; opacity: 0;
  background: url("assets/logo.svg") center / 13% no-repeat, radial-gradient(38% 45% at 50% 50%, rgba(76, 118, 214, 0.28), transparent 70%);
  animation: logo-aan 1400ms ease 700ms both;
}
@keyframes logo-aan { 0% { opacity: 0; transform: scale(0.92); } 32%, 58% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* het onderstuk: ligt plat, van het scharnier naar je toe */
.laptop-basis {
  position: absolute; left: 0; top: 100%; width: 100%; aspect-ratio: 313 / 221;
  transform-origin: 50% 0; transform: rotateX(90deg); transform-style: preserve-3d;
  border-radius: 4px 4px 16px 16px;
  background: linear-gradient(180deg, #333b52, #2a3246 60%, #242b3d);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.laptop-toetsen {
  position: absolute; left: 9%; right: 9%; top: 7%; height: 41%; border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 14 - 3px), #10141e calc(100% / 14 - 3px) calc(100% / 14)),
    repeating-linear-gradient(180deg, transparent 0 calc(100% / 6 - 3px), #10141e calc(100% / 6 - 3px) calc(100% / 6)),
    #1c2130;
  box-shadow: 0 0 0 3px #161a26;
}
.laptop-trackpad { position: absolute; left: 50%; top: 55%; width: 38%; height: 37%; transform: translateX(-50%); border-radius: 10px; background: linear-gradient(180deg, #2e3549, #283044); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.laptop-voorrand {
  position: absolute; left: 0; right: 0; top: 100%; height: 12px; transform-origin: 50% 0; transform: rotateX(-90deg);
  border-radius: 0 0 12px 12px; background: linear-gradient(180deg, #454e68, #1b2030);
}
.laptop-voorrand::before { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 5px; transform: translateX(-50%); background: #151a27; border-radius: 0 0 8px 8px; }
.laptop-zijrand { position: absolute; left: 100%; top: 0; width: 12px; height: 100%; transform-origin: 0 50%; transform: rotateY(90deg); border-radius: 0 0 8px 0; background: linear-gradient(90deg, #2a3144, #161b28); }
.laptop-schaduw { position: absolute; inset: -2% -4% -14%; transform: translateZ(-16px); border-radius: 40%; background: rgba(0, 0, 0, 0.6); filter: blur(28px); }

@keyframes laptop-binnen {
  from { transform: translateY(14%) rotateX(-58deg) rotateY(-4deg) scale(0.84); }
  to { transform: var(--stand); }
}
@keyframes deksel-open { from { transform: rotateX(-90deg); } to { transform: rotateX(12deg); } }
@keyframes scherm-aan { from { opacity: 1; } to { opacity: 0; } }

/* telefoon: onder 900px */
.telefoon { width: min(330px, 100%); animation: zweef 9s ease-in-out infinite; }
.telefoon-rand {
  position: relative; padding: 10px; border-radius: 48px;
  background: linear-gradient(180deg, #2b3247, #161b2a);
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
/* camera: een klein rond gaatje in plaats van een eiland; strakker, en je kijkt naar de app (5 okt) */
.telefoon-eiland { position: absolute; z-index: 4; top: 29px; left: 50%; width: 11px; height: 11px; border-radius: 50%; background: #05070c; box-shadow: inset 0 0 0 2.5px #121726, 0 0 0 1px rgba(255, 255, 255, 0.05); transform: translateX(-50%); }
@keyframes zweef { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (min-width: 900px) {
  .demo { --toestel: laptop; }
  .laptop { display: block; }
  .telefoon { display: none; }
}
/* Op een tablet (een aanraakscherm vanaf 600 breed) wordt de laptop een tablet: zie "de tablet" onderaan. */
/* op een smalle laptop staat de laptop iets verder naar rechts en iets kleiner; de app op het scherm
   schaalt zelf mee (zie "de hero in het design van de echte app") */
@media (min-width: 900px) and (max-width: 1150px) {
  .laptop-romp { --stand: translateX(9%) rotateX(-11deg) rotateY(-22deg) scale(0.8); }
  .laptop { padding-bottom: 24%; }
}

/* ------------------------------------------------- de nagebouwde software */
/* De basis van elk scherm op de site: de kleuren van de app, altijd licht. De hero en "Zo kan het
   eruitzien" zetten daar het design van de echte app overheen (.echt, verderop). */
.app {
  --a-canvas: #f3f5f8; --a-surface: #ffffff; --a-sunken: #e9ecf1; --a-text: #16181d; --a-muted: #667085;
  --a-line: rgba(16, 18, 26, 0.10); --a-line-2: rgba(16, 18, 26, 0.18);
  --a-accent: #3a6bce; --a-accent-soft: #e8effc; --a-ink: #16181d; --a-ink-text: #ffffff;
  --a-groen: #157f3d; --a-groen-bg: #e3f4e8; --a-oranje: #9a5b00; --a-oranje-bg: #fdf0da;
  --a-blauw: #2b5cb8; --a-blauw-bg: #e6eefb; --a-rood: #b3261e; --a-rood-bg: #fbe7e5;
  position: relative; background: var(--a-canvas); color: var(--a-text);
  font-family: var(--font-tekst); font-size: 12px; line-height: 1.35; overflow: hidden;
}
.app .ic { width: 15px; height: 15px; stroke-width: 1.8; }
/* het scherm van de laptop in de hero is een container: de app erop rekent zijn maten uit de breedte */
.app-laptop { aspect-ratio: 16 / 10; border-radius: 6px; container-type: inline-size; }
.app-telefoon { height: 640px; border-radius: 40px; }

/* de drie schermen in de hero liggen over elkaar en wisselen */
.app-scherm { position: absolute; inset: 0; display: flex; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 600ms ease, visibility 0s linear 600ms; }
.app-telefoon .app-scherm { top: 44px; flex-direction: column; }
.demo[data-scene="1"] .p1, .demo[data-scene="2"] .p2, .demo[data-scene="3"] .p3 { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 600ms ease, visibility 0s linear 0s; }

/* paginakop, knop, badges en lijstjes (het statusscherm bij Veilig) */
.app-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.app-kop .app-datum { margin-right: auto; }
.app-h1 { font-family: var(--font-kop); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.app-h2 { font-family: var(--font-kop); font-weight: 600; font-size: 14px; }
.app-datum { color: var(--a-muted); font-size: 11.5px; }
.app-knop-breed { width: 100%; height: 44px; font-size: 13px; }
.app-badge { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 10px; font-weight: 600; font-style: normal; background: var(--a-sunken); color: var(--a-muted); white-space: nowrap; }
.app-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.app-badge.is-groen { background: var(--a-groen-bg); color: var(--a-groen); }
.app-badge.is-oranje { background: var(--a-oranje-bg); color: var(--a-oranje); }
.app-badge.is-blauw { background: var(--a-blauw-bg); color: var(--a-blauw); }
.app-badge.is-rood { background: var(--a-rood-bg); color: var(--a-rood); }

/* lijsten met een badge rechts */
.app-lijstje { display: grid; gap: 6px; }
.app-lijstje > span { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; align-items: center; padding: 7px 9px; border-radius: 7px; background: var(--a-surface); border: 1px solid var(--a-line); font-size: 11px; min-width: 0; }
.app-lijstje > span b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-lijstje > span em { font-style: normal; color: var(--a-muted); grid-column: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-lijstje > span i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; }
.app-lijstje-breed > span { padding: 9px 11px; font-size: 11.5px; }

/* knoppen in de schermen zijn te bedienen */
.app button { font: inherit; color: inherit; cursor: pointer; }
.app button:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
.demo-hint { display: none; margin: -14px 0 0; color: var(--muted); font-size: 0.9rem; text-align: center; }
@media (max-width: 899px) {
  .demo-hint { display: block; }
  /* op een telefoon zijn ook de voorbeelden telefoons */
  .mini-paneel, .mini-portaal { width: min(330px, 100%); border-radius: 44px; }
  .mini-paneel .app, .mini-portaal .app { border-radius: 36px; padding: 22px 16px 18px; }
}

/* telefoon: de statusbalk bovenin */
.app-status { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px 0 30px; font-size: 12px; font-weight: 600; }
.app-status-r { display: flex; gap: 3px; align-items: flex-end; }
.app-status-r i { width: 3px; background: var(--a-text); border-radius: 1px; height: 6px; }
.app-status-r i:nth-child(2) { height: 8px; } .app-status-r i:nth-child(3) { height: 10px; }
.app-portaal-kop { display: flex; align-items: center; gap: 12px; }
.app-portaal-kop b { display: block; font-weight: 600; font-size: 13.5px; }
.app-portaal-kop em { font-style: normal; color: var(--a-muted); font-size: 11.5px; }

/* de kleine schermen bij de voorbeelden */
.mini { padding: 10px; background: linear-gradient(180deg, #2b3247, #161b2a); border-radius: 22px; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.mini { position: relative; }
.mini .app { position: relative; border-radius: 14px; padding: 16px; display: grid; gap: 10px; font-size: 12.5px; }
.mini-status { margin: -12px -6px -4px; }
.mini .app-toast-telefoon { top: 52px; }
.app-rij-knop { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; align-items: center; padding: 9px 11px; border-radius: 7px; background: var(--a-surface); border: 1px solid var(--a-line); font: inherit; font-size: 11.5px; color: inherit; text-align: left; min-width: 0; cursor: pointer; min-height: 44px; }
.app-rij-knop b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-rij-knop em { font-style: normal; color: var(--a-muted); grid-column: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-rij-knop i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; }
.app-rij-knop.is-klaar { cursor: default; }
button.app-knop { cursor: pointer; }
@media (min-width: 900px) { .mini-status { display: none; } .mini .app-toast-telefoon { top: 10px; } }
@media (max-width: 899px) {
  /* op een telefoon is elk voorbeeld een volledige telefoon, net als in de hero */
  .mini-telefoon, .mini-paneel, .mini-portaal { width: min(330px, 100%); padding: 10px; border-radius: 48px; }
  .mini-telefoon::before, .mini-paneel::before, .mini-portaal::before { content: ""; position: absolute; z-index: 4; top: 29px; left: 50%; width: 11px; height: 11px; border-radius: 50%; background: #05070c; box-shadow: inset 0 0 0 2.5px #121726, 0 0 0 1px rgba(255, 255, 255, 0.05); transform: translateX(-50%); }
  .mini-telefoon .app, .mini-paneel .app, .mini-portaal .app { height: 600px; display: flex; flex-direction: column; gap: 10px; border-radius: 40px; padding: 12px 16px 22px; }
  .mini .app > .app-knop-breed { margin-top: auto; }
  .mini .app-toast-telefoon { top: 56px; }
}
.mini .app .app-kop { margin-bottom: 0; }
.mini-telefoon { width: min(310px, 100%); margin: 0 auto; border-radius: 44px; }
.mini-telefoon .app { border-radius: 36px; padding: 22px 16px 18px; }
.mini-paneel, .mini-portaal { width: min(480px, 100%); margin: 0 auto; }

/* ---------------------------------------------------------------- blokken */
.blok { padding: clamp(56px, 7vw, 92px) 0 0; }
.blok:last-of-type { padding-bottom: clamp(56px, 7vw, 92px); }
.kop-rij-2 { margin-bottom: clamp(32px, 3.5vw, 44px); max-width: 70ch; }
.kop-rij-2 .intro { margin-bottom: 0; }

/* herken je dit: één paneel, drie luiken */
.drieluik { display: grid; padding: 6px; }
.luik { padding: 24px; display: grid; gap: 10px; align-content: start; }
.luik h3 { margin: 6px 0 0; }
.luik p { margin: 0; color: var(--tekst-2); }
.luik + .luik { border-top: 1px solid var(--lijn); }
@media (min-width: 820px) {
  .drieluik { grid-template-columns: repeat(3, 1fr); }
  .luik { padding: 30px 28px; }
  .luik + .luik { border-top: 0; border-left: 1px solid var(--lijn); }
}

/* simpel op elk scherm: hetzelfde scherm op telefoon, tablet en laptop. Alle maten in de schermpjes
   rekenen vanaf de breedte van het apparaat (cqw), dus het beeld klopt op elke schermmaat.
   Onder 1200px staan de drie apparaten overlappend in één beeld, daarboven naast elkaar van klein
   naar groot, met de tekst onder elk apparaat. Bewust stil: het beeld zegt het al. */
.sv-beeld { position: relative; width: min(100%, 600px); margin: 4px auto 0; aspect-ratio: 100 / 62; }
.sv-beeld::after { content: ""; position: absolute; z-index: 0; left: 8%; right: 8%; bottom: -5%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5), transparent); pointer-events: none; }
.sv-toestel { position: absolute; container-type: inline-size; }
.sv-lap { z-index: 1; left: 13%; top: 0; width: 74%; }
.sv-tab { z-index: 2; left: 1%; bottom: 0; width: 28%; }
.sv-tel { z-index: 3; right: 3%; bottom: 0; width: 16%; }
.sv-rand {
  position: relative; padding: 4cqw; border-radius: 9cqw;
  background: linear-gradient(180deg, #2b3247, #161b2a);
  box-shadow: 0 24px 44px -26px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.sv-tel .sv-rand { padding: 3.6cqw; border-radius: 15cqw; }
.sv-tel .sv-rand::before { content: ""; position: absolute; z-index: 2; top: 9cqw; left: 50%; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: #05070c; box-shadow: inset 0 0 0 0.8cqw #121726; transform: translateX(-50%); }
.sv-tab .sv-rand::before { content: ""; position: absolute; top: 1.4cqw; left: 50%; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #0c0f18; box-shadow: 0 0 0 1px #2a3144; transform: translateX(-50%); }
.sv-deksel {
  position: relative; padding: 2cqw 2cqw 2.6cqw; border-radius: 2.6cqw 2.6cqw 0.8cqw 0.8cqw; background: #07090f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 0 0 1.5px #3a4258, 0 0 0 2.5px #1c2232, 0 30px 50px -32px rgba(0, 0, 0, 0.8);
}
.sv-deksel::before { content: ""; position: absolute; top: 0.6cqw; left: 50%; width: 0.8cqw; height: 0.8cqw; border-radius: 50%; background: #0c0f18; box-shadow: 0 0 0 1px #2a3144; transform: translateX(-50%); }
.sv-voet { position: relative; left: -6%; width: 112%; height: 2.6cqw; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(180deg, #4a536d, #2a3144 45%, #161b28); }
.sv-voet::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 40%; transform: translateX(-50%); border-radius: 0 0 1cqw 1cqw; background: #1b2030; }

/* het scherm zelf: alleen de vorm per apparaat. Wat erin staat, staat in het blok "simpel: het scherm in
   het design van de echte app" hieronder. */
.sv-scherm { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.sv-tel .sv-scherm { aspect-ratio: 9 / 19.5; border-radius: 11.5cqw; }
.sv-tab .sv-scherm { aspect-ratio: 3 / 4; border-radius: 5cqw; }
.sv-lap .sv-scherm { aspect-ratio: 16 / 10; border-radius: 0.8cqw; flex-direction: row; }

/* de uitleg: op een telefoon onder het beeld, op een tablet ernaast, op een laptop onder elk apparaat */
.sv-teksten { display: grid; gap: 20px; margin-top: 34px; }
.sv-tekst h3 { margin: 0 0 6px; font-size: 1.15rem; }
.sv-tekst p { margin: 0; color: var(--tekst-2); }
@media (max-width: 1199px) {
  .sv-tekst + .sv-tekst { padding-top: 20px; border-top: 1px solid var(--lijn); }
}
@media (min-width: 720px) and (max-width: 1199px) {
  .sv { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; }
  .sv-beeld { width: 100%; margin: 0; }
  .sv-teksten { margin-top: 0; }
}
@media (min-width: 1200px) {
  .sv-beeld { width: 100%; margin-top: 16px; aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1.25fr 2fr; gap: 48px; align-items: end; justify-items: center; }
  .sv-beeld::after { left: 3%; right: 3%; bottom: -24px; height: 48px; }
  .sv-toestel { position: relative; inset: auto; }
  .sv-tel { width: 60%; }
  .sv-tab { width: 80%; }
  .sv-lap { width: 100%; }
  .sv-teksten { grid-template-columns: 1fr 1.25fr 2fr; gap: 48px; margin-top: 44px; text-align: center; }
  .sv-tekst p { max-width: 34ch; margin-inline: auto; }
}
:root[data-stijl="licht"] .sv-rand { box-shadow: 0 26px 44px -26px rgba(16, 20, 31, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
:root[data-stijl="licht"] .sv-deksel { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 0 0 1.5px #3a4258, 0 0 0 2.5px #1c2232, 0 30px 50px -32px rgba(16, 20, 31, 0.45); }
:root[data-stijl="licht"] .sv-beeld::after { background: radial-gradient(closest-side, rgba(16, 20, 31, 0.22), transparent); }
@media (prefers-color-scheme: light) {
  :root:not([data-stijl="donker"]) .sv-rand { box-shadow: 0 26px 44px -26px rgba(16, 20, 31, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
  :root:not([data-stijl="donker"]) .sv-deksel { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 0 0 1.5px #3a4258, 0 0 0 2.5px #1c2232, 0 30px 50px -32px rgba(16, 20, 31, 0.45); }
  :root:not([data-stijl="donker"]) .sv-beeld::after { background: radial-gradient(closest-side, rgba(16, 20, 31, 0.22), transparent); }
}

/* simpel: het scherm in het design van de echte app. De kleuren zijn die van "Zo kan het eruitzien"
   (.app.echt, de tokens --e-*), de maten die van de app zelf (AppShell, Page, Card, Badge, Button in
   cirkulaer-crm). Elk apparaat toont de app op een eigen breedte: telefoon 390, tablet 640, laptop 1340
   beeldpunten. --u is één beeldpunt van de app, gerekend vanaf de breedte van het apparaat (cqw); zo is
   de tekst op alle drie even groot en kloppen de verhoudingen met de echte schermen.
   Telefoon en tablet: geen zijbalk en geen tabbalk, het menu zit achter de knop linksboven. De hoofdknop
   staat op de telefoon onderin in een vaste, effen balk; vanaf de tablet rechtsboven in de paginakop.
   Laptop: de zijbalk van 260 met namen, het actieve item met een zachte vulling en een staafje links. */
.sv-tel .sv-scherm { --u: calc(92.8cqw / 390); }
.sv-tab .sv-scherm { --u: calc(92cqw / 640); }
.sv-lap .sv-scherm { --u: calc(96cqw / 1340); }
/* Lijnen: een lijn van 1 beeldpunt in de app is hier een derde pixel. Dunner dan 1px tekent de browser
   niet, dus de lijnen blijven 1px en worden lichter (ongeveer de helft van --e-lijn-zacht en --e-lijn);
   anders oogt alles drie keer zo zwaar als in de app. De schaduw schaalt gewoon mee. */
.sv-scherm {
  --sv-lijn-zacht: rgba(16, 18, 26, 0.05); --sv-lijn: rgba(16, 18, 26, 0.08);
  --sv-schaduw: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(16, 18, 26, 0.06), 0 calc(1 * var(--u)) calc(1 * var(--u)) rgba(16, 18, 26, 0.04);
  font-size: calc(14 * var(--u)); line-height: 1.45;
}
.sv-scherm .ic { width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 1.5; }

/* bovenbalk: glas, menuknop (alleen telefoon en tablet), zoekveld; geen uitloggen */
.sv-glas { flex: 0 0 auto; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--sv-lijn-zacht); }
.sv-status { display: flex; justify-content: space-between; align-items: center; height: calc(47 * var(--u)); padding: 0 calc(30 * var(--u)) 0 calc(36 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; }
.sv-balkjes { display: flex; gap: 0.2em; align-items: flex-end; }
.sv-balkjes i { width: 0.22em; height: 0.45em; border-radius: 1px; background: var(--e-tekst); }
.sv-balkjes i:nth-child(2) { height: 0.62em; }
.sv-balkjes i:nth-child(3) { height: 0.8em; }
.sv-top { display: flex; align-items: center; gap: calc(12 * var(--u)); height: calc(56 * var(--u)); padding: 0 calc(16 * var(--u)); }
.sv-tel .sv-top { padding: 0 calc(12 * var(--u)); }
.sv-menu { flex: 0 0 auto; display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); color: var(--e-tekst-2); }
.sv-menu svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.sv-zoek { flex: 0 1 calc(384 * var(--u)); min-width: 0; display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(44 * var(--u)); padding: 0 calc(14 * var(--u)); border: 1px solid var(--sv-lijn); border-radius: calc(12 * var(--u)); background: var(--e-vlak); color: var(--e-muted); font-size: calc(13 * var(--u)); white-space: nowrap; }
.sv-tel .sv-zoek { flex: 1 1 auto; }
.sv-zoek span { overflow: hidden; text-overflow: ellipsis; }
.sv-scherm .sv-zoek .ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }

/* paginakop: titel, regel eronder, een lijn; de hoofdknop rechtsboven vanaf de tablet */
.sv-kop { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)); border-bottom: 1px solid var(--sv-lijn-zacht); }
.sv-tel .sv-kop { padding-inline: calc(12 * var(--u)); }
.sv-lap .sv-kop { padding-inline: calc(24 * var(--u)); }
.sv-kop-tekst { min-width: 0; display: grid; }
.sv-kop b { font-size: calc(24 * var(--u)); font-weight: 600; line-height: 1.333; letter-spacing: -0.011em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-kop em { margin-top: calc(2 * var(--u)); font-style: normal; font-size: calc(13 * var(--u)); color: var(--e-muted); white-space: nowrap; }
.sv-knop { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: calc(36 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--e-inkt); color: #fff; font-weight: 500; white-space: nowrap; box-shadow: 0 1px 1px rgba(16, 18, 26, 0.04); }
.sv-tab .sv-knop { height: calc(44 * var(--u)); }

/* de inhoud: witte kaarten met een kop, rijen met een scheidslijn, rechts een tijd of een knop */
.sv-inhoud { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(16 * var(--u)); padding: calc(16 * var(--u)); }
.sv-tel .sv-inhoud { padding-inline: calc(12 * var(--u)); }
.sv-kaart { flex: 0 0 auto; min-width: 0; background: var(--e-vlak); border: 1px solid var(--sv-lijn-zacht); border-radius: calc(12 * var(--u)); box-shadow: var(--sv-schaduw); }
.sv-kaart-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(16 * var(--u)); padding: calc(16 * var(--u)); border-bottom: 1px solid var(--sv-lijn-zacht); }
.sv-kaart-kop > span:first-child { min-width: 0; display: grid; }
.sv-kaart-kop b { font-size: calc(18 * var(--u)); font-weight: 600; line-height: 1.5; letter-spacing: -0.011em; }
.sv-kaart-kop em { margin-top: calc(2 * var(--u)); font-style: normal; font-size: calc(12 * var(--u)); color: var(--e-muted); }
.sv-ghost { flex: 0 0 auto; display: inline-flex; align-items: center; height: calc(30 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 500; color: var(--e-tekst-2); white-space: nowrap; }
.sv-tel .sv-ghost, .sv-tab .sv-ghost { height: calc(44 * var(--u)); }
.sv-rijen { list-style: none; margin: 0; padding: calc(6 * var(--u)) calc(16 * var(--u)); }
.sv-rijen li { display: flex; align-items: baseline; justify-content: space-between; gap: calc(12 * var(--u)); padding: calc(10 * var(--u)) 0; }
.sv-rijen li + li { border-top: 1px solid var(--sv-lijn-zacht); }
.sv-rij { min-width: 0; display: grid; }
.sv-rij > b { font-size: calc(13 * var(--u)); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-rij > span { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(2 * var(--u)); font-size: calc(12 * var(--u)); color: var(--e-muted); white-space: nowrap; overflow: hidden; }
.sv-tijd { flex: 0 0 auto; font-size: calc(12 * var(--u)); color: var(--e-muted); font-variant-numeric: tabular-nums; }
.sv-badge { display: inline-flex; align-items: center; flex: 0 0 auto; height: calc(22 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(6 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 500; font-style: normal; background: var(--e-neutraal); color: var(--e-tekst-2); }
.sv-badge.is-blauw { background: var(--e-blauw-bg); color: var(--e-blauw); }

/* telefoon: de hoofdknop onderin, in een vaste, effen balk met een lijn erboven en de knop over de hele breedte */
.sv-actiebalk { position: absolute; left: 0; right: 0; bottom: 0; display: flex; padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(30 * var(--u)); background: var(--e-vlak); border-top: 1px solid var(--sv-lijn); }
.sv-actiebalk .sv-knop { flex: 1; height: calc(44 * var(--u)); }

/* laptop: zijbalk van 260 met namen, rechts de pagina; de route naast de klussen */
.sv-zij { flex: 0 0 calc(260 * var(--u)); display: flex; flex-direction: column; background: var(--e-vlak); border-right: 1px solid var(--sv-lijn-zacht); }
.sv-logo { display: flex; align-items: center; padding: calc(16 * var(--u)); }
/* het logo van het bedachte bedrijf: een letter in een tegel, zoals in de hero. Nooit een ring of iets
   dat op het logo van een echte klant lijkt. */
.sv-logo i { display: grid; place-items: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--e-merk); color: #fff; font-style: normal; font-weight: 700; font-size: calc(14 * var(--u)); line-height: 1; }
.sv-nav { display: flex; flex-direction: column; gap: calc(2 * var(--u)); padding: calc(8 * var(--u)) 0; }
.sv-nav-onder { margin-top: auto; }
.sv-nav > span { position: relative; display: flex; align-items: center; gap: calc(12 * var(--u)); height: calc(36 * var(--u)); margin: 0 calc(8 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(8 * var(--u)); color: var(--e-tekst-2); white-space: nowrap; }
.sv-nav > span.is-aan { background: var(--e-accent-zacht); color: var(--e-accent-tekst); font-weight: 500; }
.sv-nav > span.is-aan::before { content: ""; position: absolute; left: 0; top: 50%; width: max(1.5px, calc(2 * var(--u))); height: calc(16 * var(--u)); border-radius: 2px; background: var(--e-accent); transform: translateY(-50%); }
.sv-inklap { display: grid; place-items: center; height: calc(32 * var(--u)); margin: 0 calc(8 * var(--u)) calc(8 * var(--u)); color: var(--e-muted); }
.sv-inklap svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sv-hoofd { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sv-lap .sv-inhoud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; padding: calc(24 * var(--u)); }
.sv-kaart.sv-route { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; }
.sv-kaartbeeld { position: relative; flex: 1; margin: calc(16 * var(--u)); overflow: hidden; border-radius: calc(8 * var(--u)); border: 1px solid var(--sv-lijn-zacht); background: #e6eee4; }
.sv-kaartbeeld svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sv-weg { fill: none; stroke: #ffffff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.sv-weg-klein { stroke-width: 1.6; }
.sv-park { fill: #d5e4cf; }
.sv-water { fill: #cddcea; }
.sv-lijn { fill: none; stroke: var(--e-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sv-punt { fill: var(--e-accent); stroke: #ffffff; stroke-width: 1.2; }

/* herken je dit: een kop zonder inleiding, dus zelf wat lucht naar het paneel */
#herken h2 { margin-bottom: clamp(24px, 3vw, 36px); }

/* wat ik bouw: één paneel met acht vakken */
.bouw { list-style: none; margin: 0; padding: 0; display: grid; overflow: hidden; }
.bouw li { display: grid; grid-template-columns: 44px 1fr; gap: 6px 14px; padding: 20px 22px; align-content: start; }
.bouw li .ic-groot { grid-row: 1 / span 2; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--glas-2); border: 1px solid var(--lijn); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.bouw h3 { margin: 0; font-size: 1.08rem; }
.bouw p { margin: 0; color: var(--tekst-2); font-size: 0.98rem; }
.bouw li + li { border-top: 1px solid var(--lijn); }
@media (min-width: 640px) {
  /* alle rijen even hoog, ook als een titel op twee regels valt: anders is de eerste rij hoger */
  .bouw { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
  .bouw li + li { border-top: 0; }
  .bouw li:nth-child(n + 3) { border-top: 1px solid var(--lijn); }
  .bouw li:nth-child(even) { border-left: 1px solid var(--lijn); }
}
@media (min-width: 1100px) {
  .bouw { grid-template-columns: repeat(4, 1fr); }
  /* vier smalle kolommen: het icoon boven de titel, zodat de tekst de hele breedte krijgt en niet in
     een smal strookje van vijf regels staat */
  .bouw li { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 22px 22px 20px; }
  .bouw li .ic-groot { grid-row: auto; width: 40px; height: 40px; padding: 9px; margin-bottom: 6px; }
  .bouw li:nth-child(n + 3) { border-top: 0; }
  .bouw li:nth-child(n + 5) { border-top: 1px solid var(--lijn); }
  .bouw li:nth-child(even) { border-left: 0; }
  .bouw li:not(:nth-child(4n + 1)) { border-left: 1px solid var(--lijn); }
}

/* voorbeelden per pakket. Links (of rechts) de tekst: het pakket, het bedrijf in één zin, drie punten met
   een vinkje, "Wat stopt" in een eigen glazen vlak, en de onderdelen uit het pakket als kleine chips.
   Ernaast het toestel, met een hint eronder. Op een telefoon en een staande tablet staat alles onder
   elkaar: tekst, chips, toestel, hint. */
.voorbeeld { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; padding: 34px 0; border-top: 1px solid var(--lijn); }
.voorbeeld-beeld { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; }
.mini { max-width: 100%; }
.voorbeeld:first-of-type { border-top: 0; padding-top: 4px; }
/* de sectie eindigt, net als de andere secties, met zijn inhoud: geen extra ruimte onder het laatste voorbeeld */
.voorbeeld:last-of-type { padding-bottom: 0; }
.voorbeeld-tekst { display: grid; gap: 14px; justify-items: start; max-width: 36rem; }
.voorbeeld-tekst h3 { margin: 4px 0 -4px; font-size: 1.5rem; }
.voorbeeld-tekst p { margin: 0; }
.stopt { color: var(--tekst-2); }
.stopt b { color: var(--tekst); font-weight: 600; }
/* de pakket-chip bovenaan mag op een smalle telefoon over twee regels lopen, zonder dat de regels op elkaar plakken */
.voorbeeld-tekst > .chip { padding-block: 5px; border-radius: 15px; line-height: 1.25; }
/* de hint onder het toestel, net als in de hero; "Klik" alleen met een muis of trackpad */
.vb-hint { margin: 0; color: var(--muted); font-size: 0.9rem; text-align: center; }
.vb-klik { display: none; }
@media (pointer: fine) { .vb-tik { display: none; } .vb-klik { display: inline; } }
@media (min-width: 900px) {
  /* de tekst en het toestel staan met hun midden op dezelfde hoogte; het toestel staat dicht bij de tekst */
  .voorbeeld { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 48px; padding: 30px 0; }
  .voorbeeld:first-of-type { padding-top: 4px; }
  .voorbeeld:last-of-type { padding-bottom: 0; }
  .voorbeeld.is-omgekeerd { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .voorbeeld.is-omgekeerd .voorbeeld-tekst { order: 2; }
  .voorbeeld.is-omgekeerd .voorbeeld-beeld { order: 1; }
}

/* Zo kan het eruitzien: de schermen in de designtaal van de echte app (cirkulaer-crm, de tokens in
   ui/styles/tokens.css), verkleind tot het toestel. Koelgrijs canvas met een vleugje blauw bovenin,
   een glazen bovenbalk met zoekveld, de paginakop met een lijn eronder, witte kaarten met een rand
   van 1px en een zachte schaduw, alles in Inter, een zwarte hoofdknop, badges met tekst en een zachte
   vulling. Op een tablet in de breedte de smalle zijbalk met alleen iconen; op een telefoon het menu
   achter de knop linksboven, zoals de app het doet. Altijd de lichte stand, net als de andere schermen
   op de site. Eigen voorvoegsel echt-, zodat de andere schermen niet veranderen. De maat van het
   toestel blijft van .mini; binnenin regelt .echt alles zelf (vandaar de zware selector hieronder). */
.app.echt {
  --e-canvas: #f6f7f9; --e-vlak: #ffffff; --e-put: #f6f7f9; --e-neutraal: #eceef2;
  --e-tekst: #16181d; --e-tekst-2: #545c6b; --e-muted: #656d7e;
  --e-lijn-zacht: rgba(16, 18, 26, 0.08); --e-lijn: rgba(16, 18, 26, 0.13);
  --e-accent: #3a6bce; --e-accent-zacht: #eef3fc; --e-accent-tekst: #2e58b0;
  --e-inkt: #16181d; --e-inkt-hover: #2b303a;
  --e-groen: #157f3d; --e-groen-bg: #e7f6ec; --e-oranje: #9a6300; --e-oranje-bg: #fdf3e0;
  --e-rood: #c1282d; --e-rood-bg: #fdeaea; --e-blauw: #26468c; --e-blauw-bg: #eaf1fd;
  --e-schaduw: 0 1px 2px rgba(16, 18, 26, 0.06), 0 1px 1px rgba(16, 18, 26, 0.04);
  --e-merk: #4a6b7d; /* het logo van het bedachte bedrijf: een eigen, rustige kleur */
  --a-accent: var(--e-accent);
  background:
    radial-gradient(120% 30% at 8% 0%, rgba(138, 170, 231, 0.24), transparent 72%),
    radial-gradient(80% 26% at 96% 2%, rgba(182, 203, 241, 0.22), transparent 72%),
    var(--e-canvas);
  color: var(--e-tekst);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-feature-settings: "cv02" 1, "cv03" 1, "cv04" 1, "cv11" 1, "ss01" 1;
}
.voorbeeld-beeld .mini[data-vb] .app.echt { display: flex; flex-direction: column; gap: 0; padding: 0; font-size: 11.5px; line-height: 1.45; }
.echt .echt-status { margin: 0; flex: 0 0 auto; }
.echt-romp { flex: 1; min-height: 0; display: flex; }
.echt-hoofd { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* zijbalk als rail: logo, iconen, het actieve item met een zachte vulling en een staafje links */
.echt-rail { display: none; flex: 0 0 46px; flex-direction: column; align-items: center; gap: 3px; padding: 11px 0 9px; background: var(--e-vlak); border-right: 1px solid var(--e-lijn-zacht); }
.echt-rail > i { position: relative; width: 32px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: var(--e-tekst-2); }
.echt-rail > i.is-aan { background: var(--e-accent-zacht); color: var(--e-accent-tekst); }
.echt-rail > i.is-aan::before { content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 12px; border-radius: 2px; background: var(--e-accent); transform: translateY(-50%); }
.echt-rail > i.echt-rail-onder { margin-top: auto; }
.echt-rail .ic { width: 15px; height: 15px; stroke-width: 1.5; }
/* letter in een tegel, zoals in de hero; geen ring (die leek op het logo van een echte klant) */
.echt-rail > i.echt-logo { display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 9px; border-radius: 6px; background: var(--e-merk); color: #fff; font-style: normal; font-weight: 700; font-size: 12px; line-height: 1; }

/* bovenbalk: glas, menuknop, zoekveld (geen uitloggen: op de website niet relevant) */
.echt-top { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 9px 0 6px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--e-lijn-zacht); }
.echt-menu { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; color: var(--e-tekst-2); }
.echt-menu svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.echt-zoek { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 1px solid var(--e-lijn); border-radius: 9px; background: var(--e-vlak); color: var(--e-muted); font-size: 10.5px; white-space: nowrap; }
.echt-zoek span { overflow: hidden; text-overflow: ellipsis; }
.echt-zoek .ic { width: 13px; height: 13px; stroke-width: 1.5; }

/* paginakop: titel, regel eronder, een dunne lijn */
.echt-kop { flex: 0 0 auto; display: grid; gap: 1px; padding: 11px 12px 10px; border-bottom: 1px solid var(--e-lijn-zacht); }
.echt-h1 { font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -0.011em; }
.echt-sub { font-size: 10.5px; color: var(--e-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.echt-inhoud { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 10px; }

/* kaarten, kop met lijn, rijen met een scheidslijn, rechts een tijd, bedrag of knop */
.echt-kaart { min-width: 0; background: var(--e-vlak); border: 1px solid var(--e-lijn-zacht); border-radius: 10px; box-shadow: var(--e-schaduw); }
.echt-kaart-kop { display: grid; gap: 1px; padding: 9px 11px 8px; border-bottom: 1px solid var(--e-lijn-zacht); }
.echt-kaart-kop b { font-size: 13.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.011em; }
.echt-kaart-kop span { font-size: 10px; color: var(--e-muted); }
.echt-rijen { list-style: none; margin: 0; padding: 1px 11px; }
.echt-rijen li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 7px 0; }
.echt-rijen li + li { border-top: 1px solid var(--e-lijn-zacht); }
.echt-rij { min-width: 0; display: grid; gap: 3px; }
.echt-rij > b { font-size: 11px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.echt-rij > span { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; font-size: 10px; color: var(--e-muted); }
.echt-rij em { font-style: normal; }
.echt-rechts { flex: 0 0 auto; padding-top: 1px; font-size: 10px; color: var(--e-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* de bovenste aanvraag, zoals een aanvraagkaart in de app: wie, hoe lang al, waar, wat, en de knop */
.echt-eerst { display: grid; gap: 7px; padding: 10px 11px 11px; }
.echt-label { font-size: 9px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--e-muted); }
.echt-eerst-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: -3px; }
.echt-eerst-kop > span { min-width: 0; display: grid; gap: 1px; }
.echt-eerst-kop b { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.echt-eerst-kop em { font-style: normal; font-size: 10px; color: var(--e-muted); }
/* onderaan de kaart: wie belt, en een rustige knop (tweede soort, niet inkt). Alleen bij de voorbeelden. */
.echt-voet { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.echt-wie { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 11.5px; color: var(--e-tekst-2); }
.echt-wie i { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--e-accent-zacht); color: var(--e-accent-tekst); font-style: normal; font-size: 9px; font-weight: 600; letter-spacing: 0.02em; }
.app .echt-voet .echt-knop { gap: 5px; padding: 0 12px; }
.app .echt-voet .echt-knop .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.echt-feiten { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 11px; }
.echt-feiten > span { display: inline-flex; align-items: center; gap: 4px; }
.echt-feiten .ic { width: 12px; height: 12px; stroke-width: 1.6; color: var(--e-muted); }
.echt-notitie { padding: 6px 9px; border-radius: 7px; background: var(--e-put); font-size: 10.5px; line-height: 1.45; }

/* badges: altijd tekst, kleur alleen in een klein vlak */
.echt-badge { display: inline-flex; align-items: center; flex: 0 0 auto; height: 17px; padding: 0 6px; border-radius: 5px; font-size: 10px; font-weight: 500; font-style: normal; white-space: nowrap; background: var(--e-neutraal); color: var(--e-tekst-2); }
.echt-badge.is-blauw { background: var(--e-blauw-bg); color: var(--e-blauw); }
.echt-badge.is-groen { background: var(--e-groen-bg); color: var(--e-groen); }
.echt-badge.is-oranje { background: var(--e-oranje-bg); color: var(--e-oranje); }
.echt-badge.is-rood { background: var(--e-rood-bg); color: var(--e-rood); }

/* knoppen: zwart voor de hoofdactie, wit met een rand voor de rest; klaar = de zachte accentknop */
.app .echt-knop { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 11px; border: 1px solid transparent; border-radius: 7px; font-size: 11px; font-weight: 500; white-space: nowrap; transition: background-color 140ms cubic-bezier(0.2, 0, 0, 1), color 140ms cubic-bezier(0.2, 0, 0, 1); }
.app .echt-knop.is-primair { background: var(--e-inkt); color: #fff; box-shadow: 0 1px 1px rgba(16, 18, 26, 0.04); }
.app .echt-knop.is-tweede { background: var(--e-vlak); border-color: var(--e-lijn); color: var(--e-tekst); box-shadow: 0 1px 1px rgba(16, 18, 26, 0.04); }
@media (hover: hover) {
  .app .echt-knop.is-primair:hover { background: var(--e-inkt-hover); }
  .app .echt-knop.is-tweede:hover { background: var(--e-canvas); border-color: rgba(16, 18, 26, 0.22); }
}
.app .echt-knop.is-klaar, .app .echt-knop.is-klaar:hover { background: var(--e-accent-zacht); border-color: transparent; color: var(--e-accent-tekst); box-shadow: none; cursor: default; }
.app .echt-knop-breed { width: 100%; height: 44px; margin-top: 2px; font-size: 12px; }

/* melding: glas, een groene stip, bovenaan op een telefoon en rechtsonder op een groot scherm */
.echt-toast { position: absolute; z-index: 5; top: 50px; left: 10px; right: 10px; display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; border-radius: 10px; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--e-lijn); box-shadow: 0 4px 12px -2px rgba(16, 18, 26, 0.10), 0 2px 4px -1px rgba(16, 18, 26, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6); font-size: 11px; font-weight: 500; line-height: 1.4; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 200ms cubic-bezier(0.05, 0.7, 0.1, 1), transform 200ms cubic-bezier(0.05, 0.7, 0.1, 1); }
.echt-toast::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--e-groen); }
.echt-toast.is-zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .echt-toast, .app .echt-knop { transition: none; } }

/* op een telefoon is elke knop in het scherm groot genoeg voor een duim */
@media (max-width: 899px) { .app .echt-knop { height: 44px; } }
/* op een aanraakscherm (ook een tablet, die breder is dan 899) altijd 44 px te raken */
@media (pointer: coarse) { .app .echt-voet .echt-knop { height: 44px; } }

/* Zo kan het eruitzien: de inhoud van de twee schermen. Eigen klassen vb-, zodat de hero, Simpel en
   Veilig niet veranderen. Eén blik, één verhaal: per rij een naam of titel (duidelijk), één gedempte
   regel (wat of wie), en rechts hoogstens één ding: een datum, één badge of de knop. Kleur is een
   signaal: rood alleen voor te laat, groen voor wat klaar is, verder neutraal. */
.vb-kop .echt-sub { font-size: 11px; }

/* hovenier: de kaart Bel eerst. Een klein label, de naam groot met rechts de badge, één regel wat en
   hoe lang, en onderaan wie belt met de knop. Geen plaats, datum of notitie: die staan in de aanvraag. */
.vb-bel { padding: 11px 12px 12px; }
.vb-label { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--e-muted); }
.vb-bel-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; }
.vb-bel-kop b { min-width: 0; font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
.vb-bel-wat { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.4; color: var(--e-muted); }

/* rijen met een scheidslijn: links (de tijd), in het midden de naam of titel met één gedempte regel,
   rechts een datum, een badge of de knop */
.vb-rijen { list-style: none; margin: 0; padding: 0 12px; }
.vb-rijen li { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.vb-rijen li + li { border-top: 1px solid var(--e-lijn-zacht); }
.vb-rij { flex: 1; min-width: 0; display: grid; gap: 1px; }
.vb-rij b { font-size: 12.5px; font-weight: 500; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-rij em { font-style: normal; font-size: 11px; line-height: 1.4; color: var(--e-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-datum { flex: 0 0 auto; font-size: 11px; color: var(--e-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vb-rijen .echt-badge { height: 19px; padding: 0 7px; font-size: 10.5px; }
/* garage: een tijdlijn, de tijd links op de hoogte van de titel */
.vb-tijdlijn li { align-items: flex-start; }
.vb-tijdlijn .echt-badge, .vb-tijdlijn .echt-knop { align-self: center; }
.vb-tijd { flex: 0 0 36px; font-size: 12.5px; font-weight: 600; line-height: 1.35; font-variant-numeric: tabular-nums; }
/* naast de knop is het smal: de regel eronder mag dan over twee regels, liever dan afgekapt */
.vb-tijdlijn .vb-rij em { white-space: normal; }

/* garage: wat vanzelf ging, elk met een klein groen vinkje */
.vb-vanzelf { list-style: none; margin: 0; padding: 2px 12px; }
.vb-vanzelf li { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 11.5px; line-height: 1.35; color: var(--e-tekst-2); }
.vb-vanzelf li + li { border-top: 1px solid var(--e-lijn-zacht); }
.vb-vinkje { flex: 0 0 auto; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--e-groen-bg); color: var(--e-groen); }
.app .vb-vinkje .ic { width: 10px; height: 10px; stroke-width: 2.6; }

/* op de smalste telefoons (320) iets minder ruimte tussen de kolommen, zodat de regels heel blijven */
@media (max-width: 359px) {
  .vb-tijdlijn li { gap: 8px; }
  .vb-tijd { flex-basis: 34px; font-size: 12px; }
  .vb-vanzelf li { font-size: 11px; }
}

/* garage: na de tik is de knop de status, groen "binnen", op dezelfde plek en even groot */
.app .echt-knop.vb-knop-status.is-klaar, .app .echt-knop.vb-knop-status.is-klaar:hover { background-color: var(--e-groen-bg); color: var(--e-groen); }
/* op een telefoon is die knop zichtbaar 32 hoog en te raken over 44: een doorzichtige rand boven en
   onder, net als op de tablet. Zo blijft de rij rustig. */
@media (max-width: 899px) {
  .app .echt-knop.vb-knop-status { height: 44px; margin-block: -6px; border-style: solid; border-color: transparent; border-width: 6px 0; border-radius: 7px / 13px; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--e-lijn); }
  .app .echt-knop.vb-knop-status:hover { border-color: transparent; }
  /* na een tik blijft de vinger "erboven" hangen (hover); de doorzichtige rand blijft dan doorzichtig */
  .app .echt-knop.vb-knop-status.is-klaar, .app .echt-knop.vb-knop-status.is-klaar:hover { box-shadow: none; border-color: transparent; background-clip: padding-box; }
}

/* Geen leeg canvas onderin: de kaart met de lijst (vb-vult) groeit mee met het scherm, en de extra
   hoogte gaat gelijk over de rijen. Onderaan een kleine marge, zoals de veilige zone van een telefoon.
   Op de tablet is het scherm zo hoog als de inhoud; dan groeit er niets. */
.voorbeeld-beeld .echt-inhoud { padding-bottom: 16px; }
.vb-vult { flex: 1 0 auto; display: flex; flex-direction: column; }
.vb-vult > .vb-rijen { flex: 1; display: flex; flex-direction: column; }
.vb-vult > .vb-rijen > li { flex: 1 0 auto; }

/* de tablet op een laptop en op een tablet: de rail in plaats van de menuknop, de melding rechtsonder.
   De tablet is zo hoog als zijn inhoud (geen lege ruimte onderin), en alles in het scherm is 8 procent
   groter getekend (zoom), zodat de tekst leesbaar blijft. De kaart Morgen is alleen voor de telefoon. */
@media (min-width: 900px), (pointer: coarse) and (min-width: 600px) {
  .mini[data-toestel="tablet"] .echt-rail { display: flex; }
  .mini[data-toestel="tablet"] .echt-menu { display: none; }
  .mini[data-toestel="tablet"] .echt-top { height: 37px; padding: 0 12px; }
  .mini[data-toestel="tablet"] .echt-zoek { flex: 0 1 210px; height: 27px; }
  .mini[data-toestel="tablet"] .echt-kop { padding: 9px 12px 8px; }
  .mini[data-toestel="tablet"] .echt-inhoud { padding: 10px 12px 12px; }
  .mini[data-toestel="tablet"] .echt-kaart-kop { padding: 8px 11px 7px; }
  .mini[data-toestel="tablet"] .vb-rijen li, .mini[data-toestel="tablet"] .vb-vanzelf li { padding: 6px 0; }
  /* de tablet ligt: elke afspraak zo veel mogelijk op één regel, zodat hij niet vierkant wordt. Breed
     genoeg: als een tabel in de app (tijd, auto en klus, wie, rechts de status of de knop). Smaller: wie
     staat direct achter de klus, en gaat alleen naar de volgende regel als het niet past. */
  .mini[data-toestel="tablet"] .echt-inhoud { container-type: inline-size; }
  .mini[data-toestel="tablet"] .vb-tijdlijn li { align-items: baseline; }
  .mini[data-toestel="tablet"] .vb-tijdlijn .echt-badge, .mini[data-toestel="tablet"] .vb-tijdlijn .echt-knop { align-self: auto; }
  .mini[data-toestel="tablet"] .vb-tijdlijn .vb-rij { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 8px; }
  @container (min-width: 400px) {
    .mini[data-toestel="tablet"] .vb-tijdlijn .vb-rij { flex-wrap: nowrap; gap: 12px; }
    .mini[data-toestel="tablet"] .vb-tijdlijn .vb-rij b { flex: 0 0 140px; }
    .mini[data-toestel="tablet"] .vb-tijdlijn .vb-rij em { flex: 1; min-width: 0; white-space: nowrap; }
  }
  .mini[data-toestel="tablet"] .echt-toast { top: auto; left: auto; bottom: 12px; right: 12px; width: min(300px, 78%); }
  .voorbeeld-beeld .mini[data-toestel="tablet"] { height: auto; }
  .voorbeeld-beeld .mini[data-toestel="tablet"] .app.echt { height: auto; zoom: 1.08; }
}

/* De hero in het design van de echte app: dezelfde tokens en klassen echt- als bij "Zo kan het
   eruitzien" hierboven, plus een paar eigen stukken met het voorvoegsel held- (alleen de hero).
   Altijd de lichte stand van de app, in beide stijlen van de site. De opbouw volgt de AppShell van de
   app (Project Snelstart, bouwstenen/design-system/components/AppShell.tsx):
   Laptop = een scherm van 1280 of breder: de uitgeklapte zijbalk met logo, naam en menu (het actieve
   item met een zachte vulling en een staafje van 2px links), de glazen bovenbalk met zoekveld, de
   paginakop (titel, gedempte regel eronder, een lijn) met de knop rechtsboven. Alles in em vanaf één
   lettergrootte die meeschaalt met het scherm, zoals een schermafdruk: op elke breedte hetzelfde beeld.
   Telefoon = geen zijbalk en geen tabbalk: bovenin de glazen balk met menuknop en zoekveld, de
   hoofdknop onderin in een vaste, effen actiebalk over de volle breedte. Dezelfde maten als de
   telefoon bij "Zo kan het eruitzien". */
.demo .p1 { --held-merk: #b9542a; }
.demo .p2 { --held-merk: #2c7a6a; }
.demo .p3 { --held-merk: #2d508c; }

/* laptop: de zijbalk, uitgeklapt met logo, naam en menu; het actieve item met een staafje links */
.app-laptop .app-scherm { font-size: clamp(7.5px, 1.83cqw, 11px); line-height: 1.45; }
.held-zij { flex: 0 0 11.5em; min-width: 0; display: flex; flex-direction: column; gap: 0.18em; padding: 0.95em 0.6em 0.7em; background: var(--e-vlak); border-right: 1px solid var(--e-lijn-zacht); }
.held-merk { display: flex; align-items: center; gap: 0.65em; min-width: 0; padding: 0.1em 0.45em 1em; }
.held-logo { flex: 0 0 auto; width: 2.2em; height: 2.2em; border-radius: 0.55em; display: grid; place-items: center; background: var(--held-merk); color: #fff; font-style: normal; font-weight: 700; }
.held-merk b { font-size: 1.28em; font-weight: 600; letter-spacing: -0.011em; }
.held-merk b, .held-nav > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.held-nav { position: relative; display: flex; align-items: center; gap: 0.6em; height: 2.55em; padding: 0 0.6em; border-radius: 0.6em; color: var(--e-tekst-2); white-space: nowrap; }
.app .held-nav .ic { width: 1.35em; height: 1.35em; stroke-width: 1.5; }
.held-nav.is-aan { background: var(--e-accent-zacht); color: var(--e-accent-tekst); font-weight: 500; }
.held-nav.is-aan::before { content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 1.35em; border-radius: 2px; background: var(--e-accent); transform: translateY(-50%); }
.held-nav b { margin-left: auto; padding: 0 0.55em; border-radius: 999px; background: var(--e-neutraal); color: var(--e-tekst-2); font-size: 0.85em; font-weight: 500; line-height: 1.6; font-variant-numeric: tabular-nums; }
.held-nav.held-onder { margin-top: auto; }

/* laptop: bovenbalk zonder menuknop (de zijbalk staat er al), paginakop met de knop rechts */
.app-laptop .echt-top { height: 3.4em; gap: 0.8em; padding: 0 1.1em; backdrop-filter: none; -webkit-backdrop-filter: none; }
.app-laptop .echt-zoek { flex: 0 1 19em; height: 2.5em; gap: 0.55em; padding: 0 0.8em; border-radius: 0.8em; font-size: 0.92em; }
.app-laptop .echt-zoek .ic { width: 1.2em; height: 1.2em; }
.held-wie { margin-left: auto; font-size: 0.92em; color: var(--e-muted); white-space: nowrap; }
.app-laptop .echt-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; padding: 1em 1.1em 0.9em; }
.held-titel { min-width: 0; display: grid; gap: 0.1em; }
.app-laptop .echt-h1 { font-size: 1.7em; } /* text-2xl tegenover de gewone tekst, zoals in de app */
.app-laptop .echt-sub { font-size: 0.92em; }
.app-laptop .echt-knop { height: 2.6em; padding: 0 1.05em; border-radius: 0.7em; font-size: 0.92em; }
.app-laptop .echt-inhoud { gap: 0.8em; padding: 0.95em 1.1em; overflow: hidden; }
.app-laptop .echt-kaart { border-radius: 0.9em; }
.app-laptop .echt-badge { height: 1.65em; padding: 0 0.55em; border-radius: 0.45em; font-size: 0.88em; }
.app-laptop .echt-kaart-kop { padding: 0.85em 1em 0.75em; }
.app-laptop .echt-kaart-kop b { font-size: 1.2em; }
.app-laptop .echt-kaart-kop span { font-size: 0.9em; }
/* op een laptop staat een regel op één lijn, zoals een tabel in de app: wat, de stand, de datum */
.app-laptop .echt-rijen { padding: 0.1em 1em; }
.app-laptop .echt-rijen li { align-items: center; gap: 1em; padding: 0.62em 0; }
.app-laptop .echt-rij { flex: 1; display: flex; align-items: center; gap: 0.8em; }
.app-laptop .echt-rij > b { flex: 0 0 9.5em; font-size: 1em; }
.app-laptop .echt-rij > span { min-width: 0; flex-wrap: nowrap; gap: 0.55em; font-size: 0.9em; }
.app-laptop .echt-rij em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-laptop .echt-rij .echt-badge { font-size: 1em; }
.app-laptop .echt-rechts { padding-top: 0.1em; font-size: 0.9em; }

/* opvolgen: drie kolommen, van nieuw tot offerte verstuurd */
.held-bord { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75em; }
.held-kolom { min-width: 0; display: flex; flex-direction: column; gap: 0.5em; padding: 0.55em; border-radius: 0.9em; background: rgba(16, 18, 26, 0.035); border: 1px solid var(--e-lijn-zacht); overflow: hidden; }
.held-kolom-kop { display: flex; align-items: center; gap: 0.45em; padding: 0.15em 0.3em 0.05em; font-weight: 600; white-space: nowrap; }
.held-kolom-kop i { font-style: normal; font-weight: 500; color: var(--e-muted); }
.held-kaart { min-width: 0; display: grid; gap: 0.2em; padding: 0.65em 0.75em 0.7em; border-radius: 0.7em; background: var(--e-vlak); border: 1px solid var(--e-lijn-zacht); box-shadow: var(--e-schaduw); }
.held-kaart b { font-weight: 600; }
.held-kaart em { font-style: normal; font-size: 0.92em; color: var(--e-muted); }
.held-kaart b, .held-kaart em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.held-plek { display: flex; align-items: center; gap: 0.3em; font-size: 0.88em; color: var(--e-muted); white-space: nowrap; }
.app .held-plek .ic { width: 1.15em; height: 1.15em; stroke-width: 1.6; }
.held-voet { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; margin-top: 0.3em; }
.held-voet small { font-size: 0.85em; color: var(--e-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* facturen: de koppeling bovenaan, daaronder de tabel */
.held-koppeling { flex: 0 0 auto; display: flex; align-items: center; gap: 0.8em; padding: 0.75em 1em; }
.app .held-koppeling > .ic { width: 2.4em; height: 2.4em; padding: 0.6em; border-radius: 50%; background: var(--e-groen-bg); color: var(--e-groen); stroke-width: 1.8; }
.held-koppeling > span { flex: 1; min-width: 0; display: grid; }
.held-koppeling b { font-weight: 600; }
.held-koppeling em { font-style: normal; font-size: 0.92em; color: var(--e-muted); }
.held-koppeling small { font-size: 0.85em; color: var(--e-muted); white-space: nowrap; }
.held-tabelkaart { flex: 0 0 auto; overflow: hidden; }
.held-tabel { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.95em; }
.held-tabel th { text-align: left; font-weight: 500; font-size: 0.92em; color: var(--e-muted); background: var(--e-put); padding: 0.6em 0.95em; border-bottom: 1px solid var(--e-lijn-zacht); }
.held-tabel td { padding: 0.52em 0.9em; border-top: 1px solid var(--e-lijn-zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.held-tabel tr:first-child td { border-top: 0; }
.held-tabel td:first-child { color: var(--e-muted); font-variant-numeric: tabular-nums; }
.held-tabel .r { text-align: right; font-variant-numeric: tabular-nums; }
.held-tabel th:nth-child(1) { width: 20%; }
.held-tabel th:nth-child(3) { width: 19%; }
.held-tabel th:nth-child(4) { width: 30%; }
.app-laptop .held-tabel .echt-badge { font-size: 0.92em; }

/* keuringen: de melding rechtsonder, net na het wisselen naar deze app */
.held-melding { position: absolute; z-index: 5; right: 1.1em; bottom: 1.1em; width: min(21em, 70%); display: flex; align-items: flex-start; gap: 0.7em; padding: 0.8em 0.95em; border-radius: 0.9em; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--e-lijn); box-shadow: 0 0.5em 1.4em -0.3em rgba(16, 18, 26, 0.16), 0 0.2em 0.4em -0.1em rgba(16, 18, 26, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6); font-size: 0.95em; line-height: 1.4; opacity: 0; transform: translateY(0.6em); transition: opacity 320ms ease 700ms, transform 320ms ease 700ms; }
.app .held-melding .ic { width: 1.4em; height: 1.4em; color: var(--e-rood); }
.held-melding b { display: block; font-weight: 600; }
.demo[data-scene="3"] .held-melding { opacity: 1; transform: none; }
/* op de tablet: weg zodra de keuring is ingepland */
.demo[data-scene="3"] .held-melding.is-weg { opacity: 0; transform: translateY(0.6em); transition-delay: 0ms; }
/* wat alleen op de tablet hoort (de knoppen, de conceptfactuur, de melding na een tik): op de laptop weg */
.app-laptop .held-tablet { display: none; }

/* tegels met een getal (keuringen op de telefoon) */
.held-tegels { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75em; }
.held-tegel { min-width: 0; display: grid; gap: 0.1em; padding: 0.7em 0.85em; border-radius: 0.9em; background: var(--e-vlak); border: 1px solid var(--e-lijn-zacht); box-shadow: var(--e-schaduw); }
.held-tegel em { font-style: normal; font-size: 0.9em; color: var(--e-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.held-tegel b { font-size: 1.55em; font-weight: 600; line-height: 1.25; letter-spacing: -0.011em; font-variant-numeric: tabular-nums; }

/* telefoon: de bovenbalk met menuknop komt van .echt; de melding over de bovenbalk heen */
.app-telefoon.echt { font-size: 11.5px; line-height: 1.45; }
.app-telefoon .echt-toast { top: 6px; }
.held-groep { margin: 2px 2px -4px; }
.held-kop-rij { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.held-bedrag { color: var(--e-tekst); }
.held-totaal .echt-rij > b, .held-totaal .held-bedrag { font-weight: 600; }
/* de hoofdactie onderaan, binnen bereik van je duim, zoals de app dat op een telefoon doet */
.held-actiebalk { flex: 0 0 auto; padding: 10px 12px 18px; background: var(--e-vlak); border-top: 1px solid var(--e-lijn-zacht); }
.app .held-actiebalk .echt-knop-breed { margin-top: 0; }

/* telefoon: de pushmelding bij de keuringen; weg zodra de keuring is ingepland */
.held-push { position: absolute; z-index: 6; left: 8px; right: 8px; top: 4px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--e-lijn); box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.55); line-height: 1.35; pointer-events: none; opacity: 0; transform: translateY(-14px); transition: opacity 320ms ease 700ms, transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1) 700ms; }
.held-push-icoon { width: 30px; height: 30px; border-radius: 8px; background: var(--held-merk); color: #fff; display: grid; place-items: center; font-weight: 700; }
.held-push b { display: block; font-weight: 600; }
.held-push em { align-self: start; font-style: normal; font-size: 10.5px; color: var(--e-muted); }
.demo[data-scene="3"] .held-push { opacity: 1; transform: none; }
.demo[data-scene="3"] .held-push.is-weg { opacity: 0; transform: translateY(-14px); transition-delay: 0ms; }

/* zo werk ik */
.stappen { list-style: none; margin: 0; padding: 0; display: grid; }
.stappen li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 22px 0; align-items: start; }
/* een lijn van cijfer naar cijfer: zo is de leesrichting duidelijk, ook in twee kolommen */
.stappen li::before { content: ""; position: absolute; left: 21px; top: calc(22px + 44px + 6px); bottom: -16px; width: 2px; border-radius: 2px; background: var(--lijn-2); }
.stappen li:last-child::before { display: none; }
.stap-nr { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-kop); font-weight: 600; font-size: 1.05rem; color: var(--tekst); background: var(--glas-2); border: 1px solid var(--lijn-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.stappen h3 { margin-bottom: 6px; }
.stappen p { margin: 0; color: var(--tekst-2); }
@media (min-width: 900px) {
  /* op een laptop: eerst de linkerkolom van boven naar beneden (1, 2), dan de rechter (3, 4) */
  .stappen { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, auto); grid-auto-flow: column; column-gap: 72px; }
  .stappen li:nth-child(2)::before { display: none; }
}

/* veilig */
.vinklijst { list-style: none; margin: 0; padding: 8px; display: grid; }
.vinklijst li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 18px 20px; align-items: start; color: var(--tekst-2); }
.vinklijst li + li { border-top: 1px solid var(--lijn); }
.vinklijst .ic { color: var(--tekst); margin-top: 3px; }
.vinklijst b { display: block; color: var(--tekst); font-weight: 600; margin-bottom: 4px; }
@media (min-width: 820px) {
  .vinklijst { grid-template-columns: 1fr 1fr; }
  .vinklijst li + li { border-top: 0; }
  .vinklijst li:nth-child(n + 3) { border-top: 1px solid var(--lijn); }
  .vinklijst li:nth-child(even) { border-left: 1px solid var(--lijn); }
}

/* veilig: het statusscherm uit de app, als bewijs bij "dat kun je zelf nakijken". Het scherm staat op het
   apparaat dat je vasthoudt:
   - telefoon (onder 640, en tot 900 met een muis): een echte telefoon tussen de inleiding en de lijst,
     zelfde maat, rand en glas als de voorbeeldtelefoons bij "Zo kan het eruitzien" (310 breed, scherm
     560 hoog, statusbalk, klein rond cameragaatje). Hij kantelt bij binnenkomen recht voor je, net als
     die telefoons;
   - tablet (640 tot 1100 met een touchscherm): een tablet in de breedte, zwart glas met de metalen rand
     en een camera boven, net als de tablet bij "Zo kan het eruitzien" op een laptop;
   - laptop (vanaf 900 met een muis, vanaf 1100 altijd): de telefoon schuin naast de vier punten. Een
     smal laptopvenster krijgt zo geen tablet, en het beeld verspringt niet als je het venster breder
     maakt.
   Alles hangt aan #veilig, zodat de regels voor de andere toestellen (hero, voorbeelden) hier niets
   veranderen. Wat er in het scherm staat, staat in het blok "veilig: het scherm in het design van de
   echte app" hieronder. */
.veilig-beeld { margin-bottom: 28px; min-width: 0; }
#veilig .mini-stand {
  width: 310px; max-width: 100%; margin: 0 auto; padding: 10px; border-radius: 48px; background: #07090f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 0 0 1.5px #3a4258, 0 0 0 2.5px #1c2232, 0 40px 70px -36px rgba(0, 0, 0, 0.8);
}
#veilig .mini-stand .app { height: 560px; border-radius: 40px; }
#veilig .mini-stand .mini-status { display: flex; }
#veilig .mini-stand::before { content: ""; position: absolute; z-index: 4; top: 29px; left: 50%; width: 11px; height: 11px; border-radius: 50%; background: #05070c; box-shadow: inset 0 0 0 2.5px #121726, 0 0 0 1px rgba(255, 255, 255, 0.05); transform: translateX(-50%); }
#veilig .mini-stand::after { content: none; }

/* telefoon onder de inleiding: kantelt recht voor je terwijl je scrolt, daarna staat hij stil */
@media (max-width: 639px), (max-width: 899px) and (pointer: fine), (max-width: 899px) and (pointer: none) {
  .veilig-beeld { perspective: 1400px; }
}

/* tablet: zo breed als de lijst, de app zonder statusbalk, en de camera in de rand boven */
@media (min-width: 640px) and (max-width: 1099px) and (pointer: coarse) {
  .veilig-beeld { perspective: 1400px; }
  #veilig .mini-stand { width: auto; max-width: none; padding: 12px; border-radius: 30px; }
  #veilig .mini-stand .app { height: auto; border-radius: 19px; }
  #veilig .mini-stand .mini-status { display: none; }
  #veilig .mini-stand::before { top: 4px; width: 5px; height: 5px; background: #0c0f18; box-shadow: 0 0 0 1.5px #2a3144; }
}

/* laptop: de telefoon schuin naast de vier punten, die onder elkaar staan, zodat ze niet als een klein
   blokje in de ruimte zweven. De zijkant van het toestel rechts, net als bij de voorbeelden. */
@media (min-width: 1100px), (min-width: 900px) and (pointer: fine), (min-width: 900px) and (pointer: none) {
  .veilig-raster { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 36px; align-items: center; }
  .veilig-raster .vinklijst { grid-template-columns: 1fr; }
  .veilig-raster .vinklijst li { padding: 22px 24px; gap: 14px; }
  .veilig-raster .vinklijst li:nth-child(even) { border-left: 0; }
  .veilig-raster .vinklijst li + li { border-top: 1px solid var(--lijn); }
  .veilig-beeld { order: 2; margin: 0; perspective: 1800px; }
  /* zelfde gedrag als de voorbeeldtelefoon: 8 graden schuin, en bij aanwijzen helemaal recht */
  #veilig .mini-stand {
    --kant: -8deg;
    max-width: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 0 0 1.5px #3a4258, 0 0 0 2.5px #1c2232, 0 50px 80px -44px rgba(0, 0, 0, 0.8);
    transform-style: preserve-3d; transform: rotateY(var(--kant)) rotateX(4deg);
    transition: rotate 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  #veilig .mini-stand .app { height: 600px; }
  #veilig .mini-stand:hover { rotate: y calc(var(--kant) * -1); }
  #veilig .mini-stand::after {
    content: ""; position: absolute; top: 60px; bottom: 60px; left: 100%; width: 9px;
    transform-origin: 0 50%; transform: rotateY(90deg);
    background: linear-gradient(90deg, #3a4258, #161b28); border-radius: 0 4px 4px 0;
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @media (max-width: 1099px) {
      #veilig .mini-stand { animation: telefoon-scroll linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    }
    @media (min-width: 1100px), (min-width: 900px) and (pointer: fine), (min-width: 900px) and (pointer: none) {
      #veilig .mini-stand { animation: toestel-in linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  #veilig .mini-stand { transition: none; animation: none; }
  #veilig .mini-stand:hover { rotate: none; }
}

/* licht: de telefoon onder de inleiding krijgt dezelfde zachte schaduw als de voorbeeldtelefoons op een
   telefoon (zonder metalen rand); tablet en laptop houden de rand, net als de toestellen bij de
   voorbeelden op een laptop. Twee keer, net als bovenaan en onderaan: voor de knop en voor het apparaat. */
@media (max-width: 639px), (max-width: 899px) and (pointer: fine), (max-width: 899px) and (pointer: none) {
  :root[data-stijl="licht"] #veilig .mini-stand { box-shadow: 0 40px 70px -36px rgba(16, 20, 31, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
  @media (prefers-color-scheme: light) {
    :root:not([data-stijl="donker"]) #veilig .mini-stand { box-shadow: 0 40px 70px -36px rgba(16, 20, 31, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
  }
}

/* veilig: het scherm in het design van de echte app. Dezelfde onderdelen als bij "Zo kan het eruitzien"
   (bovenbalk, paginakop, kaart, badge: echt-*), met de opbouw van de kaart Systeem onder Instellingen,
   Gegevens en systeem: in de kop de titel, de uitleg en het oordeel als badge; eronder het oordeel in
   gewone taal en de controles uit "Details voor de beheerder", elk met een badge. Altijd de lichte stand
   van de app. Op de telefoon staat er "terug naar Instellingen" boven de titel, zoals de app dat op een
   telefoon doet. */
.veilig-beeld .app.echt { display: flex; flex-direction: column; gap: 0; padding: 0; font-size: 11.5px; line-height: 1.45; }
.stand-kop { gap: 0; }
.stand-terug { display: inline-flex; align-items: center; gap: 2px; margin: -2px 0 4px -3px; font-size: 11px; color: var(--e-accent-tekst); }
.stand-terug svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.stand-kaart-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 9px 11px 8px; border-bottom: 1px solid var(--e-lijn-zacht); }
.stand-kaart-kop > span { min-width: 0; display: grid; gap: 1px; }
.stand-kaart-kop b { font-size: 13.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.011em; }
.stand-kaart-kop em { font-style: normal; font-size: 10px; color: var(--e-muted); }
.stand-romp { padding: 9px 11px 11px; }
.stand-oordeel { margin: 0; display: grid; font-size: 11px; }
.stand-oordeel b { font-weight: 500; }
.stand-oordeel span { color: var(--e-muted); }
.stand-details { margin-top: 8px; padding: 0 9px 3px; border: 1px solid var(--e-lijn-zacht); border-radius: 7px; }
.stand-summary { display: flex; align-items: center; min-height: 26px; font-size: 11px; color: var(--e-tekst-2); }
.stand-gemeten { display: block; font-size: 10px; color: var(--e-muted); }
.stand-lijst { list-style: none; margin: 3px 0 0; padding: 0; }
.stand-lijst li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; }
.stand-lijst li + li { border-top: 1px solid var(--e-lijn-zacht); }
.stand-lijst li > span { min-width: 0; display: grid; }
.stand-lijst b { font-size: 11px; font-weight: 400; }
.stand-lijst em { font-style: normal; font-size: 10px; line-height: 1.35; color: var(--e-muted); }
.veilig-beeld .stand-extra { display: none; }
/* tablet: geen pijltje terug, het zoekveld niet over de hele breedte, en in de kaart het oordeel links
   en de controles rechts in twee kolommen; zo blijft de tablet laag */
@media (min-width: 640px) and (max-width: 1099px) and (pointer: coarse) {
  .veilig-beeld .stand-terug { display: none; }
  .veilig-beeld .echt-zoek { flex: 0 1 280px; }
  .veilig-beeld .stand-romp { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr); gap: 14px; align-items: start; }
  .veilig-beeld .stand-details { margin-top: 0; }
  .veilig-beeld .stand-lijst { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .veilig-beeld .stand-lijst li + li { border-top: 0; }
  .veilig-beeld .stand-lijst li:nth-child(n + 3) { border-top: 1px solid var(--e-lijn-zacht); }
}
/* de telefoon naast de lijst is hoog genoeg voor alle zes de controles */
@media (min-width: 1100px), (min-width: 900px) and (pointer: fine), (min-width: 900px) and (pointer: none) {
  .veilig-beeld .stand-extra { display: flex; }
}

/* vinklijst met kop en uitleg (eerder gebouwd) */
.prijs-kop { margin: 6px 0 -4px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.vinkjes { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; color: var(--tekst-2); }
.vinkjes li { position: relative; padding-left: 28px; }
.vinkjes li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 18px; height: 18px; border-radius: 50%; background: var(--glas-2) var(--vink) center / 11px no-repeat; border: 1px solid var(--lijn-2); }
.vinkjes li b { display: block; color: var(--tekst); font-weight: 600; }
.vinkjes li span { display: block; font-size: 0.95rem; }

/* kosten: twee pakketten als kaarten. Op een laptop staan hun regels via subgrid op dezelfde hoogte,
   zodat je per regel kunt vergelijken. Daaronder één smalle rij met wat in allebei zit, en onderhoud
   als één vergelijkingstabel. */
.prijs-label { margin: 0 0 12px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.prijzen { display: grid; gap: 14px; }
.prijs { padding: 20px 18px 18px; display: grid; align-content: start; }
.prijs.is-uitgelicht { background: linear-gradient(180deg, var(--uitgelicht-1), var(--uitgelicht-2)); border-color: var(--lijn-2); }
/* Voor later: de pil "Meest gekozen" steekt half door de bovenrand van de kaart (staat nu als commentaar in index.html). */
.prijs.is-uitgelicht { position: relative; }
.prijs.is-uitgelicht .chip-wit { position: absolute; top: -15px; left: 18px; }
@media (min-width: 720px) { .prijs.is-uitgelicht .chip-wit { left: 26px; } }
.prijs-naam { margin: 0; font-size: 1.2rem; }
.prijs-voor { margin: 3px 0 0; color: var(--tekst-2); }
.prijs-bedrag { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 14px; font-family: var(--font-kop); font-weight: 600; font-size: clamp(2rem, 3.4vw, 2.35rem); letter-spacing: -0.03em; line-height: 1; color: var(--tekst); white-space: nowrap; }
/* geen tabelcijfers in de bedragen: daarmee werd de punt in "8.500" zo breed als een cijfer */
.prijs-bedrag i, .kol-bedrag i { font-style: normal; font-family: var(--font-tekst); font-weight: 400; font-size: 0.95rem; letter-spacing: 0; color: var(--muted); }
/* --rij is de ruimte boven en onder elke regel; het rondje staat midden op de eerste tekstregel (24px hoog) */
/* rustig, net als de onderhoudstabel: één lijn onder het bedrag, geen lijnen tussen de regels */
.prijs-lijst { --rij: 7px; list-style: none; margin: 0 0 20px; padding: 10px 0 0; display: grid; border-top: 1px solid var(--lijn); font-size: 1rem; line-height: 1.5; }
.prijs-lijst li { position: relative; padding: var(--rij) 0 var(--rij) 30px; color: var(--tekst-2); }
.prijs-lijst li b { color: var(--tekst); font-weight: 600; }
.prijs-lijst li small { display: block; font-size: 0.82rem; line-height: 1.4; color: var(--muted); }
/* het vinkje en het streepje: hetzelfde rondje in de pakketkaarten en in de onderhoudstabel */
.prijs-lijst li::before, .vink { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--glas-2) var(--vink) center / 11px no-repeat; border: 1px solid var(--lijn-2); }
.prijs-lijst li::before { position: absolute; left: 0; top: calc(var(--rij) + 3px); }
.vink { position: relative; display: inline-block; vertical-align: middle; }
.prijs-lijst li.is-niet { color: var(--muted); }
.prijs-lijst li.is-niet::before, .vink.is-niet { background: transparent; border-color: var(--lijn); }
.prijs-lijst li.is-niet::after, .vink.is-niet::after { content: ""; position: absolute; width: 8px; height: 1.5px; border-radius: 1px; background: var(--muted); }
.prijs-lijst li.is-niet::after { left: 5px; top: calc(var(--rij) + 3px + 8.25px); }
.vink.is-niet::after { left: 4px; top: 7.25px; }

/* in allebei: één smalle rij met vier punten. Alleen wat over de prijs gaat en nergens anders staat.
   Op een telefoon onder elkaar, het vette deel en de rest op één regel; breder in kolommen, het vette
   deel als titel met de rest eronder. */
.allebei { margin-top: 14px; padding: 16px 18px 18px; display: grid; gap: 14px; }
.allebei-kop { margin: 0; font-size: 1rem; }
.allebei-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 0.95rem; line-height: 1.45; text-wrap: pretty; }
.allebei-lijst li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; color: var(--tekst-2); }
.allebei-lijst .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--muted); }
.allebei-lijst b { color: var(--tekst); font-weight: 600; }
/* de link naar Veilig staat in de tekst; het raakvlak is groter dan het woord (44px hoog) */
.allebei-lijst a { position: relative; }
.allebei-lijst a::after { content: ""; position: absolute; inset: -13px -8px; }
@media (min-width: 480px) {
  .allebei-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .allebei-lijst b { display: block; }
}

/* onderhoud: één tabel, drie vormen naast elkaar. Op een telefoon past hij zonder scrollen: de eerste
   kolom breder dan de drie andere (daar staat alleen een vinkje), kleine letters, en een korte naam
   boven de kolommen. --kol is de breedte van de eerste kolom. */
.onderhoud { --kol: 46%; margin-top: clamp(36px, 4vw, 44px); }
.onderhoud-kop .prijs-label { margin-bottom: 4px; }
.onderhoud-intro { margin: 0 0 14px; color: var(--tekst-2); }
.onderhoud-paneel { border-radius: var(--r); }
.onderhoud-tabel { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.875rem; line-height: 1.4; }
.kol-wat { width: var(--kol); }
.onderhoud-tabel col.is-uitgelicht { background: var(--uitgelicht-kolom); }
.onderhoud-tabel th, .onderhoud-tabel td { padding: 8px 2px; text-align: center; vertical-align: middle; }
/* rustig: geen lijnen tussen de regels en geen streepje waar iets er niet in zit (leeg = nee, voor
   schermlezers staat er "nee"); alleen een lijn onder de koppen en onder de reactietijd */
.onderhoud-tabel tbody tr:first-child { border-top: 1px solid var(--lijn); }
.onderhoud-tabel tbody tr:first-child th, .onderhoud-tabel tbody tr:first-child td { border-bottom: 1px solid var(--lijn); }
.onderhoud-tabel .vink.is-niet { visibility: hidden; }
.onderhoud-tabel tbody th { padding: 8px 4px 8px 12px; text-align: left; font-weight: 400; color: var(--tekst-2); }
.onderhoud-tabel thead th { padding: 12px 2px 10px; vertical-align: bottom; font-weight: 600; }
.kol-naam { display: block; font-size: 0.75rem; line-height: 1.25; color: var(--tekst); }
/* "€ 95" blijft bij elkaar; "per maand" mag eronder */
.kol-bedrag { display: block; margin-top: 5px; font-family: var(--font-kop); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--tekst); }
.kol-bedrag i { display: block; margin-top: 2px; font-size: 0.68rem; }
.naam-lang { display: none; }
.tijd { font-size: 0.8rem; font-weight: 600; line-height: 1.3; color: var(--tekst); }
.onderhoud-noot { margin: 12px 0 0; max-width: 70ch; font-size: 0.85rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
/* de laatste kolom niet tegen de rand */
@media (max-width: 719px) { .onderhoud-tabel tr > :last-child { padding-right: 6px; } }
@media (max-width: 389px) { .onderhoud { --kol: 44%; } }
/* smaller dan 375: boven de kolom alleen de korte naam en het bedrag; "per maand" staat in de titel erboven */
@media (max-width: 374px) { .kol-naam { font-size: 0.7rem; } .kol-bedrag i { display: none; } }
/* op de smalste telefoons een kleiner bedrag en kleinere reactietijden */
@media (max-width: 359px) {
  .kol-bedrag { font-size: 1rem; }
  .tijd { font-size: 0.72rem; }
  .onderhoud-tabel tbody th { padding-left: 10px; }
}

@media (min-width: 720px) {
  .prijzen { grid-template-columns: 1fr 1fr; gap: 20px; }
  .prijs { grid-row: span 9; grid-template-rows: subgrid; row-gap: 0; padding: 24px 26px 22px; }
  .prijs-lijst { grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .allebei { margin-top: 16px; padding: 18px 26px 20px; }
  /* de titel en de inleiding staan in de lege hoek linksboven van de tabel: even breed als de eerste
     kolom, en de kopregel (--hoek) is hoog genoeg voor twee regels inleiding */
  .onderhoud { --kol: 42%; --hoek: 112px; display: grid; grid-template-columns: var(--kol) minmax(0, 1fr); }
  .onderhoud-kop { grid-area: 1 / 1; z-index: 1; height: var(--hoek); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 14px 14px 27px; }
  .onderhoud-intro { margin: 0; line-height: 1.45; }
  .onderhoud-paneel { grid-area: 1 / 1 / 2 / 3; border-radius: var(--r-groot); }
  .onderhoud-noot { grid-column: 1 / -1; }
  .onderhoud-tabel { font-size: 1rem; line-height: 1.45; }
  .onderhoud-tabel thead th { height: var(--hoek); padding: 16px 8px 14px; }
  .onderhoud-tabel tbody th { padding: 8px 16px 8px 26px; }
  .onderhoud-tabel td { padding: 8px; }
  .naam-lang { display: inline; }
  .naam-kort { display: none; }
  .kol-naam { font-size: 0.95rem; }
  .kol-bedrag { font-size: 1.6rem; }
  .kol-bedrag i { font-size: 0.85rem; }
  .tijd { font-size: 0.95rem; }
}
@media (min-width: 1024px) {
  .allebei { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 40px; }
  .allebei-lijst { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .onderhoud { --kol: 46%; --hoek: 88px; }
  .kol-bedrag i { display: inline; margin-left: 4px; }
  .onderhoud-noot { max-width: none; }
}
/* breed genoeg: elke regel van de tabel op één regel, en in allebei elk punt op twee regels (de
   kolommen zo breed als hun tekst, met gelijke ruimte ertussen) */
@media (min-width: 1200px) {
  .onderhoud { --kol: 48%; --hoek: 84px; }
  .allebei-lijst { grid-template-columns: repeat(4, auto); justify-content: space-between; }
}

/* vragen: uitklapbaar, zodat de afspraken achter de prijs er staan zonder de pagina lang te maken */
.vragen-groep + .vragen-groep { margin-top: clamp(28px, 4vw, 40px); }
.vragen { list-style: none; margin: 0; padding: 6px 8px; }
.vragen li + li { border-top: 1px solid var(--lijn); }
.vragen summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 12px 16px; cursor: pointer; list-style: none; font-weight: 600; color: var(--tekst); border-radius: 12px; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-3px) rotate(45deg); transition: transform 150ms ease; }
.vragen details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.vragen summary:focus-visible { outline: 2px solid var(--tekst); outline-offset: -2px; }
.vragen details p { margin: 0; padding: 0 16px 16px; color: var(--tekst-2); max-width: 70ch; }
@media (min-width: 900px) {
  .vragen-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  .vragen-groep + .vragen-groep { margin-top: 0; }
}

/* eerder gebouwd: één klant, dus hooguit één citaat (alleen als er een echte tekst in CONFIG.review
   staat), wat de app voor ze doet, en vier feiten. Op een laptop staat het citaat links en breder, de
   lijst rechts en de feiten eronder; zonder citaat staan de lijst en de feiten naast elkaar. */
.geval { padding: 28px 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.feiten { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; padding-top: 24px; border-top: 1px solid var(--lijn); }
.feiten div { display: grid; gap: 4px; align-content: start; min-width: 0; }
.feiten dt { font-family: var(--font-kop); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; line-height: 1.05; color: var(--tekst); }
.feiten dd { margin: 0; color: var(--muted); font-size: 0.95rem; text-wrap: pretty; }
/* op een heel smalle telefoon onder elkaar, anders past er maar twee woorden op een regel */
@media (max-width: 369px) { .feiten { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 720px) { .feiten { grid-template-columns: repeat(4, 1fr); } .geval { padding: 36px; } }

/* het citaat: groot en rustig, hooguit zo'n 60 tekens per regel, met één aanhalingsteken in de kleur
   van de ster uit het logo */
.citaat { --citaat-teken: #e6b85c; margin: 0; min-width: 0; }
.citaat-teken { display: block; height: 0.5em; font-family: var(--font-kop); font-size: 4.5rem; font-weight: 600; line-height: 1; color: var(--citaat-teken); user-select: none; }
.citaat-tekst { margin: 0; }
.citaat-tekst p {
  margin: 0; max-width: 30em; color: var(--tekst);
  font-family: var(--font-kop); font-weight: 500; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem); line-height: 1.4; letter-spacing: -0.012em;
  text-wrap: pretty; overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 10 4 4; /* alleen lange woorden afbreken */
}
.citaat-wie { display: flex; align-items: center; gap: 14px; margin-top: 24px; min-width: 0; }
.citaat-wie .portret { width: 48px; height: 48px; font-size: 0.95rem; }
.citaat-namen { display: grid; gap: 2px; min-width: 0; line-height: 1.35; }
.citaat-naam { color: var(--tekst); font-weight: 600; overflow-wrap: anywhere; }
.citaat-functie { color: var(--tekst-2); font-size: 0.95rem; overflow-wrap: anywhere; }

/* wat de app voor ze doet: alleen de namen, zonder uitleg en zonder schermen */
.doet { display: grid; gap: 14px; align-content: start; min-width: 0; }
.doet-kop { margin: 0; font-family: var(--font-tekst); line-height: 1.4; }
.doet-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 24px; }
.doet-lijst li { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--tekst); font-weight: 500; line-height: 1.35; overflow-wrap: break-word; }
.doet-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--glas-2); border: 1px solid var(--lijn); color: var(--tekst); }
.doet-ic .ic { width: 19px; height: 19px; }
@media (min-width: 600px) and (max-width: 899px) { .doet-lijst { grid-template-columns: 1fr 1fr; } }
/* op een telefoon: citaat, lijst en feiten onder elkaar, gescheiden door een dunne lijn */
.heeft-citaat .doet { padding-top: 24px; border-top: 1px solid var(--lijn); }

@media (min-width: 900px) {
  .geval { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 36px 40px; }
  /* zonder citaat: de lijst links, de feiten rechts, twee bij twee */
  .geval .feiten { grid-template-columns: 1fr 1fr; gap: 26px 24px; align-content: center; padding: 0 0 0 40px; border-top: 0; border-left: 1px solid var(--lijn); }
  /* met citaat: het citaat links en breder, de lijst rechts, de feiten over de volle breedte eronder */
  .geval.heeft-citaat { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: 48px; align-items: center; }
  .heeft-citaat .doet { padding: 0 0 0 40px; border-top: 0; border-left: 1px solid var(--lijn); }
  .heeft-citaat .feiten { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); gap: 18px 20px; padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--lijn); }
}

/* licht: het aanhalingsteken iets donkerder, anders verdwijnt het tegen het witte glas */
:root[data-stijl="licht"] .citaat { --citaat-teken: #a8761c; }
@media (prefers-color-scheme: light) {
  :root:not([data-stijl="donker"]) .citaat { --citaat-teken: #a8761c; }
}

/* contact */
.contact { padding: 28px 24px; display: grid; gap: 26px; align-items: center; }
.contact h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.contact .intro { margin: 0; }
.contact-kaart { display: grid; gap: 12px; justify-items: start; padding: 24px; border-radius: var(--r); background: var(--glas-2); border: 1px solid var(--lijn); }
.contact-naam { font-family: var(--font-kop); font-weight: 600; font-size: 1.35rem; margin: 0; color: var(--tekst); }
.contact-regel { margin: 0; color: var(--tekst-2); }
.contact-kaart .klein { margin: 0; word-break: break-word; }
@media (min-width: 900px) { .contact { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; padding: 40px; } }

/* Over mij: bewust bescheiden. Een kleine ronde foto (of initialen) naast de naam, geen portret.
   Daaronder de bedrijfsgegevens onderaan de site en de opmaak van privacy.html. */
.over-mij { display: flex; align-items: center; gap: 14px; }
.over-mij .contact-naam { font-size: 1.2rem; line-height: 1.25; }
@media (max-width: 479px) { .over-mij { gap: 12px; } .over-mij .contact-naam { font-size: 1.08rem; } .over-mij .contact-regel { font-size: 0.95rem; line-height: 1.45; } }
.portret {
  position: relative; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; background: linear-gradient(145deg, var(--teken-1), var(--teken-2));
  border: 1px solid var(--lijn-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #fff; font-family: var(--font-kop); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em;
}
.portret img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* alleen met ?voorbeeld: een klein label onder de initialen */
.portret[data-label] { margin-bottom: 16px; }
.portret[data-label]::after { content: attr(data-label); position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap; font-family: var(--font-tekst); font-weight: 500; font-size: 0.7rem; letter-spacing: 0; color: var(--muted); }
.over-mij-tekst { margin: 0; color: var(--tekst-2); }
.contact-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.contact-kaart .contact-terugbellen { color: var(--tekst-2); }
.voet-gegevens { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; color: var(--muted); }
.voet-gegevens li { display: inline-flex; align-items: center; gap: 0.3em; min-height: 32px; }
.voet-gegevens li:has(a) { min-height: 44px; }
.voet-gegevens a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tekst-2); }
.voet-gegevens a:hover { color: var(--tekst); }

/* privacy.html: dezelfde kop, een smalle leeskolom */
.kop-terug { order: 1; margin-left: auto; min-height: 44px; }
/* op een smalle telefoon past alleen de pijl naast logo en naam */
@media (max-width: 479px) { .kop-terug { width: 44px; padding: 0; } .kop-terug-tekst { display: none; } }
.pagina-tekst .stijlknop { margin-left: 10px; }
.privacy { padding: calc(var(--kop-hoogte) + 40px) 0 clamp(48px, 7vw, 88px); }
.privacy-tekst { max-width: 68ch; }
.privacy-tekst h1 { font-size: clamp(2.2rem, 5.2vw, 3.4rem); margin-bottom: 0.3em; }
.privacy-datum { color: var(--muted); margin-bottom: 2em; }
.privacy-tekst h2 { font-size: 1.3rem; margin: 2em 0 0.5em; }
.privacy-tekst p, .privacy-tekst li { color: var(--tekst-2); }
.privacy-tekst ul { padding-left: 1.2em; margin: 0 0 1em; }
.privacy-tekst li + li { margin-top: 6px; }
.privacy-tekst b { color: var(--tekst); font-weight: 600; }
.privacy-tekst ul.privacy-gegevens { list-style: none; padding: 18px 20px; border-radius: var(--r); background: var(--glas-2); border: 1px solid var(--lijn); }

/* voet */
.voet { padding: 26px 0 40px; border-top: 1px solid var(--lijn); }
.voet-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.voet .klein { margin: 0; }

/* ------------------------------------------------------- minder beweging */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before { animation: none; }
  [data-opkomen] { animation: none; }
  .laptop, .laptop-romp, .laptop-deksel, .app-laptop::after, .app-laptop::before { animation: none; }
  .app-laptop::after, .app-laptop::before { opacity: 0; }
  .telefoon { animation: none; }
  .app-scherm, .held-melding, .held-push { transition-duration: 1ms !important; transition-delay: 0ms !important; }
}

/* Standaard volgt de site het apparaat: wil dat licht, dan gelden de lichte regels hierboven ook,
   tenzij iemand met de knop bewust donker koos (data-stijl="donker"). */
@media (prefers-color-scheme: light) {
  :root:not([data-stijl="donker"]) {
    color-scheme: light;
    --bg: #eef1f6;
    --tekst: #10141f; --tekst-2: #3a4356; --muted: #6b7486;
    --lijn: rgba(16, 20, 31, 0.10); --lijn-2: rgba(16, 20, 31, 0.18);
    --glas: rgba(255, 255, 255, 0.50); --glas-2: rgba(255, 255, 255, 0.72);
    --knop-bg: #10141f; --knop-tekst: #ffffff; --knop-hover: #262d3f;
    --paneel-1: rgba(255, 255, 255, 0.74); --paneel-2: rgba(255, 255, 255, 0.52);
    --uitgelicht-1: rgba(255, 255, 255, 0.96); --uitgelicht-2: rgba(255, 255, 255, 0.82);
    --uitgelicht-kolom: rgba(255, 255, 255, 0.8);
    --kop-bg: rgba(238, 241, 246, 0.65);
    --teken-1: #1d2542; --teken-2: #0f1424;
    --vink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310141f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  }
  :root:not([data-stijl="donker"]) body::before {
    background:
      radial-gradient(55vw 55vh at 22% 18%, rgba(76, 118, 214, 0.30), transparent 62%),
      radial-gradient(45vw 45vh at 84% 28%, rgba(214, 160, 84, 0.24), transparent 62%),
      radial-gradient(70vw 60vh at 55% 100%, rgba(58, 92, 178, 0.22), transparent 62%);
  }
  :root:not([data-stijl="donker"]) body::after { opacity: 0.03; }
  :root:not([data-stijl="donker"]) .paneel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 30px 60px -44px rgba(16, 20, 31, 0.35); }
  :root:not([data-stijl="donker"]) .telefoon-rand, :root:not([data-stijl="donker"]) .mini { box-shadow: 0 40px 70px -36px rgba(16, 20, 31, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
  :root:not([data-stijl="donker"]) .stijlknop .ic-zon { display: none; }
  :root:not([data-stijl="donker"]) .stijlknop .ic-maan { display: block; }
  :root:not([data-stijl="donker"]) .kop.is-open { background: rgba(238, 241, 246, 0.96); }
}
/* de tablet in de hero (alleen op een tablet; op een laptop blijft het scherm zoals het is) */
@media (prefers-color-scheme: light) and (pointer: coarse) and (min-width: 600px) {
  :root:not([data-stijl="donker"]) .laptop-scherm { box-shadow: 0 50px 90px -44px rgba(16, 20, 31, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
}

/* Op een telefoon zijn alle voorbeeldtelefoons precies zo groot als de telefoon in de hero:
   330 breed, 660 hoog, dezelfde rand en hoeken. Staat bewust onderaan, zodat hij altijd wint. */
@media (max-width: 899px) {
  .voorbeeld-beeld .mini { width: 330px; max-width: 100%; height: auto; padding: 10px; border-radius: 48px; margin: 0 auto; }
  .voorbeeld-beeld .mini .app { height: 640px; border-radius: 40px; padding: 12px 16px 22px; }
}

/* Op een laptop zijn de voorbeeldschermen echte apparaten, net als de laptop in de hero: een telefoon
   waar het werk op de telefoon gebeurt, een tablet voor de werkplaats en het klantportaal. Ze staan
   schuin naar de tekst toe, draaien op hun plek terwijl je ernaartoe scrolt en keren zich naar je toe
   als je erop wijst. Staat bewust onderaan, zodat het wint van de vlakke schermen hierboven. */
@media (min-width: 900px) {
  .voorbeeld-beeld { perspective: 1800px; }
  /* licht schuin (8 graden de telefoon, 6 de tablet), zodat de tekst in de app goed te lezen is */
  .voorbeeld-beeld .mini[data-toestel] {
    --kant: -8deg;
    padding: 12px; border-radius: 30px; background: #07090f;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 0 0 1.5px #3a4258, 0 0 0 2.5px #1c2232, 0 50px 80px -44px rgba(0, 0, 0, 0.8);
    transform-style: preserve-3d; transform: rotateY(var(--kant)) rotateX(4deg);
    transition: rotate 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .voorbeeld.is-omgekeerd .mini[data-toestel] { --kant: 6deg; }
  .voorbeeld-beeld .mini[data-toestel] .app { border-radius: 19px; }
  /* wie erop wijst, krijgt het scherm recht voor zich */
  .voorbeeld-beeld .mini[data-toestel]:hover { rotate: y calc(var(--kant) * -1); }
  /* de tablet vult bijna zijn hele kolom, de hoogte volgt de inhoud */
  .voorbeeld-beeld .mini[data-toestel="tablet"] { width: min(100%, 560px); display: block; }

  /* de zijkant: rechts als het apparaat naar links kijkt, links als het naar rechts kijkt */
  .mini[data-toestel]::after {
    content: ""; position: absolute; top: 30px; bottom: 30px; left: 100%; width: 9px;
    transform-origin: 0 50%; transform: rotateY(90deg);
    background: linear-gradient(90deg, #3a4258, #161b28); border-radius: 0 4px 4px 0;
  }
  .voorbeeld.is-omgekeerd .mini[data-toestel]::after { left: auto; right: 100%; transform-origin: 100% 50%; transform: rotateY(-90deg); background: linear-gradient(270deg, #3a4258, #161b28); border-radius: 4px 0 0 4px; }

  /* tablet: dunne rand rondom en een camera boven */
  .mini[data-toestel="tablet"]::before { content: ""; position: absolute; z-index: 4; top: 4px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #0c0f18; box-shadow: 0 0 0 1.5px #2a3144; transform: translateX(-50%); }

  /* telefoon: precies dezelfde vorm als de telefoon bij Veilig: 310 breed, 620 hoog (het scherm 600),
     dun en lang, met het cameragaatje en de statusbalk. Geen zoom: dan werd hij breder (335). */
  .voorbeeld-beeld .mini[data-toestel="telefoon"] { width: 310px; height: auto; padding: 10px; border-radius: 48px; display: block; }
  .voorbeeld-beeld .mini[data-toestel="telefoon"] .app { height: 600px; display: flex; flex-direction: column; gap: 10px; border-radius: 40px; padding: 12px 16px 22px; }
  .mini[data-toestel="telefoon"]::before { content: ""; position: absolute; z-index: 4; top: 29px; left: 50%; width: 11px; height: 11px; border-radius: 50%; background: #05070c; box-shadow: inset 0 0 0 2.5px #121726, 0 0 0 1px rgba(255, 255, 255, 0.05); transform: translateX(-50%); }
  .mini[data-toestel="telefoon"]::after { top: 60px; bottom: 60px; }
  /* een telefoon blijft een telefoon: de knop is 44 hoog, net als op een echte telefoon */
  .voorbeeld-beeld .mini[data-toestel="telefoon"] .app .echt-knop { height: 44px; }
  .mini[data-toestel="telefoon"] .mini-status { display: flex; }
  .mini[data-toestel="telefoon"] .app > .app-knop-breed { margin-top: auto; }
  .mini[data-toestel="telefoon"] .app-toast-telefoon { top: 56px; }
}
@supports (animation-timeline: view()) {
  /* klaar zodra het toestel helemaal in beeld is: dan staat er niets meer half gekanteld onderin */
  @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .voorbeeld-beeld .mini[data-toestel] {
      animation: toestel-in linear both; animation-timeline: view(); animation-range: entry 0% entry 100%;
    }
  }
}
@keyframes toestel-in {
  from { transform: translateY(70px) rotateY(calc(var(--kant) * 2.6)) rotateX(20deg) scale(0.9); }
  to { transform: rotateY(var(--kant)) rotateX(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mini[data-toestel] { transition: none; }
  .voorbeeld-beeld .mini[data-toestel]:hover { rotate: none; }
}


/* Op een telefoon: dezelfde uitstraling als de laptop (zwart glas, metalen rand). De telefoon in de hero
   komt gekanteld binnen, met de app meteen aan (een zwart opstartscherm leest op een telefoon als "laadt nog"); de voorbeeldtelefoons kantelen recht voor je terwijl je
   scrolt en staan daarna stil, zodat je er gewoon op kunt tikken. */
@media (max-width: 899px) {
  .telefoon-rand, .voorbeeld-beeld .mini {
    background: #07090f;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 0 0 1.5px #3a4258, 0 0 0 2.5px #1c2232, 0 40px 70px -36px rgba(0, 0, 0, 0.8);
  }
  .demo, .voorbeeld-beeld { perspective: 1400px; }
}
/* alleen als het apparaat geen "minder beweging" vraagt; anders staat de telefoon stil */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .telefoon { animation: telefoon-binnen 1500ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both, zweef 9s ease-in-out 2.2s infinite; }
}
@keyframes telefoon-binnen {
  from { transform: translateY(70px) rotateX(26deg) rotateY(-16deg) scale(0.92); }
  to { transform: none; }
}
@supports (animation-timeline: view()) {
  @media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
    .voorbeeld-beeld .mini { animation: telefoon-scroll linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  }
}
@keyframes telefoon-scroll {
  from { transform: translateY(60px) rotateX(22deg) scale(0.94); }
  to { transform: none; }
}

/* De voorbeeldtelefoons zijn kleiner dan de telefoon in de hero: die is het hoofdbeeld, deze laten iets zien. */
@media (max-width: 899px) {
  .voorbeeld-beeld .mini { width: 310px; }
  .voorbeeld-beeld .mini .app { height: 560px; }
  .mini .app > .app-knop-breed { flex-shrink: 0; }
}
/* op een laptop dezelfde maat als de telefoon bij Veilig: 310 breed, het scherm 600 hoog */
@media (min-width: 900px) {
  .voorbeeld-beeld .mini[data-toestel="telefoon"] { width: 310px; }
  .voorbeeld-beeld .mini[data-toestel="telefoon"] .app { height: 600px; }
}

/* ---------------------------------------------------------------- de tablet */
/* Op een tablet een tablet. Herkennen: een aanraakscherm (pointer: coarse) vanaf 600 px breed, staand
   of liggend. Een venster met een muis volgt de breedte (vanaf 900 een laptop, daaronder een
   telefoon); een telefoon is smaller dan 600. Dezelfde vraag staat in app.js (opTablet); verander je
   er een, verander dan allebei. Staat bewust onderaan, zodat hij wint van laptop en telefoon.

   De hero: de opmaak van de laptop tekent dan een liggende tablet, in beide standen van het apparaat.
   Staand (768 tot 834) onder de tekst over de volle breedte, liggend (vanaf 900) rechts naast de
   tekst. Zwart glas met een dunne rand en een klein rond cameragaatje midden boven, dezelfde
   uitstraling als de telefoon. Hij komt gekanteld binnen en staat dan recht, zodat de tekst scherp
   is. Op het scherm de app zoals de AppShell hem op een liggende tablet van 1024 tot 1279 breed
   zet: een rail van 64 px met alleen iconen (het actieve item met een zachte vulling en een staafje
   van 2 px), de glazen bovenbalk met zoekveld, en de paginakop met de hoofdknop rechtsboven. Alles in
   em vanaf één lettergrootte die meeschaalt met de tablet, net als op de laptop. */
@media (pointer: coarse) and (min-width: 600px) {
  .hero { overflow-x: clip; }
  .demo { --toestel: tablet; perspective: 1400px; }
  .telefoon { display: none; }
  .demo-hint { display: block; }

  /* het toestel: geen toetsenbord, geen deksel dat openklapt, geen opstartscherm (dat leest als "laadt nog") */
  .laptop { display: block; width: 100%; max-width: none; padding-bottom: 0; perspective: none; container-type: inline-size; animation: none; }
  .laptop-romp, .laptop-deksel { transform: none; transform-style: flat; animation: none; }
  .laptop-rug, .laptop-basis, .laptop-glans { display: none; }
  .app-laptop::before, .app-laptop::after { content: none; }
  /* de rand is 3 procent van de breedte, zoals bij een tablet van nu; de hoeken lopen met de rand mee */
  .laptop-scherm {
    padding: 3cqw; border-radius: 4.6cqw; background: #07090f;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 0 0 1.5px #3a4258, 0 0 0 2.5px #1c2232, 0 50px 90px -44px rgba(0, 0, 0, 0.8);
  }
  .laptop-camera { top: 1.5cqw; width: 7px; height: 7px; background: #05070c; box-shadow: inset 0 0 0 1.5px #121726, 0 0 0 1px rgba(255, 255, 255, 0.06); transform: translate(-50%, -50%); }
  /* het scherm: liggend, 1180 bij 820 (een tablet van 11 inch) */
  .app-laptop { aspect-ratio: 1180 / 820; border-radius: 1.6cqw; }
  .app-laptop .app-scherm { font-size: clamp(8px, 1.65cqw, 14px); }

  /* de rail: 64 px van een scherm met tekst van 14 px, alleen het logo en de iconen, geen namen en geen tellers */
  .app-laptop .held-zij { flex: 0 0 4.6em; align-items: center; gap: 0.3em; padding: 1em 0 0.8em; }
  .app-laptop .held-merk { padding: 0 0 0.85em; }
  .app-laptop .held-logo { width: 2.3em; height: 2.3em; }
  .app-laptop .held-merk b, .app-laptop .held-nav > span, .app-laptop .held-nav > b { display: none; }
  .app-laptop .held-nav { flex: 0 0 auto; width: 3.45em; height: 3.15em; padding: 0; justify-content: center; border-radius: 0.65em; }
  .app .app-laptop .held-nav .ic { width: 1.3em; height: 1.3em; }

  /* bovenbalk van glas met zoekveld, paginakop met de hoofdknop rechtsboven, de inhoud met wat meer lucht */
  .app-laptop .echt-top { height: 3.75em; gap: 0.85em; padding: 0 1.2em; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
  .app-laptop .echt-zoek { flex: 0 1 22em; height: 2.7em; }
  .app-laptop .echt-kop { padding: 1.15em 1.7em 1.05em; }
  .app-laptop .echt-knop { height: 2.95em; padding: 0 1.15em; border-radius: 0.75em; }
  .app-laptop .echt-inhoud { gap: 0.9em; padding: 1.15em 1.7em; }

  /* de knop voor de tik: zo groot als een vinger (44 px), het zichtbare knopje is net zo groot als de
     hoofdknop. De rest is een doorzichtige rand boven en onder, die niets opschuift. */
  .app-laptop .held-tablet { display: flex; }
  .app-laptop .echt-knop.held-tik {
    --slop: max(0px, calc(22px - 1.45em));
    height: 44px; margin-block: calc(-1 * var(--slop)); padding: 0 1.1em;
    border-style: solid; border-color: transparent; border-width: var(--slop) 0;
    border-radius: 0.75em / calc(0.75em + var(--slop)); background-clip: padding-box;
  }
  .app-laptop .echt-knop.held-tik.is-tweede { box-shadow: inset 0 0 0 1px var(--e-lijn); }
  /* na een tik blijft de vinger "erboven" hangen (hover); de doorzichtige rand blijft dan ook doorzichtig */
  .app-laptop .echt-knop.held-tik.is-klaar, .app-laptop .echt-knop.held-tik.is-klaar:hover { box-shadow: none; border-color: transparent; background-clip: padding-box; }
  /* opvolgen: de knop onderaan de kaart van de nieuwe aanvraag */
  .app-laptop .held-kaart .held-tik { margin-top: calc(0.45em - var(--slop)); }
  /* facturen: de conceptfactuur, met een grijs rondje in plaats van het groene van de koppeling. Beide
     kaarten even hoog, en hoog genoeg voor de vinger van 44 px, ook als de tablet klein is. */
  .app .app-laptop .held-concept > .ic { background: var(--e-neutraal); color: var(--e-tekst-2); }
  .app-laptop .held-koppeling { padding-block: max(0.75em, calc(22px - 1.33em)); }

  /* de melding na een tik en de melding bij de keuringen: rechtsonder, zoals op een groot scherm */
  .app-laptop .echt-toast { top: auto; left: auto; right: 1.5em; bottom: 1.5em; width: min(25em, 60%); gap: 0.75em; padding: 0.85em 1.05em; border-radius: 0.95em; font-size: 1em; }
  .app-laptop .echt-toast::before { width: 0.65em; height: 0.65em; margin-top: 0.4em; }
  .app-laptop .held-melding { right: 1.5em; bottom: 1.5em; }
  /* in de lichte stijl van de site: zie de twee regels voor .laptop-scherm bij de lichte uitvoering */

  /* Zo kan het eruitzien: de garage is een tablet en de hovenier een telefoon, net als op de laptop.
     De knop in de garage is zichtbaar even groot als op de laptop (28 px), maar te raken over 44 px:
     een doorzichtige rand boven en onder, die niets opschuift. Zo past alles in het scherm. */
  .mini[data-toestel="tablet"] .app .echt-knop {
    height: 44px; margin-block: -8px; border-style: solid; border-color: transparent; border-width: 8px 0;
    border-radius: 7px / 15px; background-clip: padding-box;
  }
  .mini[data-toestel="tablet"] .app .echt-knop.is-tweede { box-shadow: inset 0 0 0 1px var(--e-lijn); }
  .mini[data-toestel="tablet"] .app .echt-knop.is-klaar, .mini[data-toestel="tablet"] .app .echt-knop.is-klaar:hover { box-shadow: none; border-color: transparent; background-clip: padding-box; }
}
@media (pointer: coarse) and (min-width: 600px) and (prefers-reduced-motion: no-preference) {
  .laptop { animation: tablet-binnen 1500ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both, zweef 9s ease-in-out 2.2s infinite; }
}
/* Een grote tablet die staat (iPad Pro, 1024 bij 1366): ook één kolom, de tablet onder de tekst over
   de volle breedte, net als op een staande iPad van 768 tot 834. Naast de tekst werd hij klein, met
   een halve lege bladzijde eronder. */
@media (pointer: coarse) and (min-width: 900px) and (orientation: portrait) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-feiten { display: flex; flex-wrap: wrap; gap: 10px 28px; }
}
/* minder schuin dan de telefoon: de tablet is breder, en mag ook tijdens het binnenkomen niet buiten
   het scherm steken (op een aanraakscherm wordt de hele bladzijde dan breder) */
@keyframes tablet-binnen {
  from { transform: translateY(70px) rotateX(18deg) rotateY(-10deg) scale(0.92); }
  to { transform: none; }
}
/* Staand (600 tot 899) staan de voorbeelden onder elkaar, net als op een telefoon. De garage is dan
   dezelfde tablet als op de laptop (480 breed, zo hoog als zijn inhoud), recht voor je, zodat je er
   gewoon op tikt. */
@media (pointer: coarse) and (min-width: 600px) and (max-width: 899px) {
  /* de drie puntjes onder de knoppen naast elkaar, zodat de tablet op een staande iPad van 768 bij
     1024 helemaal in het eerste scherm past (staat ook bij de grote staande tablet hierboven) */
  .hero-feiten { display: flex; flex-wrap: wrap; gap: 10px 28px; }
  .voorbeeld-beeld .mini[data-toestel="tablet"] { width: min(480px, 100%); height: auto; padding: 12px; border-radius: 30px; display: block; }
  .voorbeeld-beeld .mini[data-toestel="tablet"] .app { height: auto; border-radius: 19px; }
  .mini[data-toestel="tablet"]::before { top: 4px; width: 5px; height: 5px; background: #0c0f18; box-shadow: 0 0 0 1.5px #2a3144; }
  .mini[data-toestel="tablet"] .mini-status { display: none; }
}