/* =========================================================
   BERT CAN — alles in één bestand.
   1 kleuren & basis · 2 achtergrond · 3 cursor · 4 tekst
   5 menu · 6 hero · 7 configurator · 8 voor/na · 9 rest
   ========================================================= */

:root {
  --void: #02050f;
  --ink: #eaf1ff;
  --ink-dim: #8ea2cf;

  /* vlakken en velden — de lichte modus verzet alleen deze regels */
  --surface-1: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012));
  --surface-2: linear-gradient(170deg, rgba(10,20,50,0.9), rgba(3,7,20,0.95));
  --field: rgba(2,5,15,0.75);
  --bar: rgba(2,5,15,0.55);
  --bar-solid: rgba(2,5,15,0.9);
  --orb-op: 0.5;
  --noise-op: 0.05;

  /* tekst bovenop de accentkleur blijft altijd donker */
  --on-accent: #02050f;

  /* deze twee bepalen de hele sfeer — de kleurkiezer verzet ze */
  --cyan: #45e0ff;
  --violet: #8f7bff;

  --rule: rgba(120, 170, 255, 0.16);
  --rule-soft: rgba(120, 170, 255, 0.08);
  --grid: rgba(120, 190, 255, 0.10);

  /* Geen externe lettertypes: de pagina laadt niets van buitenaf.
     Dat scheelt een verzoek naar Google (in Europa privacygevoelig)
     en de tekst staat er meteen, zonder flikkering.
     Wil je toch een eigen lettertype? Download de .woff2, zet hem
     naast dit bestand en haal het blok hieronder uit commentaar. */
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --pad: clamp(1.25rem, 5vw, 5rem);
  --mx: 50vw; --my: 30vh;
}

/*
@font-face {
  font-family: "Eigen";
  src: url("eigen.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
:root { --sans: "Eigen", ui-sans-serif, system-ui, sans-serif; }
*/

[data-theme="light"] {
  --void: #f4f7fd;
  --ink: #0b1424;
  --ink-dim: #4d5d84;

  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --field: #ffffff;
  --bar: rgba(244,247,253,0.72);
  --bar-solid: rgba(244,247,253,0.94);
  --orb-op: 0.22;
  --noise-op: 0;

  --cyan: #0f8fd6;
  --violet: #6b56e8;
  --on-accent: #ffffff;

  --rule: rgba(20, 50, 110, 0.18);
  --rule-soft: rgba(20, 50, 110, 0.10);
  --grid: rgba(20, 60, 140, 0.07);
}
[data-theme="light"] .card,
[data-theme="light"] .stat,
[data-theme="light"] .quote,
[data-theme="light"] .win,
[data-theme="light"] .panel-in { box-shadow: 0 12px 30px -20px rgba(12, 30, 70, 0.35); }
[data-theme="light"] .blk { background: #eef3fb; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0; background: var(--void); color: var(--ink);
  font-family: var(--sans); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  line-height: 1.6; overflow-x: hidden;
}

/* ---------- achtergrond ---------- */
.bg { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: var(--orb-op); will-change: transform; }
.orb-1 { width: 46vw; height: 46vw; left: -8vw; top: -12vw; background: radial-gradient(circle, color-mix(in srgb, var(--cyan) 40%, transparent), transparent 65%); animation: drift1 26s ease-in-out infinite; }
.orb-2 { width: 52vw; height: 52vw; right: -14vw; top: 20vh; background: radial-gradient(circle, color-mix(in srgb, var(--violet) 36%, transparent), transparent 65%); animation: drift2 32s ease-in-out infinite; }
.orb-3 { width: 40vw; height: 40vw; left: 24vw; bottom: -18vw; background: radial-gradient(circle, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 65%); animation: drift1 38s ease-in-out infinite reverse; }
@keyframes drift1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(6vw,7vh,0) scale(1.12); } }
@keyframes drift2 { 0%,100% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(-7vw,-5vh,0) scale(0.94); } }

.mesh { position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(360px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,0.4) 45%, transparent 75%);
  mask-image: radial-gradient(360px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,0.4) 45%, transparent 75%); }
@media (hover: none) { .mesh { -webkit-mask-image: none; mask-image: none; opacity: 0.4; } }

.noise { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--noise-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- voortgang & cursor ---------- */
.progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 40; background: linear-gradient(90deg, var(--cyan), var(--violet)); transform: scaleX(0); transform-origin: left; }
.cur-dot, .cur-ring { position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none; border-radius: 50%; }
.cur-dot { width: 6px; height: 6px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); margin: -3px 0 0 -3px; }
.cur-ring { width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--cyan) 50%, transparent); margin: -17px 0 0 -17px; transition: width 250ms ease, height 250ms ease, margin 250ms ease, border-color 250ms ease, background 250ms ease; }
.cur-ring.hot { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-color: var(--violet); background: color-mix(in srgb, var(--violet) 10%, transparent); }
@media (hover: none) { .cur-dot, .cur-ring { display: none; } }

/* ---------- tekst ---------- */
h1, h2, h3 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 0.6em; text-wrap: balance; }
h1 { font-size: clamp(2.9rem, 1.4rem + 6.4vw, 7rem); }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); }
h3 { font-size: 1.1875rem; letter-spacing: -0.015em; }

.glow-text { background: linear-gradient(100deg, var(--ink) 10%, var(--cyan) 46%, var(--violet) 84%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: sheen 9s ease-in-out infinite; }
@keyframes sheen { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.split { letter-spacing: -0.005em; }   /* losse letters kennen geen kerning meer,
                                          dus de strakke afstand van h1 moet ruimer */
.split .ln { display: block; }
.split .w { display: inline-block; white-space: nowrap; }
.split .ch {
  display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(0.4em) scale(1.06);
  color: var(--ink);                   /* elke letter krijgt zijn eigen kleur ... */
  -webkit-text-fill-color: var(--ink); /* ... anders blijft de kop onzichtbaar */
}
/* de gloed komt van een schaduw in plaats van een geklipt kleurverloop */
.glow-text.split { background: none; -webkit-text-fill-color: currentColor; color: var(--ink); animation: none; }
.glow-text.split { letter-spacing: -0.005em; }   /* losse letters kennen geen kerning meer,
                                          dus de strakke afstand van h1 moet ruimer */
.split .ln { display: block; }
.split .w { display: inline-block; white-space: nowrap; }
.split .ch { text-shadow: 0 0 34px color-mix(in srgb, var(--cyan) 50%, transparent); }
.split.go .ch { animation: focusIn 900ms cubic-bezier(0.2,0.7,0.2,1) forwards; }
@keyframes focusIn { to { opacity: 1; filter: blur(0); transform: none; } }

p { margin: 0 0 1.1em; max-width: 62ch; }
.lead { font-size: clamp(1.0625rem, 1rem + 0.55vw, 1.45rem); color: #c4d5ff; line-height: 1.45; }
.dim { color: var(--ink-dim); }

.kicker { font-family: var(--mono); font-size: 0.75rem; color: var(--cyan); letter-spacing: 0.06em; display: flex; align-items: center; gap: 0.7rem; margin: 0 0 1.5rem; }
.kicker::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, var(--rule), transparent); }
.kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: pulse 2.4s ease-in-out infinite; flex: 0 0 auto; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.7); } }

/* ---------- menubalk ---------- */
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; padding: 1rem var(--pad); border-bottom: 1px solid var(--rule-soft); background: var(--bar); backdrop-filter: blur(14px) saturate(140%); position: sticky; top: 0; z-index: 30; }
.wordmark img { width: auto; height: 26px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--cyan) 45%, transparent)); }
.wordmark { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; margin-right: auto; }
.wordmark em { font-style: normal; color: var(--cyan); text-shadow: 0 0 18px var(--cyan); animation: pulse 3s ease-in-out infinite; display: inline-block; }

.nav { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.nav a { color: var(--ink-dim); text-decoration: none; font-size: 0.9375rem; position: relative; padding-bottom: 3px; transition: color 200ms ease; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform 280ms cubic-bezier(0.3,0.8,0.3,1); }
.nav a:hover { color: var(--ink); } .nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
.nav a.active { color: var(--ink); }

.tools { display: flex; align-items: center; gap: 0.8rem; }
.swatches { display: flex; gap: 0.35rem; }
.swatches button { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); cursor: pointer; padding: 0; transition: transform 200ms ease, box-shadow 200ms ease; }
.swatches button:hover { transform: scale(1.2); }
.swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--void), 0 0 0 3px currentColor; }

.themebtn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rule); background: var(--surface-1); color: var(--ink); font-size: 0.85rem; line-height: 1; cursor: pointer; transition: border-color 200ms ease, transform 200ms ease; }
.themebtn:hover { border-color: var(--cyan); transform: rotate(-15deg); }

.langswitch { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; font-family: var(--mono); font-size: 0.72rem; }
.langswitch button { background: none; border: 0; color: var(--ink-dim); font: inherit; padding: 0.35rem 0.7rem; cursor: pointer; transition: background 250ms ease, color 250ms ease; }
.langswitch button[aria-pressed="true"] { background: var(--cyan); color: var(--on-accent); font-weight: 500; }

/* ---------- secties ---------- */
.band { padding: clamp(4rem, 9vw, 8rem) var(--pad); scroll-margin-top: 5rem; position: relative; }
.inner { max-width: 78rem; margin-inline: auto; }
h2.scramble { position: relative; padding-bottom: 0.5rem; }
h2.scramble::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: min(9rem, 40%); background: linear-gradient(90deg, var(--cyan), transparent); transform: scaleX(0); transform-origin: left; transition: transform 900ms cubic-bezier(0.2,0.7,0.2,1) 200ms; }
.reveal.in h2.scramble::after { transform: scaleX(1); }

.hairline { height: 1px; background: linear-gradient(90deg, transparent, var(--rule), transparent); }
.reveal { opacity: 0; transform: translateY(28px); }
/* wat bij het openen al in beeld staat, hoeft niet te wachten */
.reveal.direct { opacity: 1; transform: none; }
.reveal.in { opacity: 1; transform: none; transition: opacity 800ms ease, transform 800ms cubic-bezier(0.2,0.7,0.2,1); }

/* ---------- hero ---------- */
.hero { padding-top: clamp(3rem, 7vw, 6rem); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 62rem) { .hero-grid { grid-template-columns: 1fr; } }
.hero .lead { max-width: 44ch; }

.terminal { font-family: var(--mono); font-size: 0.8125rem; color: var(--cyan); border: 1px solid var(--rule); border-radius: 6px; background: var(--surface-2); padding: 0.6rem 0.9rem; display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 2.25rem; max-width: 100%; }
.terminal .prompt { color: var(--violet); }
.caret { display: inline-block; width: 8px; height: 1em; background: var(--cyan); animation: blink 1.1s step-end infinite; vertical-align: -2px; }
@keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

/* echte laadtijd */
.speed { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1rem; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-dim); }
.speed b { color: var(--cyan); font-weight: 500; }
.speed .bolt { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

/* ---------- browservenster ---------- */
.win { position: relative; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--surface-2); box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--cyan) 28%, transparent); }
.win-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--rule-soft); background: var(--surface-1); }
.win-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); }
.win-bar .url { margin-left: 0.6rem; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-dim); }
.win-bar .live { margin-left: auto; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; color: var(--on-accent); background: var(--cyan); padding: 0.15rem 0.45rem; border-radius: 3px; }

.build { transform: perspective(1400px) rotateY(-7deg) rotateX(3deg); animation: float 9s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: perspective(1400px) rotateY(-7deg) rotateX(3deg) translateY(0); } 50% { transform: perspective(1400px) rotateY(-5deg) rotateX(2deg) translateY(-12px); } }
.build .live { opacity: 0; animation: liveIn 9s ease-in-out infinite; }
@keyframes liveIn { 0%,62% { opacity: 0; transform: scale(0.8); } 70%,92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.build::after { content: ""; position: absolute; inset: 0; pointer-events: none; height: 45%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cyan) 14%, transparent), transparent); animation: scan 9s ease-in-out infinite; }
@keyframes scan { 0% { transform: translateY(-120%); opacity: 0; } 10% { opacity: 1; } 40%,100% { transform: translateY(240%); opacity: 0; } }

.win-body { padding: 1.4rem 1.3rem 1.7rem; display: grid; gap: 0.7rem; }
.sk { height: 11px; border-radius: 3px; background: linear-gradient(90deg, rgba(120,170,255,0.30), rgba(120,170,255,0.10)); transform-origin: left; transform: scaleX(0); }
.sk-title { height: 26px; background: linear-gradient(90deg, var(--cyan), var(--violet)); opacity: 0.85; }
.sk-1 { animation: grow 9s ease-in-out infinite 0.1s; }
.sk-2 { animation: grow 9s ease-in-out infinite 0.35s; max-width: 88%; }
.sk-3 { animation: grow 9s ease-in-out infinite 0.6s; max-width: 62%; }
@keyframes grow { 0% { transform: scaleX(0); } 18%,88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.win-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-top: 0.6rem; }
.blk { height: 62px; border-radius: 7px; border: 1px solid var(--rule-soft); background: var(--surface-1); opacity: 0; transform: translateY(10px); }
.blk-1 { animation: blockIn 9s ease-in-out infinite 1.0s; }
.blk-2 { animation: blockIn 9s ease-in-out infinite 1.2s; }
.blk-3 { animation: blockIn 9s ease-in-out infinite 1.4s; }
@keyframes blockIn { 0% { opacity: 0; transform: translateY(10px); } 22%,88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.win-cta { margin-top: 1rem; height: 34px; width: 46%; border-radius: 999px; background: linear-gradient(100deg, var(--cyan), var(--violet)); opacity: 0; transform: scale(0.9); animation: ctaIn 9s ease-in-out infinite 1.7s; }
@keyframes ctaIn { 0% { opacity: 0; transform: scale(0.9); } 26%,88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- configurator ---------- */
.config-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; margin-top: 3rem; }
@media (max-width: 62rem) { .config-grid { grid-template-columns: 1fr; } }

.qset { margin-bottom: 1.75rem; }
.qset > span { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-dim); margin-bottom: 0.6rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  font: inherit; font-size: 0.875rem; cursor: pointer; color: var(--ink-dim);
  background: var(--surface-1); border: 1px solid var(--rule-soft);
  border-radius: 999px; padding: 0.5rem 1rem;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease, transform 200ms ease;
}
.chip:hover { color: var(--ink); border-color: var(--rule); transform: translateY(-1px); }
.chip[aria-pressed="true"] { color: var(--void); font-weight: 500; background: linear-gradient(100deg, var(--cyan), var(--violet)); border-color: transparent; }

.quote { border: 1px solid var(--rule); border-radius: 14px; padding: 1.25rem 1.4rem; background: var(--surface-1); margin-bottom: 1.5rem; }
.quote .label { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-dim); }
.quote .amount { font-family: var(--mono); font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); color: var(--cyan); letter-spacing: -0.03em; margin: 0.35rem 0 0.4rem; }
.quote .fine { font-size: 0.8125rem; color: var(--ink-dim); margin: 0; }

/* levende preview binnen het venster */
.prev-body { padding: 0; transition: background 400ms ease; min-height: 20rem; }
.prev-hero { padding: 1.4rem 1.3rem; display: grid; gap: 0.55rem; }
.prev-h { height: 22px; border-radius: 4px; width: 70%; }
.prev-l { height: 9px; border-radius: 3px; background: currentColor; opacity: 0.22; }
.prev-l.s { width: 55%; }
.prev-btn { height: 26px; width: 34%; border-radius: 999px; margin-top: 0.5rem; }
.prev-strip { display: grid; gap: 0.55rem; padding: 0 1.3rem 1.4rem; }
.prev-tiles { display: grid; gap: 0.55rem; }
.prev-tile { border-radius: 8px; padding: 0.55rem; display: grid; gap: 0.4rem; }
.prev-tile .ph { height: 42px; border-radius: 5px; opacity: 0.5; }
.prev-tile .pl { height: 7px; border-radius: 3px; background: currentColor; opacity: 0.25; }
.prev-tile .pp { height: 7px; width: 40%; border-radius: 3px; }
.prev-in { animation: prevIn 450ms cubic-bezier(0.2,0.7,0.2,1) both; }
@keyframes prevIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* naamveld en apparaatschakelaar */
.namebar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin-bottom: 1.75rem; }
.namebar label { flex: 1 1 14rem; }
.namebar input { width: 100%; background: var(--field); border: 1px solid var(--rule); border-radius: 10px; color: var(--ink); font: inherit; padding: 0.7rem 0.9rem; transition: border-color 250ms ease, box-shadow 250ms ease; }
.namebar input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 14%, transparent); }

.devices { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; font-family: var(--mono); font-size: 0.7rem; }
.devices button { background: none; border: 0; color: var(--ink-dim); font: inherit; padding: 0.4rem 0.8rem; cursor: pointer; }
.devices button[aria-pressed="true"] { background: var(--cyan); color: var(--on-accent); }

.win-wrap { transition: max-width 450ms cubic-bezier(0.2,0.7,0.2,1); }
.win-wrap.phone { max-width: 20rem; margin-inline: auto; }
.win-wrap.phone .win { border-radius: 26px; }
.win-wrap.phone .prev-tiles,
.win-wrap.phone .pv-items { grid-template-columns: 1fr !important; }
.win-wrap.phone .pv-nav .links { display: none; }
.win-wrap.phone .pv-hero h4 { font-size: 1.1rem; }

.prev-name { font-weight: 700; letter-spacing: -0.02em; font-size: 1.05rem; margin: 0 0 0.15rem; }
.prev-sub { font-size: 0.72rem; opacity: 0.6; margin: 0 0 0.5rem; }

.sharebar { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin-top: 1rem; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-dim); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:hover { color: var(--cyan); }

/* vaste belbalk op mobiel */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: none; gap: 0.6rem; padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom)); background: var(--bar-solid); backdrop-filter: blur(14px); border-top: 1px solid var(--rule-soft); transform: translateY(110%); transition: transform 400ms cubic-bezier(0.2,0.7,0.2,1); }
.callbar.up { transform: none; }
.callbar a { flex: 1; justify-content: center; padding: 0.8rem 1rem; }
@media (max-width: 48rem) {
  .callbar { display: flex; }
  body { padding-bottom: 4.5rem; }
  /* zware achtergrondeffecten kosten op telefoons batterij, dus lichter */
  .orb { filter: blur(60px); opacity: calc(var(--orb-op) * 0.8); }
  .orb-3 { display: none; }
  .noise { display: none; }
}

/* ---------- diensten: zijwaarts spoor ---------- */
.hwrap { height: 320vh; position: relative; }
.hpin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.htrack { display: flex; gap: 1rem; padding-inline: var(--pad); will-change: transform; }
.htrack .card { flex: 0 0 clamp(15rem, 25vw, 21.5rem); }
.hcta { background: linear-gradient(150deg, color-mix(in srgb, var(--cyan) 16%, transparent), color-mix(in srgb, var(--violet) 12%, transparent)); border-color: var(--rule); }
.hbar { margin: 2.5rem var(--pad) 0; height: 2px; background: var(--rule-soft); }
.hbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); transform: scaleX(0); transform-origin: left; }

@media (max-width: 62rem) {
  .hwrap { height: auto; }
  .hpin { position: static; height: auto; overflow: visible; padding: 2rem 0; }
  .htrack { flex-wrap: wrap; transform: none !important; }
  .htrack .card { flex: 1 1 100%; }
  .hbar { display: none; }
}

/* ---------- röntgen: de bezoeker kijkt door de site heen ---------- */
.xrbtn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rule); background: var(--surface-1); color: var(--ink); font-size: 0.72rem; line-height: 1; cursor: pointer; transition: border-color 200ms ease, color 200ms ease; }
.xrbtn[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 14px -2px var(--cyan); }

.xray .mesh { -webkit-mask-image: none; mask-image: none; opacity: 1; }
.xray .band, .xray .card, .xray .win, .xray .btn, .xray .stat, .xray .panel, .xray .ba, .xray .htrack, .xray .steps, .xray .topbar, .xray .footer {
  outline: 1px dashed color-mix(in srgb, var(--cyan) 55%, transparent); outline-offset: 2px;
}
/* alleen elementen zonder eigen positie mogen relative worden, anders
   verliest de plakkende menubalk zijn plek zodra röntgen aan gaat */
.xray [data-x]:not(.topbar):not(.hpin):not(.pin):not(.callbar) { position: relative; }
.xray .topbar { position: sticky; top: 0; }
.xray [data-x]::after {
  content: attr(data-x);
  position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.04em;
  background: var(--cyan); color: var(--on-accent); padding: 0.1rem 0.3rem;
  transform: translateY(-100%);
}
.xray .orb { opacity: 0.15; }

/* ---------- opknapbeurt: sectie klemt vast tijdens het scrollen ---------- */
.pin-wrap { height: 260vh; position: relative; }
.pin { position: sticky; top: 5rem; padding: 0 var(--pad); }
.ba-shell { display: grid; grid-template-columns: 1.45fr 0.55fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; }
@media (max-width: 62rem) {
  .pin-wrap { height: 200vh; }
  .ba-shell { grid-template-columns: 1fr; gap: 1.25rem; }
}

.gauges { display: flex; gap: 1.25rem; }
.gauge { text-align: center; flex: 1; }
.gauge svg { width: 100%; max-width: 92px; height: auto; display: block; margin: 0 auto 0.4rem; }
.gauge .track { fill: none; stroke: var(--rule-soft); stroke-width: 7; }
.gauge .arc { fill: none; stroke-width: 7; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke 400ms ease; }
.gauge .val { font-family: var(--mono); font-size: 1.05rem; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.gauge span { display: block; font-family: var(--mono); font-size: 0.66rem; color: var(--ink-dim); letter-spacing: 0.04em; }

.checks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.checks li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.875rem; color: var(--ink-dim); transition: color 350ms ease; }
.checks li .mark { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--rule); display: grid; place-items: center; font-size: 0.62rem; margin-top: 0.2rem; transition: background 350ms ease, border-color 350ms ease, color 350ms ease, transform 350ms cubic-bezier(0.2,1.6,0.4,1); }
.checks li .mark::before { content: "×"; }
.checks li.done { color: var(--ink); }
.checks li.done .mark { background: var(--cyan); border-color: var(--cyan); color: var(--on-accent); transform: scale(1.12); }
.checks li.done .mark::before { content: "✓"; }
.checks li .txt b { font-weight: 500; color: var(--ink); }

.ba-hint { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-dim); margin-top: 1rem; display: flex; align-items: center; gap: 0.5rem; transition: opacity 300ms ease; }
.ba-hint i { display: inline-block; width: 1px; height: 14px; background: var(--cyan); animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%,100% { transform: translateY(-4px); opacity: 0.3; } 50% { transform: translateY(4px); opacity: 1; } }

/* de kaarten komen één voor één binnen in plaats van als blok */
.stagger > * { opacity: 0; transform: translateY(22px); }
.stagger.in > * { opacity: 1; transform: none; transition: opacity 650ms ease, transform 650ms cubic-bezier(0.2,0.7,0.2,1); }
.stagger.in > *:nth-child(1) { transition-delay: 40ms; }
.stagger.in > *:nth-child(2) { transition-delay: 120ms; }
.stagger.in > *:nth-child(3) { transition-delay: 200ms; }
.stagger.in > *:nth-child(4) { transition-delay: 280ms; }
.stagger.in > *:nth-child(5) { transition-delay: 360ms; }
.stagger.in > *:nth-child(6) { transition-delay: 440ms; }

/* ---------- voor & na ---------- */
.ba { position: relative; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; margin-top: 3rem; aspect-ratio: 16 / 9; min-height: 19rem; }
.ba-pane { position: absolute; inset: 0; }

.ba-old { background: #efe9dd; color: #2c2a25; font-family: Times, "Times New Roman", serif; padding: 1.4rem 1.6rem; }
.ba-old .t { font-size: 1.6rem; font-weight: 700; margin: 0 0 0.2rem; }
.ba-old .u { font-size: 0.8rem; color: #7a1f1f; text-decoration: underline; }
.ba-old .box { border: 2px ridge #b9ae95; padding: 0.6rem; margin-top: 0.9rem; font-size: 0.78rem; line-height: 1.35; max-width: 34ch; }
.ba-old .btn0 { display: inline-block; margin-top: 0.8rem; border: 2px outset #cfc6ae; background: #ded5bd; padding: 0.2rem 0.7rem; font-size: 0.78rem; }
.ba-old .gif { position: absolute; right: 1.2rem; top: 1.2rem; font-size: 0.7rem; color: #1a4fa0; animation: wob 1.4s ease-in-out infinite; }
@keyframes wob { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

.ba-new {
  background:
    radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--violet) 26%, transparent), transparent 60%),
    linear-gradient(160deg, #0a1430, #02050f);
  padding: 0; clip-path: inset(0 0 0 var(--split, 50%));
  display: flex; flex-direction: column; color: #eaf1ff;
}
.bn-nav { display: flex; align-items: center; gap: 1rem; padding: 0.75rem clamp(0.9rem, 2vw, 1.6rem); border-bottom: 1px solid var(--rule-soft); }
.bn-logo { font-weight: 700; letter-spacing: -0.02em; font-size: clamp(0.78rem, 1.3vw, 0.95rem); }
.bn-logo i { font-style: normal; color: var(--cyan); }
.bn-links { display: flex; gap: 0.9rem; font-size: clamp(0.6rem, 1vw, 0.72rem); color: #93a7d6; }
.bn-pill { margin-left: auto; font-size: clamp(0.58rem, 1vw, 0.7rem); font-weight: 600; color: var(--on-accent); background: linear-gradient(100deg, var(--cyan), var(--violet)); border-radius: 999px; padding: 0.3rem 0.75rem; white-space: nowrap; }

.bn-hero { padding: clamp(1rem, 3vw, 2rem) clamp(0.9rem, 2vw, 1.6rem) 0; }
.bn-eyebrow { font-family: var(--mono); font-size: clamp(0.55rem, 0.9vw, 0.66rem); color: var(--cyan); letter-spacing: 0.1em; margin: 0 0 0.5rem; }
.bn-title { font-size: clamp(1.1rem, 3.2vw, 2.2rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 0.5rem; }
.bn-title em { font-style: normal; background: linear-gradient(100deg, var(--cyan), var(--violet)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bn-sub { font-size: clamp(0.62rem, 1.1vw, 0.8rem); color: #9db0dc; margin: 0 0 0.8rem; max-width: 26ch; }
.bn-btns { display: flex; gap: 0.5rem; }
.bn-btn { font-size: clamp(0.58rem, 1vw, 0.7rem); font-weight: 600; padding: 0.4rem 0.9rem; border-radius: 999px; white-space: nowrap; }
.bn-btn.fill { background: linear-gradient(100deg, var(--cyan), var(--violet)); color: var(--on-accent); }
.bn-btn.line { border: 1px solid var(--rule); color: #cfdcff; }

.bn-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.4rem, 1vw, 0.7rem); padding: clamp(0.8rem, 2vw, 1.4rem) clamp(0.9rem, 2vw, 1.6rem); margin-top: auto; }
.bn-card { border: 1px solid var(--rule-soft); border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.04); }
.bn-card .img { height: clamp(28px, 6vw, 52px); background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 55%, transparent), color-mix(in srgb, var(--violet) 55%, transparent)); }
.bn-card .meta { padding: 0.4rem 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.bn-card .nm { font-size: clamp(0.52rem, 0.9vw, 0.66rem); color: #dbe6ff; }
.bn-card .pr { font-family: var(--mono); font-size: clamp(0.5rem, 0.85vw, 0.62rem); color: var(--cyan); }

.bn-strip { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem clamp(0.9rem, 2vw, 1.6rem); border-top: 1px solid var(--rule-soft); font-family: var(--mono); font-size: clamp(0.52rem, 0.9vw, 0.64rem); color: #8ea2cf; }
.bn-strip .dotje { width: 5px; height: 5px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.bn-strip .rechts { margin-left: auto; color: #cfdcff; }

@media (max-width: 40rem) { .bn-links, .bn-strip .rechts { display: none; } }

.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 2px; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); pointer-events: none; }
.ba-handle::after { content: "⇔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--cyan); color: var(--on-accent); display: grid; place-items: center; font-size: 0.9rem; }
.ba input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba-tag { position: absolute; bottom: 0.7rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; padding: 0.2rem 0.5rem; border-radius: 4px; }
.ba-tag.l { left: 0.8rem; background: rgba(0,0,0,0.35); color: #f4efe4; }
.ba-tag.r { right: 0.8rem; background: var(--cyan); color: var(--on-accent); }

/* ---------- knoppen ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }
.btn { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.9rem 1.5rem; font-size: 0.9375rem; font-weight: 500; font-family: inherit; text-decoration: none; cursor: pointer; border: 1px solid transparent; border-radius: 999px; overflow: hidden; transition: box-shadow 300ms ease, border-color 300ms ease, color 200ms ease; }
.btn-primary { background: linear-gradient(100deg, var(--cyan), var(--violet)); color: var(--on-accent); font-weight: 700; }
.btn-primary::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent); }
.btn-primary:hover { box-shadow: 0 14px 46px -12px color-mix(in srgb, var(--cyan) 80%, transparent); color: var(--void); }
.btn-primary:hover::after { animation: shine 750ms ease; }
@keyframes shine { to { transform: translateX(120%); } }
.btn-ghost { border-color: var(--rule); color: var(--ink); background: var(--surface-1); }
.btn-ghost:hover { border-color: var(--cyan); }

/* ---------- tellers, kaarten, band, tijdlijn, panel ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); border-radius: 14px; overflow: hidden; margin-top: 3rem; }
.stat { background: var(--surface-1); padding: 1.6rem 1.4rem; }
.stat b { display: block; font-family: var(--mono); font-weight: 500; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); letter-spacing: -0.04em; color: var(--cyan); line-height: 1; }
.stat span { display: block; margin-top: 0.5rem; font-size: 0.875rem; color: var(--ink-dim); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin-top: 3rem; }
.card { --x: 50%; --y: 50%; position: relative; overflow: hidden; border: 1px solid var(--rule-soft); border-radius: 14px; background: var(--surface-1); padding: 1.6rem 1.5rem; transform-style: preserve-3d; transition: border-color 300ms ease, transform 400ms cubic-bezier(0.2,0.7,0.2,1), box-shadow 400ms ease; }
.card::before { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(320px circle at var(--x) var(--y), color-mix(in srgb, var(--cyan) 18%, transparent), transparent 70%); transition: opacity 350ms ease; }
.card:hover { border-color: var(--rule); box-shadow: 0 30px 60px -35px color-mix(in srgb, var(--cyan) 55%, transparent); }
.card:hover::before { opacity: 1; }
.card > * { position: relative; transform: translateZ(30px); }
.card h3 { margin-bottom: 0.4rem; }
.card p { color: var(--ink-dim); margin: 0; font-size: 0.9375rem; }
.card .price { font-family: var(--mono); font-size: 0.72rem; color: var(--cyan); margin-top: 0.9rem; }
.card .num { font-family: var(--mono); font-size: 0.72rem; color: var(--violet); display: block; margin-bottom: 0.9rem; }

.ticker { border-block: 1px solid var(--rule-soft); padding: 0.9rem 0; overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ticker-track { display: inline-flex; gap: 2.5rem; animation: slide 34s linear infinite; }
.ticker span { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-dim); display: inline-flex; align-items: center; gap: 2.5rem; }
.ticker span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); opacity: 0.6; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.steps { margin-top: 3rem; position: relative; padding-left: 2.6rem; }
.steps .rail { position: absolute; left: 0.55rem; top: 0.4rem; bottom: 0.4rem; width: 1px; background: var(--rule-soft); }
.steps .rail i { display: block; height: 100%; background: linear-gradient(180deg, var(--cyan), var(--violet)); transform: scaleY(0); transform-origin: top; }
.step { position: relative; padding-bottom: 2.5rem; opacity: 0; transform: translateX(-16px); }
.step.in { opacity: 1; transform: none; transition: opacity 650ms ease, transform 650ms cubic-bezier(0.2,0.7,0.2,1); }
.step:last-child { padding-bottom: 0; }
.step::before { content: ""; position: absolute; left: -2.35rem; top: 0.55rem; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.step .num { font-family: var(--mono); font-size: 0.72rem; color: var(--violet); }
.step h3 { margin: 0.2rem 0 0.35rem; }
.step p { color: var(--ink-dim); margin: 0; }

.panel { position: relative; border-radius: 18px; padding: 1px; overflow: hidden; }
.panel::before { content: ""; position: absolute; left: 50%; top: 50%; width: 180%; padding-bottom: 180%; transform: translate(-50%,-50%); background: conic-gradient(var(--cyan), var(--violet), transparent 55%, var(--cyan)); animation: spin 8s linear infinite; opacity: 0.55; }
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.panel-in { position: relative; border-radius: 17px; padding: clamp(1.75rem, 5vw, 3.5rem); background: var(--surface-2); }
.panel-in h2 { margin-top: 0; }
.panel-in p:last-of-type { margin-bottom: 0; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: clamp(1.75rem, 4vw, 4rem); align-items: start; margin-top: 2.5rem; }
.bignum { font-family: var(--mono); font-weight: 500; font-size: clamp(1.6rem, 1rem + 2.6vw, 2.8rem); letter-spacing: -0.03em; color: var(--ink); text-decoration: none; display: inline-block; margin-bottom: 0.6rem; transition: text-shadow 300ms ease, color 300ms ease; }
.bignum:hover { color: var(--cyan); text-shadow: 0 0 34px color-mix(in srgb, var(--cyan) 60%, transparent); }
.field { display: block; margin-bottom: 1.15rem; }
.field span { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-dim); margin-bottom: 0.4rem; }
.field input, .field select, .field textarea { width: 100%; background: var(--field); border: 1px solid var(--rule); border-radius: 10px; color: var(--ink); font: inherit; padding: 0.75rem 0.9rem; transition: border-color 250ms ease, box-shadow 250ms ease; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 14%, transparent); }
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(142,162,207,0.5); }
.formnote { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-dim); max-width: 42ch; }

.footer { padding: 2.5rem var(--pad) 3.5rem; border-top: 1px solid var(--rule-soft); color: var(--ink-dim); font-size: 0.875rem; display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: baseline; }
.footer a { color: var(--ink-dim); text-decoration: none; }
.footer a:hover { color: var(--cyan); }
.footer .spacer { margin-left: auto; font-family: var(--mono); font-size: 0.75rem; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--cyan); color: var(--on-accent); padding: 0.6rem 1rem; z-index: 210; font-weight: 700; }
.skip:focus { left: 0; }
a { color: var(--cyan); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .split { letter-spacing: -0.005em; }   /* losse letters kennen geen kerning meer,
                                          dus de strakke afstand van h1 moet ruimer */
.split .ln { display: block; }
.split .w { display: inline-block; white-space: nowrap; }
.split .ch { opacity: 1 !important; transform: none !important; filter: none !important; }
  .sk { transform: scaleX(1); }
  .blk, .win-cta, .build .live { opacity: 1; transform: none; }
  .steps .rail i { transform: scaleY(1); }
  .step, .stagger > * { opacity: 1 !important; transform: none !important; }
  h2.scramble::after { transform: scaleX(1); }
}

/* =========================================================
   Klikeffect: rimpeling in de knop + vonken op de cursor
   ========================================================= */

.btn, .chip, .themebtn, .xrbtn, .chipbtn { position: relative; overflow: hidden; }

.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  width: 260px; height: 260px; margin: -130px 0 0 -130px;
  background: radial-gradient(circle, rgba(255,255,255,0.55), rgba(255,255,255,0.12) 45%, transparent 70%);
  transform: scale(0); opacity: 0.9;
  animation: rip 620ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.btn-ghost .ripple, .chip .ripple, .themebtn .ripple, .xrbtn .ripple {
  background: radial-gradient(circle, color-mix(in srgb, var(--cyan) 55%, transparent), transparent 68%);
}
@keyframes rip { to { transform: scale(1); opacity: 0; } }

/* de vonken liggen bovenop de pagina, niet in de knop */
.sparks { position: fixed; inset: 0; z-index: 120; pointer-events: none; overflow: hidden; }
.spark {
  position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
  animation: vonk 620ms cubic-bezier(0.15, 0.8, 0.3, 1) forwards;
}
.spark.v2 { background: var(--violet); box-shadow: 0 0 12px var(--violet); }
@keyframes vonk {
  from { transform: translate(0,0) scale(1); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

/* een korte ring die uit het klikpunt opzet */
.shock {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  border: 2px solid var(--cyan); opacity: 0.9;
  animation: shock 560ms cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}
@keyframes shock { to { transform: scale(7); opacity: 0; border-width: 1px; } }

@media (prefers-reduced-motion: reduce) {
  .ripple, .spark, .shock { display: none; }
}


/* ---------- menu: links naar de losse pagina's springen eruit ---------- */
/* links naar de losse pagina's zien er precies zo uit als de rest;
   alleen de pagina waar je bent krijgt een streepje */
.nav a.active { color: var(--ink); }
.nav a.active::after { transform: scaleX(1); }

/* =========================================================
   Mobiele correcties
   ========================================================= */

/* Rasteronderdelen mogen standaard niet kleiner worden dan hun inhoud.
   Daardoor kon het bakkerijvoorbeeld de hele pagina breder duwen dan
   het scherm. Deze regel geeft ze toestemming om te krimpen.          */
.ba-shell > *, .config-grid > *, .contact-grid > *, .hero-grid > *,
.cards > *, .rows .row > *, .steps > * { min-width: 0; }

.ba, .win, .panel, .card { max-width: 100%; }
img, svg { max-width: 100%; height: auto; }

/* De menubalk brak af op smalle schermen. De links staan nu op een
   eigen regel als één rij die je opzij kunt schuiven.                 */
@media (max-width: 52rem) {
  .topbar { gap: 0.7rem 1rem; padding: 0.85rem var(--pad); }
  .wordmark { margin-right: auto; }
  .nav {
    order: 3; width: 100%;
    flex-wrap: nowrap;
    gap: 0.4rem;
  }
}

/* Het voorbeeld van de bakkerij op telefoonformaat */
@media (max-width: 48rem) {
  .ba { aspect-ratio: 4 / 3; min-height: 16rem; margin-top: 2rem; }

  .ba-old { padding: 0.9rem 1rem; }
  .ba-old .t { font-size: 1.1rem; }
  .ba-old .u { font-size: 0.62rem; }
  .ba-old .box { font-size: 0.62rem; max-width: none; padding: 0.45rem; margin-top: 0.6rem; }
  .ba-old .b0 { font-size: 0.62rem; margin-top: 0.5rem; }
  .ba-old .gif { font-size: 0.6rem; right: 0.7rem; top: 0.7rem; }

  .bn-nav { padding: 0.55rem 0.8rem; }
  .bn-hero { padding: 0.8rem 0.8rem 0; }
  .bn-sub { display: none; }               /* te weinig ruimte, kop en knoppen zijn genoeg */
  .bn-cards { grid-template-columns: repeat(2, 1fr); padding: 0.7rem 0.8rem; }
  .bn-cards .bn-card:nth-child(3) { display: none; }
  .bn-strip { padding: 0.4rem 0.8rem; }

  .gauges { gap: 0.9rem; }
  .gauge svg { max-width: 76px; }
}

/* drie knoppen naast elkaar op een smal scherm */
@media (max-width: 26rem) {
  .callbar .btn { padding: 0.75rem 0.6rem; font-size: 0.85rem; white-space: nowrap; }
}

/* =========================================================
   Springende hero en krappe menubalk
   ========================================================= */

/* De typende regel wisselt van lengte en brak daardoor naar twee regels,
   waardoor alles eronder op en neer sprong. De ruimte staat nu vast
   gereserveerd, dus de zin mag rustig langer en korter worden.          */
.terminal {
  align-items: flex-start;
  min-height: 2.6em;
  width: 100%;
  max-width: 26rem;
}
.terminal #type { display: inline-block; }
.speed { min-height: 1.5em; }

@media (max-width: 48rem) {
  .terminal { min-height: 3.9em; }   /* op smalle schermen past hij op twee regels */
}

/* De menubalk: alles op één rij, kleiner lettertype, en ruimte aan de
   randen zodat het laatste item niet tegen de zijkant wordt afgesneden. */
@media (max-width: 52rem) {
}

@media (max-width: 26rem) {
  .topbar { padding-inline: 1rem; }
  .wordmark { font-size: 1rem; }
  .wordmark img { height: 22px; }
  .tools { gap: 0.5rem; }
}

/* =========================================================
   Menubalk op telefoons: alles past, niets wordt afgesneden
   ========================================================= */

@media (max-width: 52rem) {
  /* De balk gebruikt bijna de volle schermbreedte en de letters schalen
     mee met het scherm, zodat alle items passen zonder af te snijden.  */
  .topbar { padding-inline: 0.7rem; }

  .nav {
    width: 100%;
    overflow: visible;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
    gap: 0.4rem;
    font-size: clamp(0.63rem, 3.1vw, 0.8125rem);
  }
  .nav a { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
}

/* =========================================================
   De belofte: eerst zien, dan pas betalen
   ========================================================= */

.vink {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--cyan); color: var(--on-accent);
  font-size: 0.66rem; font-weight: 700; line-height: 1;
}
.vink.groot { width: 26px; height: 26px; font-size: 0.85rem; box-shadow: 0 0 22px -4px var(--cyan); }

/* de regel onder de knoppen in de hero */
.belofte-mini {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin: 2rem 0 0; max-width: 42ch;
  font-size: 0.9375rem; color: var(--ink);
  border-left: 1px solid var(--cyan); padding-left: 0.9rem;
}
.belofte-mini .vink { margin-top: 0.15rem; }

/* de eigen sectie */
.belofte { position: relative; }
.belofte::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 15% 0%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 70%);
}
.belofte .inner { position: relative; }
.belofte .lead { max-width: 54ch; }

.belofte-rij {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.75rem; margin-top: 3rem;
}
.belofte-punt h3 { margin: 0.9rem 0 0.4rem; }
.belofte-punt p { color: var(--ink-dim); margin: 0; font-size: 0.9375rem; }

/* =========================================================
   1. Zoekbalk in de menubalk
   ========================================================= */

.zoekdoos { position: relative; display: flex; align-items: center; }
.zoekdoos .loep { position: absolute; left: 0.65rem; color: var(--ink-dim); font-size: 0.95rem; pointer-events: none; }

.zoekdoos input {
  width: 11rem; background: var(--field); border: 1px solid var(--rule); border-radius: 999px;
  color: var(--ink); font: inherit; font-size: 0.8125rem; padding: 0.4rem 0.8rem 0.4rem 1.9rem;
  transition: width 260ms cubic-bezier(0.2,0.7,0.2,1), border-color 200ms ease;
  -webkit-appearance: none;
}
.zoekdoos input::placeholder { color: var(--ink-dim); }
.zoekdoos input:focus {
  outline: none; width: 16rem; border-color: transparent;
  background:
    linear-gradient(var(--field), var(--field)) padding-box,
    linear-gradient(100deg, var(--cyan), var(--violet)) border-box;
  box-shadow: 0 0 26px -8px var(--cyan);
}
.zoekdoos.open .loep { color: var(--cyan); }
.zoekdoos input::-webkit-search-cancel-button { display: none; }

.zoek-lijst {
  position: absolute; top: calc(100% + 0.5rem); right: 0; width: 20rem; z-index: 60;
  list-style: none; margin: 0; padding: 0.35rem;
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: 14px;
  box-shadow: 0 30px 70px -25px rgba(0,0,0,0.75);
  max-height: 60vh; overflow-y: auto;
  display: none;
}
.zoekdoos.open .zoek-lijst { display: block; animation: zoekIn 180ms cubic-bezier(0.2,0.7,0.2,1) both; }
@keyframes zoekIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.zoek-lijst li {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.65rem;
  border-radius: 10px; cursor: pointer; font-size: 0.875rem;
  animation: zoekRij 260ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
@keyframes zoekRij { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.zoek-lijst li .ic {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 7px;
  display: grid; place-items: center; font-size: 0.7rem;
  background: color-mix(in srgb, var(--cyan) 16%, transparent); color: var(--cyan);
}
.zoek-lijst li mark { background: none; color: var(--cyan); font-weight: 600; }
.zoek-lijst li .pijl { color: var(--cyan); font-family: var(--mono); font-size: 0.72rem; }
.zoek-lijst li .tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoek-lijst li .soort { margin-left: auto; font-family: var(--mono); font-size: 0.6rem; color: var(--ink-dim); white-space: nowrap; }
.zoek-lijst li:hover, .zoek-lijst li[aria-selected="true"] { background: color-mix(in srgb, var(--cyan) 14%, transparent); }
.zoek-lijst li[aria-selected="true"] .ic { background: var(--cyan); color: var(--on-accent); }
.zoek-lijst .leeg { padding: 0.9rem; color: var(--ink-dim); font-size: 0.8125rem; }

/* =========================================================
   2. Prestatiekaart met echte metingen
   ========================================================= */

.meting { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); border-radius: 16px; overflow: hidden; margin-top: 3rem; }
.meting > div { background: var(--surface-1); padding: 1.7rem 1.5rem; }
.meting b { display: block; font-family: var(--mono); font-weight: 500; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); letter-spacing: -0.04em; line-height: 1; color: var(--cyan); }
.meting span { display: block; margin-top: 0.6rem; font-size: 0.875rem; color: var(--ink-dim); }
.meting em { font-style: normal; font-size: 0.62rem; font-family: var(--mono); color: var(--ink-dim); opacity: 0.7; }
.meting-uitleg { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-dim); margin-top: 1.25rem; }

/* =========================================================
   3. Rijkere voorbeeldsite in de configurator
   ========================================================= */

.pv { display: flex; flex-direction: column; min-height: 22rem; transition: background 400ms ease; }
.pv-nav { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 1rem; border-bottom: 1px solid currentColor; }
.pv-nav .merk { font-weight: 700; letter-spacing: -0.02em; font-size: 0.9rem; }
.pv-nav .links { display: flex; gap: 0.7rem; font-size: 0.62rem; opacity: 0.6; }
.pv-nav .knop { margin-left: auto; font-size: 0.6rem; font-weight: 600; border-radius: 999px; padding: 0.25rem 0.6rem; white-space: nowrap; }
.pv-hero { padding: 1.3rem 1rem 0.9rem; }
.pv-hero .eyebrow { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.08em; margin: 0 0 0.4rem; }
.pv-hero h4 { font-size: clamp(1rem, 2.4vw, 1.45rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 0.35rem; }
.pv-hero p { font-size: 0.7rem; opacity: 0.65; margin: 0 0 0.7rem; max-width: 30ch; }
.pv-btns { display: flex; gap: 0.4rem; }
.pv-btns span { font-size: 0.6rem; font-weight: 600; border-radius: 999px; padding: 0.3rem 0.7rem; }
.pv-items { display: grid; gap: 0.5rem; padding: 0.4rem 1rem 1rem; margin-top: auto; }
.pv-item { border-radius: 10px; overflow: hidden; border: 1px solid currentColor; }
.pv-item .beeld { height: 42px; }
.pv-item .regel { display: flex; justify-content: space-between; gap: 0.3rem; padding: 0.35rem 0.5rem; font-size: 0.6rem; }
.pv-item .prijs { font-family: var(--mono); font-weight: 600; }
.pv-voet { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem; border-top: 1px solid currentColor; font-family: var(--mono); font-size: 0.58rem; opacity: 0.75; }
.pv-voet .stip { width: 5px; height: 5px; border-radius: 50%; background: #35d07f; }
.pv-voet .rechts { margin-left: auto; }
.pv-in { animation: fadeUp 420ms cubic-bezier(0.2,0.7,0.2,1) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* =========================================================
   4. Afdrukbare briefing
   ========================================================= */

.print-only { display: none; }
@media print {
  body > *:not(.print-only) { display: none !important; }
  .print-only { display: block; color: #000; font-family: Georgia, serif; padding: 0; }
  .print-only h1 { font-size: 22pt; margin: 0 0 4pt; }
  .print-only .sub { color: #555; margin: 0 0 18pt; font-size: 10pt; }
  .print-only table { width: 100%; border-collapse: collapse; font-size: 11pt; }
  .print-only td { padding: 7pt 0; border-bottom: 1px solid #ddd; vertical-align: top; }
  .print-only td:first-child { width: 34%; color: #555; }
  .print-only .voet { margin-top: 22pt; font-size: 9pt; color: #555; }
}

/* ---------- kleurenwiel en voorbeeldkleuren ---------- */

.kleurbalk {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule-soft);
}

/* het wiel: sleep het bolletje rond de ring naar de kleur die je wilt */
.wiel {
  position: relative; width: 76px; height: 76px; flex: 0 0 auto;
  border-radius: 50%; cursor: grab; touch-action: none;
  background:
    radial-gradient(circle, var(--void) 0 40%, transparent 41%),
    /* begint bovenaan bij rood, zodat de stand van het bolletje exact
       overeenkomt met de kleur die eronder ligt */
    conic-gradient(from 0deg,
      hsl(0 82% 58%), hsl(30 82% 58%), hsl(60 82% 58%), hsl(90 82% 58%),
      hsl(120 82% 58%), hsl(150 82% 58%), hsl(180 82% 58%), hsl(210 82% 58%),
      hsl(240 82% 58%), hsl(270 82% 58%), hsl(300 82% 58%), hsl(330 82% 58%), hsl(360 82% 58%));
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: box-shadow 250ms ease;
}
.wiel:hover { box-shadow: inset 0 0 0 1px var(--rule), 0 0 26px -6px var(--cyan); }
.wiel:active { cursor: grabbing; }

.wiel-greep {
  position: absolute; left: 50%; top: 50%;
  width: 20px; height: 20px; border-radius: 50%;
  background: transparent; border: 3px solid #fff; cursor: grab;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 3px 10px rgba(0,0,0,0.5);
  transform: translate(-50%, -50%) rotate(192deg) translateY(-30px);
  transition: box-shadow 200ms ease;
}
.wiel-greep:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--void), 0 0 0 5px var(--cyan); }

.wiel-kern {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--cyan); border: 2px solid var(--void);
  box-shadow: 0 0 18px -2px currentColor; pointer-events: none;
}

.kleurinfo { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.8125rem; color: var(--ink-dim); }
.kleurcode { font-family: var(--mono); font-size: 0.72rem; color: var(--cyan); text-transform: uppercase; }

.kleurrij { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.kleurstip {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--k); border: 1px solid rgba(255, 255, 255, 0.22);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.kleurstip:hover { transform: scale(1.18); }
.kleurstip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--void), 0 0 0 4px var(--k); }

.chip.klein { font-size: 0.78rem; padding: 0.35rem 0.75rem; }

/* =========================================================
   Assistent: knop rechtsonder en het gespreksvenster
   ========================================================= */

.chat-knop {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90;
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: linear-gradient(100deg, var(--cyan), var(--violet)); color: var(--on-accent);
  border: 0; border-radius: 999px; padding: 0.75rem 1.25rem 0.75rem 0.85rem;
  font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 18px 45px -18px var(--cyan);
  transition: transform 250ms ease, opacity 250ms ease, box-shadow 250ms ease;
}
.chat-knop:hover { transform: translateY(-2px); box-shadow: 0 22px 55px -18px var(--cyan); }
.chat-knop.weg { opacity: 0; pointer-events: none; transform: scale(0.92); }
.chat-knop .bel {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.9); color: #0b1220;
  display: grid; place-items: center; font-size: 0.8rem;
}
@media (max-width: 48rem) { .chat-knop { bottom: 5.2rem; right: 0.8rem; padding: 0.6rem 1.1rem 0.6rem 0.7rem; font-size: 0.85rem; } }

.chat {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 95;
  width: min(24rem, calc(100vw - 2rem)); max-height: min(36rem, 80vh);
  display: none; flex-direction: column; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: 20px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85);
}
.chat.open { display: flex; animation: chatIn 260ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes chatIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (max-width: 48rem) { .chat { bottom: 4.8rem; right: 0.6rem; left: 0.6rem; width: auto; max-height: 72vh; } }

.chat-kop {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--rule-soft);
  background: linear-gradient(160deg, color-mix(in srgb, var(--cyan) 12%, transparent), transparent);
}
.chat-kop img { width: 30px; height: auto; flex: 0 0 auto; }
.chat-kop strong { display: block; font-size: 0.95rem; letter-spacing: -0.01em; }
.chat-kop span { display: block; font-family: var(--mono); font-size: 0.6rem; color: var(--ink-dim); margin-top: 0.15rem; }
.c-sluit { margin-left: auto; background: none; border: 0; color: var(--ink-dim); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; border-radius: 50%; }
.c-sluit:hover { color: var(--ink); }

/* het gesprek zelf */
.chat-loop { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; overscroll-behavior: contain; }
.chat-loop::-webkit-scrollbar { width: 6px; }
.chat-loop::-webkit-scrollbar-track { background: transparent; }
.chat-loop::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 999px; }
.chat-loop::-webkit-scrollbar-thumb:hover { background: var(--cyan); }
.chat-loop { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }

.bericht { max-width: 90%; animation: bubbelIn 300ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes bubbelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bericht p { margin: 0; padding: 0.7rem 0.9rem; border-radius: 16px; font-size: 0.875rem; line-height: 1.55; }
.bericht.bot { align-self: flex-start; }
.bericht.bot p { background: var(--surface-1); border: 1px solid var(--rule-soft); color: var(--ink); border-bottom-left-radius: 6px; }
.bericht.ik { align-self: flex-end; }
.bericht.ik p { background: linear-gradient(100deg, var(--cyan), var(--violet)); color: var(--on-accent); font-weight: 500; border-bottom-right-radius: 6px; }

/* drie stipjes terwijl hij "nadenkt" */
.typt p { display: inline-flex; gap: 4px; align-items: center; padding: 0.85rem 0.95rem; }
.typt i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-dim); display: block; animation: tik 1.2s ease-in-out infinite; }
.typt i:nth-child(2) { animation-delay: 0.15s; }
.typt i:nth-child(3) { animation-delay: 0.3s; }
@keyframes tik { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.chat-acties { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
.chat-acties a { font-size: 0.78rem; border: 1px solid var(--rule); border-radius: 999px; padding: 0.32rem 0.75rem; color: var(--ink); text-decoration: none; }
.chat-acties a:hover { border-color: var(--cyan); color: var(--cyan); }

/* de suggesties liepen weg in een schuifbalk; ze passen nu netjes onder elkaar */
.chat-snel { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1rem 0.8rem; }
.chat-snel button {
  background: none; border: 1px solid var(--rule-soft); border-radius: 999px;
  color: var(--ink-dim); font: inherit; font-size: 0.75rem; line-height: 1.3;
  padding: 0.38rem 0.8rem; cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.chat-snel button:hover { border-color: var(--cyan); color: var(--ink); background: color-mix(in srgb, var(--cyan) 10%, transparent); }

.chat-invoer { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid var(--rule-soft); }
.chat-invoer input { flex: 1; min-width: 0; background: var(--field); border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); font: inherit; font-size: 0.875rem; padding: 0.6rem 1rem; }
.chat-invoer input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 14%, transparent); }
.chat-invoer button { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0; background: linear-gradient(100deg, var(--cyan), var(--violet)); color: var(--on-accent); font-size: 1.05rem; cursor: pointer; transition: transform 200ms ease; }
.chat-invoer button:hover { transform: scale(1.06); }

/* nette schuifbalken op de hele site */
* { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

/* ---------- pictogram van de assistent ---------- */
.chat-knop .bel { width: 26px; height: 26px; flex: 0 0 auto; color: currentColor; background: none; overflow: visible; }
.chat-knop .bel .maan { transform-origin: 12px 12px; animation: baan 3.6s linear infinite; }
@keyframes baan { to { transform: rotate(360deg); } }
.chat-knop:hover .bel { animation: wieg 1.6s ease-in-out infinite; }
@keyframes wieg { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg); } }
@media (prefers-reduced-motion: reduce) { .chat-knop .bel .maan { animation: none; } }

/* =========================================================
   Vestiging: kaartje, adres en openingsstatus
   ========================================================= */

.vestiging {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: stretch; margin-top: 2.5rem;
  border: 1px solid var(--rule); border-radius: 18px; overflow: hidden;
  background: var(--surface-1);
}
@media (max-width: 52rem) { .vestiging { grid-template-columns: 1fr; } }

.kaartje { position: relative; min-height: 15rem; color: var(--ink); background: var(--surface-2); }
.kaartje svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kaartje::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 50%, transparent, color-mix(in srgb, var(--void) 55%, transparent));
}
.kaartje .golf { transform-origin: 200px 130px; animation: golfje 2.8s ease-out infinite; opacity: 0; }
.kaartje .golf.twee { animation-delay: 1.4s; }
@keyframes golfje { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(2.6); opacity: 0; } }

.vest-tekst { padding: clamp(1.5rem, 4vw, 2.5rem); display: flex; flex-direction: column; justify-content: center; }
.vest-tekst h3 { font-size: clamp(1.2rem, 1rem + 1vw, 1.75rem); margin-bottom: 0.2rem; }

.status { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--mono); font-size: 0.78rem; color: var(--ink); margin: 0; }
.status .bolletje { width: 8px; height: 8px; border-radius: 50%; background: #35d07f; box-shadow: 0 0 12px #35d07f; }
.status.dicht .bolletje { background: #ff6b6b; box-shadow: 0 0 12px #ff6b6b; }
.status.dicht { color: var(--ink-dim); }

@media (prefers-reduced-motion: reduce) { .kaartje .golf { animation: none; opacity: 0.4; } }

/* ---------- de echte kaart van Google, op verzoek ---------- */
.kaart-knop {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: 999px;
  color: var(--ink); font: inherit; font-size: 0.8125rem; font-weight: 500;
  padding: 0.6rem 1.2rem; cursor: pointer; z-index: 2;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.kaart-knop:hover { border-color: var(--cyan); transform: translate(-50%, -50%) translateY(-2px); box-shadow: 0 0 26px -8px var(--cyan); }
.kaart-fijn {
  position: absolute; left: 50%; top: calc(50% + 2.1rem); transform: translateX(-50%); z-index: 2;
  font-family: var(--mono); font-size: 0.62rem; color: var(--ink-dim); white-space: nowrap;
}
.kaartje iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.kaartje.echt .kaart-knop, .kaartje.echt .kaart-fijn, .kaartje.echt::after { display: none; }

/* =========================================================
   Menu met drie streepjes op telefoons
   ========================================================= */

.menu-knop { display: none; }
.menu-paneel { display: none; }

@media (max-width: 52rem) {
  .topbar .nav { display: none; }          /* de links verhuizen naar het paneel */

  .menu-knop {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 34px; height: 34px; padding: 0 7px;
    background: none; border: 1px solid var(--rule); border-radius: 10px; cursor: pointer;
  }
  .menu-knop span { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 260ms cubic-bezier(0.2,0.7,0.2,1), opacity 200ms ease; }
  .menu-knop.kruis span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-knop.kruis span:nth-child(2) { opacity: 0; }
  .menu-knop.kruis span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .menu-paneel {
    display: block;
    position: sticky; top: 3.7rem; z-index: 29;
    max-height: 0; overflow: hidden;
    background: var(--bar-solid); backdrop-filter: blur(16px);
    border-bottom: 1px solid transparent;
    transition: max-height 320ms cubic-bezier(0.2,0.7,0.2,1), border-color 200ms ease;
  }
  .menu-paneel.open { max-height: 24rem; border-bottom-color: var(--rule); }

  .menu-in { display: flex; flex-direction: column; padding: 0.4rem var(--pad) 1rem; }
  .menu-in > a {
    color: var(--ink); text-decoration: none; font-size: 1.05rem; font-weight: 500;
    padding: 0.85rem 0; border-bottom: 1px solid var(--rule-soft);
    opacity: 0; transform: translateY(-6px);
  }
  .menu-paneel.open .menu-in > a {
    opacity: 1; transform: none;
    transition: opacity 300ms ease, transform 300ms ease;
    transition-delay: calc(var(--i, 0) * 45ms + 60ms);
  }
  .menu-in > a::after { display: none; }

  .menu-extra { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding-top: 1rem; }
  .menu-extra a { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-dim); text-decoration: none; }
  .menu-extra a:hover { color: var(--cyan); }

  /* de kleurkeuze compacter, zodat hij geen halve pagina vult */
  .kleurbalk { gap: 0.7rem; }
  .wiel { width: 58px; height: 58px; }
  .wiel-greep { width: 16px; height: 16px; border-width: 2px; transform: translate(-50%, -50%) rotate(192deg) translateY(-23px); }
  .wiel-kern { width: 26px; height: 26px; }
  .kleurinfo { flex: 1 1 6rem; font-size: 0.75rem; }
  .kleurstip { width: 20px; height: 20px; }
  .kleurrij { flex: 1 1 100%; order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-paneel, .menu-knop span, .menu-in > a { transition: none !important; }
}

/* ---------- recensies ---------- */
.recensie .sterren { color: var(--cyan); letter-spacing: 0.18em; font-size: 0.85rem; margin: 0 0 0.7rem; }
.recensie .tekst { font-size: 1.0625rem; line-height: 1.45; color: var(--ink); margin: 0 0 0.9rem; }
.recensie .wie { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-dim); margin: 0; }

/* het knopje staat linksboven, vóór het woordmerk */
@media (max-width: 52rem) {
  .topbar { gap: 0.6rem 0.8rem; }
  .menu-knop { order: -1; margin-right: 0.2rem; }
}

/* =========================================================
   Kleurkiezer in de menubalk
   ========================================================= */

.kleurdoos { position: relative; display: flex; }

.kleurknop {
  width: 30px; height: 30px; padding: 3px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--rule); background: none;
  display: grid; place-items: center;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
.kleurknop span {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: var(--cyan); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.kleurknop:hover, .kleurknop[aria-expanded="true"] { border-color: var(--cyan); box-shadow: 0 0 18px -5px var(--cyan); }

.kleurpaneel {
  position: absolute; right: 0; top: calc(100% + 0.7rem); z-index: 60;
  display: none; width: max-content; padding: 0.9rem;
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: 14px;
  box-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.75);
  animation: zoekIn 170ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.kleurpaneel.open { display: block; }

.kp-kop { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--ink-dim); margin: 0 0 0.7rem; }

.kp-stippen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; }
.kp-stip {
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer; padding: 0;
  background: var(--k); border: 1px solid rgba(255, 255, 255, 0.18);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.kp-stip:hover { transform: translateY(-2px); }
.kp-stip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 3px var(--k); }

/* dunne balk met alle kleurtonen, voor wie iets heel eigens wil */
.kp-schuif {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 10px; margin: 0.9rem 0 0.2rem; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, hsl(0 82% 58%), hsl(60 82% 58%), hsl(120 82% 58%), hsl(180 82% 58%),
                                     hsl(240 82% 58%), hsl(300 82% 58%), hsl(360 82% 58%));
}
.kp-schuif::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--surface-2); box-shadow: 0 1px 6px rgba(0,0,0,0.5); cursor: grab;
}
.kp-schuif::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--surface-2); box-shadow: 0 1px 6px rgba(0,0,0,0.5); cursor: grab;
}

.kp-terug {
  display: block; margin-top: 0.6rem; background: none; border: 0; padding: 0;
  font: inherit; font-family: var(--mono); font-size: 0.66rem; color: var(--ink-dim);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.kp-terug:hover { color: var(--cyan); }

@media (max-width: 26rem) { .kleurpaneel { right: -2.5rem; } }

/* =========================================================
   Mobiele correcties: kiezer, zoeken en gelijke knoppen
   ========================================================= */

/* 1. de kleurkiezer paste niet op een telefoonscherm */
@media (max-width: 40rem) {
  .kleurpaneel {
    position: fixed;
    left: 0.7rem; right: 0.7rem; top: 4rem;
    width: auto; max-width: none;
    padding: 1rem;
  }
  .kp-stippen { grid-template-columns: repeat(8, 1fr); gap: 0.5rem; }
  .kp-stip { width: 100%; height: 34px; }
  .kp-schuif { height: 14px; margin-top: 1.1rem; }
  .kp-schuif::-webkit-slider-thumb { width: 22px; height: 22px; }
  .kp-schuif::-moz-range-thumb { width: 22px; height: 22px; }
  .kp-terug { margin-top: 0.9rem; font-size: 0.75rem; }
}

/* 2a. iOS zoomt in op tekstvelden kleiner dan 16px, waardoor de hele
       pagina verschuift zodra je in het zoekveld tikt */
@media (max-width: 52rem) {
  .zoekdoos input, .chat-invoer input,
  .field input, .field select, .field textarea, .namebar input {
    font-size: 16px;
  }
}

/* 2b. scrollen in de suggesties mag niet doorwerken op de pagina */
.zoek-lijst, .chat-loop, .kleurpaneel {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 52rem) {
  .zoek-uitslag {
    position: fixed;
    left: 0.7rem; right: 0.7rem; top: 4rem;
    width: auto;
  }
  .zoek-lijst { max-height: 50vh; }
}

/* 3. de knoppen in de kaarten staan nu allemaal op dezelfde hoogte */
.cards .card { display: flex; flex-direction: column; }
.cards .card > .actions { margin-top: auto; padding-top: 1.25rem; }

/* ---------- huisknop, altijd zichtbaar naast het logo ---------- */
.huisknop {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 10px;
  border: 1px solid var(--rule-soft); color: var(--ink-dim);
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.huisknop svg { width: 19px; height: 19px; display: block; }
.huisknop:hover { color: var(--ink); border-color: var(--rule); background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.huisknop.actief { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }

/* het huisje in het uitklapmenu blijft klein en netjes */
.menu-in .menu-home { display: flex; align-items: center; gap: 0.7rem; }
.menu-in .menu-home svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* ---------- kruisje in de zoekbalk ---------- */
.zoek-kruis {
  position: absolute; right: 0.45rem; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0;
  background: var(--surface-1); color: var(--ink-dim);
  font-size: 1rem; line-height: 1; cursor: pointer; display: none;
}
.zoekdoos.open .zoek-kruis { display: grid; place-items: center; }
.zoek-kruis:hover { color: var(--ink); background: color-mix(in srgb, var(--cyan) 18%, transparent); }
.zoekdoos.open input { padding-right: 2.1rem; }
.zoekdoos.open .sneltoets { display: none; }

/* verplichte bedrijfsgegevens in de footer */
.footer .wettelijk { font-family: var(--mono); font-size: 0.72rem; opacity: 0.85; }

/* zon en maan als tekening, zodat ze op elk toestel gelijk zijn */
.themebtn { display: inline-grid; place-items: center; }
.themebtn span { display: grid; place-items: center; line-height: 0; }
.themebtn svg { display: block; }


/* =========================================================
   Volgorde van de knoppen op telefoons
   huis · kleur · licht/donker · zoekbalk · taal
   ========================================================= */

@media (max-width: 52rem) {
  .tools { display: flex; align-items: center; gap: 0.45rem; }

  .tools .huisknop { display: inline-grid; order: 1; width: 30px; height: 30px; }
  .tools .huisknop svg { width: 17px; height: 17px; }
  .kleurdoos  { order: 2; }
  .themebtn   { order: 3; }
  .zoekdoos   { order: 4; }
  .langswitch { order: 5; }

  /* het röntgenknopje is een extraatje; op een klein scherm is de ruimte
     beter besteed aan zoeken. Hij blijft bereikbaar via het zoekvenster. */
  .xrbtn { display: none; }

  /* zoeken is nu een echte balk in plaats van een los loepje */
  .zoekdoos { display: block; }
  .zoekdoos input {
    width: 5rem; padding: 0.34rem 0.5rem 0.34rem 1.8rem;
    font-size: 16px;
  }
  .zoekdoos input:focus { width: min(13rem, 46vw); }
  .zoekdoos .loep { left: 0.55rem; font-size: 0.9rem; }
}

@media (max-width: 26rem) {
  .tools { gap: 0.35rem; }
  .zoekdoos input { width: 4.2rem; }
}

/* ---------- foto's meesturen in de configurator ---------- */
.fotokiezer {
  display: flex; align-items: center; gap: 0.7rem; cursor: pointer;
  border: 1px dashed var(--rule); border-radius: 12px; padding: 0.85rem 1rem;
  color: var(--ink-dim); font-size: 0.875rem;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.fotokiezer:hover { border-color: var(--cyan); color: var(--ink); background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.fotokiezer input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fotokiezer .plus {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 1rem;
  background: color-mix(in srgb, var(--cyan) 16%, transparent); color: var(--cyan);
}
.fotokiezer:focus-within { border-color: var(--cyan); }

.fotorij { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.fototegel { position: relative; width: 62px; height: 62px; border-radius: 10px; overflow: hidden; border: 1px solid var(--rule-soft); }
.fototegel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fototegel button {
  position: absolute; right: 2px; top: 2px; width: 18px; height: 18px; border: 0; padding: 0;
  border-radius: 50%; background: rgba(0,0,0,0.65); color: #fff; font-size: 0.7rem; line-height: 1; cursor: pointer;
}
.fototegel button:hover { background: #ff5c5c; }

/* foto's van de klant in het beheerpaneel */
.fotos-beheer { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fotos-beheer img { width: 92px; height: 92px; object-fit: cover; border-radius: 10px; border: 1px solid var(--rule-soft); display: block; }
.fotos-beheer a:hover img { border-color: var(--cyan); }

/* ---------- afronden van de configurator ---------- */
.afronden { border-top: 1px solid var(--rule-soft); padding-top: 1.5rem; margin-top: 1.5rem; }
.afronden .btn.groot { width: 100%; justify-content: center; padding: 1rem 1.5rem; font-size: 1rem; }

.kleine-opties {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem;
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--rule-soft);
}
.kleine-opties button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.8125rem; color: var(--ink-dim);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color 180ms ease;
}
.kleine-opties button:hover { color: var(--cyan); }

/* =========================================================
   Schrijfblok, vragenlijst, schetsknop en bevestiging
   ========================================================= */

/* het tekstvak waarin de klant zijn wensen beschrijft */
.schrijfblok textarea {
  width: 100%; min-height: 8rem; resize: vertical;
  background: var(--field); border: 1px solid var(--rule); border-radius: 14px;
  color: var(--ink); font: inherit; font-size: 0.95rem; line-height: 1.6;
  padding: 0.9rem 1rem;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
.schrijfblok textarea:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 14%, transparent), 0 0 28px -12px var(--cyan);
}
.schrijfblok textarea::placeholder { color: var(--ink-dim); }

.tellerregel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.6rem; }
#tekst-teller { color: var(--ink-dim); }

.vragenknop {
  background: none; border: 0; padding: 0; cursor: pointer; margin-left: auto;
  font: inherit; font-size: 0.8125rem; color: var(--cyan);
  text-decoration: underline; text-underline-offset: 3px; text-align: left;
}
.vragenknop:hover { color: var(--ink); }

/* de vragenlijst die één vraag tegelijk stelt */
.vragenlijst[hidden] { display: none; }
.vragenlijst {
  margin-top: 0.9rem; padding: 1.1rem;
  border: 1px solid var(--rule); border-radius: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 70%);
  animation: fadeUp 300ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.vl-kop { display: flex; align-items: center; margin-bottom: 0.6rem; }
.vl-stand { font-family: var(--mono); font-size: 0.68rem; color: var(--cyan); }
.vl-sluit { margin-left: auto; background: none; border: 0; color: var(--ink-dim); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 0.2rem; }
.vl-sluit:hover { color: var(--ink); }

.vl-balk { height: 3px; border-radius: 999px; background: var(--rule-soft); overflow: hidden; margin-bottom: 1rem; }
.vl-balk i { display: block; height: 100%; width: 25%; background: linear-gradient(90deg, var(--cyan), var(--violet)); transition: width 350ms cubic-bezier(0.2, 0.7, 0.2, 1); }

.vl-vraag { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 0.75rem; color: var(--ink); }
.vragenlijst input {
  width: 100%; background: var(--field); border: 1px solid var(--rule); border-radius: 10px;
  color: var(--ink); font: inherit; font-size: 0.95rem; padding: 0.7rem 0.9rem;
}
.vragenlijst input:focus { outline: none; border-color: var(--cyan); }

.vl-knoppen { display: flex; align-items: center; gap: 1rem; margin-top: 0.8rem; }
.vl-knoppen .btn { padding: 0.6rem 1.3rem; font-size: 0.875rem; }
.vl-over { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 0.8rem; color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px; }
.vl-over:hover { color: var(--ink); }

/* de knop naar de schets mag gezien worden */
.schetsknop { width: 100%; justify-content: center; gap: 0.7rem; margin-bottom: 0.7rem; border-color: var(--cyan); color: var(--ink); }
.schetsknop:hover { background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.schetsknop .oog { width: 22px; height: 22px; display: grid; place-items: center; color: var(--cyan); }
.schetsknop .oog svg { width: 22px; height: 22px; }

/* bevestiging na het versturen */
.klaarscherm[hidden] { display: none; }   /* anders wint display:grid van het hidden-attribuut */
.klaarscherm {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: 1.5rem; background: rgba(2, 5, 15, 0.88); backdrop-filter: blur(10px);
  animation: fadeUp 280ms ease both;
}
.klaar-doos {
  max-width: 32rem; text-align: center;
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: 22px;
  padding: clamp(1.8rem, 5vw, 3rem);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
  animation: klaarIn 420ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@keyframes klaarIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: none; } }

.klaar-vink { color: var(--cyan); width: 96px; margin: 0 auto 1.2rem; }
.klaar-vink svg { width: 100%; height: auto; overflow: visible; }
.klaar-vink .ring { stroke-dasharray: 214; stroke-dashoffset: 214; animation: ringDicht 700ms cubic-bezier(0.4, 0, 0.2, 1) 120ms forwards; }
.klaar-vink .haak { stroke-dasharray: 60; stroke-dashoffset: 60; animation: haakZet 450ms cubic-bezier(0.3, 0.8, 0.3, 1) 640ms forwards; }
.klaar-vink::after {
  content: ""; display: block; width: 96px; height: 96px; margin-top: -96px; border-radius: 50%;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--cyan) 45%, transparent);
  animation: puls 900ms ease-out 700ms;
}
@keyframes ringDicht { to { stroke-dashoffset: 0; } }
@keyframes haakZet { to { stroke-dashoffset: 0; } }
@keyframes puls { to { box-shadow: 0 0 0 34px transparent; } }

.klaar-doos h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); margin-bottom: 0.4rem; }
.klaar-doos .lead { margin-inline: auto; }
#klaar-nummer { font-family: var(--mono); color: var(--ink-dim); margin: 0.4rem 0 1.6rem; }

@media (prefers-reduced-motion: reduce) {
  .klaar-vink .ring, .klaar-vink .haak { stroke-dashoffset: 0; animation: none; }
  .klaar-vink::after, .klaar-doos, .klaarscherm, .vragenlijst { animation: none; }
}

/* ---------- waar de klant al online staat ---------- */
.kanalen { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.5rem; }
.kanaal { display: flex; align-items: center; gap: 0; margin: 0; }
.kanaal .merkje {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 0.85rem;
  background: var(--surface-1); color: var(--ink-dim);
  border: 1px solid var(--rule); border-right: 0;
  border-radius: 10px 0 0 10px;
  transition: color 200ms ease, background 200ms ease;
}
.kanaal input {
  flex: 1; min-width: 0; height: 38px;
  background: var(--field); border: 1px solid var(--rule); border-radius: 0 10px 10px 0;
  color: var(--ink); font: inherit; font-size: 0.875rem; padding: 0 0.75rem;
  transition: border-color 200ms ease;
}
.kanaal input:focus { outline: none; border-color: var(--cyan); }
.kanaal:focus-within .merkje { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); border-color: var(--cyan); }
.kanaal input::placeholder { color: var(--ink-dim); }

/* kanalen in het beheerpaneel */
.kanaallijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.875rem; }
.kanaallijst li { display: flex; gap: 0.75rem; align-items: baseline; }
.kanaallijst span { flex: 0 0 9rem; font-family: var(--mono); font-size: 0.7rem; color: var(--ink-dim); }
.kanaallijst em { font-style: normal; }

/* ---------- kanalen als pictogrammen ---------- */
.kanaalrij { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.kanaalknop {
  position: relative; width: 48px; height: 48px; flex: 0 0 auto; padding: 0; cursor: pointer;
  display: grid; place-items: center; border-radius: 14px;
  background: var(--surface-1); border: 1px solid var(--rule-soft); color: var(--ink-dim);
  transition: color 200ms ease, border-color 200ms ease, transform 200ms ease, background 200ms ease;
}
.kanaalknop svg { width: 23px; height: 23px; }
.kanaalknop:hover { color: var(--ink); border-color: var(--rule); transform: translateY(-2px); }
.kanaalknop.gevuld { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 55%, transparent); background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.kanaalknop .vinkje {
  position: absolute; right: -3px; top: -3px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--cyan); color: var(--on-accent); font-size: 0.6rem; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--void);
}

.kanaalvak[hidden] { display: none; }
.kanaalvak {
  margin-top: 0.9rem; padding: 1.1rem;
  border: 1px solid var(--rule); border-radius: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 70%);
  animation: fadeUp 260ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* ---------- lucht tussen de kanalen en het prijsvak ---------- */
.kanaalrij { margin-bottom: 0.2rem; }
.qset:has(.kanaalrij) { margin-bottom: 2.5rem; }
.quote { margin-top: 0.5rem; }

/* de bovengrens bij de richtprijs */
.nooitmeer { color: var(--cyan); margin: 0 0 0.5rem; }

/* één werkdag, groot en duidelijk */
.werkdag {
  display: flex; align-items: center; gap: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent);
  border-radius: 14px; padding: 0.9rem 1.1rem; margin-bottom: 1rem;
  background: linear-gradient(100deg, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 70%);
}
.wd-cijfer {
  font-family: var(--mono); font-size: 2.4rem; line-height: 1; font-weight: 500;
  color: var(--cyan); text-shadow: 0 0 26px color-mix(in srgb, var(--cyan) 55%, transparent);
}
.wd-tekst { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.875rem; color: var(--ink-dim); }
.wd-tekst strong { font-size: 1.05rem; color: var(--ink); letter-spacing: -0.01em; }

/* ---------- doorverwijzing naar de configurator ---------- */
.sneller {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); border-radius: 16px;
  padding: 1.1rem 1.25rem; margin-bottom: 2rem;
  background: linear-gradient(120deg, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 70%);
}
.sneller > div { flex: 1 1 16rem; }
.sneller strong { display: block; font-size: 1.05rem; letter-spacing: -0.01em; margin-bottom: 0.25rem; }
.sneller p { margin: 0; font-size: 0.875rem; color: var(--ink-dim); max-width: 46ch; }
.sneller .btn { flex: 0 0 auto; }

/* ---------- aanwijzing dat de pictogrammen klikbaar zijn ---------- */
.kliktip {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.7rem;
  font-family: var(--mono); font-size: 0.72rem; color: var(--cyan);
}
.kliktip .wijzer { animation: wipwip 1.8s ease-in-out infinite; }
@keyframes wipwip { 0%, 100% { transform: translateY(-2px); opacity: 0.5; } 50% { transform: translateY(2px); opacity: 1; } }

/* lege pictogrammen zien er nu uit als iets wat je moet aanklikken */
.kanaalknop:not(.gevuld) { border-style: dashed; }
.kanaalknop:not(.gevuld)::after {
  content: "+";
  position: absolute; right: -3px; top: -3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--rule);
  color: var(--ink-dim); font-size: 0.7rem; line-height: 15px; text-align: center;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.kanaalknop:not(.gevuld):hover::after { background: var(--cyan); color: var(--on-accent); border-color: var(--cyan); }

@media (prefers-reduced-motion: reduce) { .kliktip .wijzer { animation: none; } }

/* ---------- de werkdag-belofte in de hero ---------- */
.hero-belofte {
  display: flex; align-items: center; gap: 0.75rem;
  max-width: 34rem; margin: 1.6rem 0 0;
  font-size: 0.9375rem; color: var(--ink);
  border-left: 2px solid var(--cyan); padding-left: 0.9rem;
}
.hb-cijfer {
  font-family: var(--mono); font-size: 2rem; line-height: 1; font-weight: 500; flex: 0 0 auto;
  color: var(--cyan); text-shadow: 0 0 24px color-mix(in srgb, var(--cyan) 55%, transparent);
}

/* =========================================================
   Openingscampagne: vinkje en prijs met korting
   ========================================================= */

.kortingkaart {
  display: flex; align-items: flex-start; gap: 0.85rem; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); border-radius: 14px;
  padding: 0.95rem 1.1rem; margin-top: 1.5rem;
  background: linear-gradient(115deg, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 72%);
  transition: border-color 220ms ease, background 220ms ease;
}
.kortingkaart:hover { border-color: var(--cyan); }
.kortingkaart input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.kortingkaart .vak {
  width: 22px; height: 22px; flex: 0 0 auto; margin-top: 0.1rem;
  border: 1px solid var(--rule); border-radius: 7px;
  display: grid; place-items: center;
  background: var(--field);
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.kortingkaart .haak { color: var(--on-accent); font-size: 0.75rem; font-weight: 700; opacity: 0; transform: scale(0.5); transition: opacity 180ms ease, transform 180ms ease; }
.kortingkaart input:checked ~ .vak { background: var(--cyan); border-color: var(--cyan); }
.kortingkaart input:checked ~ .vak .haak { opacity: 1; transform: none; }
.kortingkaart input:focus-visible ~ .vak { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 30%, transparent); }

.kk-tekst { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.875rem; color: var(--ink-dim); }
.kk-tekst strong { font-size: 1rem; color: var(--ink); letter-spacing: -0.01em; }

/* de prijs met korting */
.quote .amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.oudeprijs { color: var(--ink-dim); text-decoration: none; position: relative; font-size: 0.75em; }
.oudeprijs::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px;
  background: #ff5c5c; transform: rotate(-4deg);
}
.nieuweprijs { color: var(--cyan); }
.kortingvlag {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em;
  background: var(--cyan); color: var(--on-accent);
  padding: 0.15rem 0.5rem; border-radius: 999px; align-self: center;
}

/* ---------- codestap bij het bevestigen ---------- */
.klaar-slot { color: var(--cyan); width: 84px; margin: 0 auto 1.1rem; }
.klaar-slot svg { width: 100%; height: auto; }

.codeveld {
  display: block; width: 100%; max-width: 15rem; margin: 1.2rem auto 0.4rem;
  background: var(--field); border: 1px solid var(--rule); border-radius: 14px;
  color: var(--ink); font-family: var(--mono); font-size: 1.9rem; letter-spacing: 0.35em;
  text-align: center; padding: 0.75rem 0.5rem 0.75rem 0.85rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.codeveld:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 16%, transparent), 0 0 30px -12px var(--cyan);
}
.codeveld::placeholder { color: var(--ink-dim); opacity: 0.4; }

#stap-code[hidden], #stap-klaar[hidden] { display: none; }

/* ---------- verwijderen in het beheerpaneel ---------- */
.blokje.gevaar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.btn.weg { border-color: rgba(255, 92, 92, 0.4); color: #ff8a8a; font-size: 0.85rem; padding: 0.5rem 1rem; }
.btn.weg:hover { border-color: #ff5c5c; background: rgba(255, 92, 92, 0.12); }
.btn.weg.bevestig { background: #ff5c5c; border-color: #ff5c5c; color: #fff; }

/* =========================================================
   Configurator: sfeerkaartjes, eigen bedrag, rustiger geheel
   ========================================================= */

/* elke sfeer laat zichzelf zien in plaats van alleen zijn naam */
.sfeerrij {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.6rem;
}
.sfeer {
  display: flex; flex-direction: column; gap: 0.55rem; cursor: pointer; padding: 0.6rem;
  background: var(--surface-1); border: 1px solid var(--rule-soft); border-radius: 14px;
  font: inherit; text-align: left; color: var(--ink-dim);
  transition: border-color 220ms ease, transform 220ms ease, color 220ms ease, box-shadow 220ms ease;
}
.sfeer:hover { transform: translateY(-3px); color: var(--ink); border-color: var(--rule); }
.sfeer[aria-pressed="true"] {
  border-color: var(--a); color: var(--ink);
  box-shadow: 0 0 0 1px var(--a), 0 10px 30px -14px var(--a);
}

/* een minipagina in de kleuren van die sfeer */
.sf-proef {
  display: block; height: 52px; border-radius: 9px; overflow: hidden; position: relative;
  background: var(--b); border: 1px solid var(--rule-soft);
}
.sf-proef i { position: absolute; display: block; border-radius: 3px; }
.sf-proef i:nth-child(1) { left: 9px; top: 12px; width: 46%; height: 7px; background: var(--t); opacity: 0.85; }
.sf-proef i:nth-child(2) { left: 9px; top: 25px; width: 30%; height: 14px; background: var(--a); }
.sf-proef::after {
  content: ""; position: absolute; right: 9px; top: 12px; width: 26%; height: 27px;
  border-radius: 4px; background: var(--a); opacity: 0.28;
}
.sf-naam { font-size: 0.8125rem; line-height: 1.25; }

/* zelf een bedrag invullen */

/* de vragen krijgen meer lucht en een duidelijker nummer */
.qset { margin-bottom: 2rem; }
.qset > span:first-child {
  display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--ink-dim); margin-bottom: 0.7rem;
}

@media (max-width: 40rem) {
  .sfeerrij { grid-template-columns: 1fr 1fr; }
  .sf-proef { height: 44px; }
  .sf-naam { font-size: 0.75rem; }
}

/* ---------- bedrijfsgegevens in de configurator ---------- */
.gegevensraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.7rem; }
.veldje { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; }
.veldje.breed { grid-column: 1 / -1; }
.veldje > span { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-dim); }
.veldje input {
  background: var(--field); border: 1px solid var(--rule); border-radius: 10px;
  color: var(--ink); font: inherit; font-size: 0.875rem; padding: 0.55rem 0.75rem;
  transition: border-color 200ms ease;
}
.veldje input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 12%, transparent); }
.veldje input::placeholder { color: var(--ink-dim); opacity: 0.7; }

/* =========================================================
   Prijsbalk: blijft in beeld terwijl je kiest
   ========================================================= */

.prijsbalk {
  position: sticky; bottom: 0.8rem; z-index: 12;
  margin-top: 2rem;
}
.prijsbalk .quote {
  margin: 0; padding: 1rem 1.15rem;
  background: var(--bar-solid); backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
  border-radius: 16px;
  box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.75);
}

.pb-boven { display: flex; align-items: flex-start; gap: 1rem; }
.pb-boven > div { flex: 1; min-width: 0; }
.prijsbalk .label { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--ink-dim); }
.prijsbalk .amount { font-size: clamp(1.3rem, 1rem + 1.6vw, 2rem); margin: 0.1rem 0 0; }

.pb-uitklap {
  flex: 0 0 auto; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.75rem; color: var(--ink-dim);
  text-decoration: underline; text-underline-offset: 3px;
}
.pb-uitklap:hover { color: var(--cyan); }

.pb-uitleg[hidden] { display: none; }
.pb-uitleg { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--rule-soft); }
.pb-uitleg p { margin: 0 0 0.4rem; }
.pb-uitleg p:last-child { margin-bottom: 0; }

/* de korting zit nu in de balk en mag compacter */
.kortingkaart.klein {
  margin-top: 0.8rem; padding: 0.6rem 0.75rem; border-radius: 11px; gap: 0.6rem;
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
}
.kortingkaart.klein .vak { width: 19px; height: 19px; border-radius: 6px; }
.kortingkaart.klein .kk-tekst { font-size: 0.78rem; gap: 0.1rem; }
.kortingkaart.klein .kk-tekst strong { font-size: 0.875rem; }

@media (max-width: 52rem) {
  .prijsbalk { bottom: 0.6rem; }
  .prijsbalk .quote { padding: 0.85rem 1rem; }
  .kortingkaart.klein .kk-tekst span:last-child { display: none; }   /* alleen de kop op smalle schermen */
}

/* de kernbelofte staat direct bij de prijs, niet achter een linkje */
.eerstzien {
  display: flex; align-items: flex-start; gap: 0.5rem;
  margin: 0.6rem 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--ink);
}
.eerstzien .ez-vink {
  width: 17px; height: 17px; flex: 0 0 auto; margin-top: 0.05rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--cyan); color: var(--on-accent); font-size: 0.6rem; font-weight: 700;
}

/* =========================================================
   Bewegend beeld — zie film.js
   Het stilstaande beeld ligt eronder, de video erover.
   Zonder video ziet niemand een leeg vlak.
   ========================================================= */

.film {
  position: relative;
  height: var(--film-hoogte, 60vh);
  min-height: 18rem;
  overflow: hidden;
  border-radius: 20px;
  background-color: var(--void);
  background-image: var(--film-beeld);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

.film video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease;
}
.film.film-speelt video { opacity: 1; }

/* een laag eroverheen, zodat tekst altijd leesbaar blijft */
.film::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(80% 70% at 50% 50%, transparent, color-mix(in srgb, var(--void) 70%, transparent)),
    linear-gradient(to top, var(--void) 2%, transparent 45%);
  pointer-events: none;
}

/* tekst die over de film heen ligt */
.film-tekst {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(1.5rem, 4vw, 3rem);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.film-tekst h3 { font-size: clamp(1.4rem, 1rem + 1.8vw, 2.4rem); margin: 0; letter-spacing: -0.02em; }
.film-tekst p { margin: 0; color: var(--ink-dim); max-width: 44ch; }

/* een dun randje in de accentkleur, zodat het bij de rest past */
.film { box-shadow: inset 0 0 0 1px var(--rule-soft); }
.film.film-speelt { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 35%, transparent); }

@media (max-width: 52rem) {
  .film { height: var(--film-hoogte-mobiel, 40vh); border-radius: 16px; }
}

/* =========================================================
   Scroll-gestuurde beweging — zie beweging.js
   Alles met transform en opacity, dus het loopt soepel.
   ========================================================= */

/* tekst die woord voor woord oplicht */
[data-woorden] .w {
  opacity: 0.18;
  transition: opacity 120ms linear;
  display: inline-block;
}
[data-woorden] { text-wrap: pretty; }

/* lagen die trager meebewegen */
[data-diepte] { will-change: transform; }

/* een lijn die zichzelf tekent langs de stappen */
.tekenlijn {
  position: absolute; left: 0; top: 0; width: 2px; height: 100%;
  overflow: visible; pointer-events: none;
}
.tekenlijn path { stroke: var(--cyan); stroke-width: 2; fill: none; filter: drop-shadow(0 0 6px var(--cyan)); }


@media (prefers-reduced-motion: reduce) {
  [data-woorden] .w { opacity: 1 !important; }
  [data-diepte] { transform: none !important; }
}

/* ---------- de vier stappen, rustig en op één lijn ---------- */
.stappenrij {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; gap: 0;
  position: relative;
}

/* de verbindende lijn loopt door de nummers heen */
.stappenrij::before {
  content: ""; position: absolute; left: 1.35rem; top: 1.6rem; bottom: 1.6rem; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--rule) 8%, var(--rule) 92%, transparent);
}

.stapje {
  display: grid; grid-template-columns: 2.7rem 1fr; gap: 1.25rem;
  align-items: start; padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.stapje:last-child { border-bottom: 0; }

.sp-nr {
  position: relative; z-index: 1;
  width: 2.7rem; height: 2.7rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.75rem;
  color: var(--cyan); background: var(--void);
  border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
  transition: background 260ms ease, color 260ms ease, box-shadow 260ms ease;
}
.stapje:hover .sp-nr {
  background: var(--cyan); color: var(--on-accent);
  box-shadow: 0 0 24px -6px var(--cyan);
}

.stapje h3 { font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.5rem); margin: 0 0 0.35rem; letter-spacing: -0.01em; }
.stapje p { margin: 0; color: var(--ink-dim); max-width: 62ch; }

@media (max-width: 40rem) {
  .stappenrij::before { left: 1.1rem; }
  .stapje { grid-template-columns: 2.2rem 1fr; gap: 0.9rem; padding: 1.1rem 0; }
  .sp-nr { width: 2.2rem; height: 2.2rem; font-size: 0.68rem; }
}

/* =========================================================
   Configurator — grondig opgeknapt
   Duidelijke hiërarchie: nummer, vraag, antwoorden.
   ========================================================= */

/* het hele blok in een eigen omhulsel, zodat het aanvoelt als gereedschap
   in plaats van als nog een stuk tekst op de pagina */
.config-grid {
  margin-top: 2.5rem;
  gap: clamp(1.5rem, 3vw, 3rem);
}
.config-grid > :first-child {
  background: linear-gradient(168deg, color-mix(in srgb, var(--cyan) 7%, var(--surface-1)), var(--surface-1) 55%);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.8);
}

/* ---------- de vraag zelf ---------- */

.qset { margin-bottom: 1.9rem; padding-bottom: 1.9rem; border-bottom: 1px solid var(--rule-soft); }
.qset:last-of-type { border-bottom: 0; }

/* het nummer wordt een eigen element vóór de vraag */
.qset > span:first-child {
  display: flex; align-items: baseline; gap: 0.7rem;
  font-family: var(--sans); font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  font-weight: 500; letter-spacing: -0.015em;
  color: var(--ink); text-transform: none;
  margin-bottom: 0.9rem;
}

/* ---------- de keuzeknoppen ---------- */

.chips { gap: 0.55rem; }

.chip {
  font-size: 0.9375rem; padding: 0.62rem 1.15rem;
  border-radius: 12px;
  border-color: var(--rule);
  background: var(--field);
  position: relative;
  transition: color 220ms ease, border-color 220ms ease, background 220ms ease,
              transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 220ms ease;
}
.chip:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }

.chip[aria-pressed="true"] {
  color: var(--on-accent); font-weight: 600;
  background: linear-gradient(112deg, var(--cyan), var(--violet));
  box-shadow: 0 10px 26px -12px var(--cyan);
  transform: translateY(-1px);
}

/* een vinkje in de gekozen knop, zodat je in één oogopslag ziet waar je staat */
.chip[aria-pressed="true"]::after {
  content: "✓";
  margin-left: 0.5rem; font-size: 0.78em; opacity: 0.9;
}

.chip.klein { font-size: 0.78rem; padding: 0.4rem 0.8rem; border-radius: 9px; }
.chip.klein[aria-pressed="true"]::after { content: none; }

/* ---------- het voorbeeldvenster ---------- */

.config-grid > :last-child .devices { margin-bottom: 0.9rem; }

/* ---------- de bedrijfsnaam bovenaan ---------- */

.namebar { margin-bottom: 1.6rem; }
.namebar input {
  font-size: 1rem; padding: 0.75rem 1rem; border-radius: 12px;
}
.namebar input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 14%, transparent);
}

@media (max-width: 40rem) {
  .config-grid > :first-child { padding: 1.1rem; border-radius: 18px; }
  .qset { margin-bottom: 1.5rem; padding-bottom: 1.5rem; }
  .chip { font-size: 0.875rem; padding: 0.55rem 1rem; }
}

/* het nummer voor de vraag: klein, in de accentkleur */
.qnr {
  font-family: var(--mono); font-style: normal;
  font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--cyan);
  flex: 0 0 auto;
}

/* =========================================================
   Configurator — de grote opknapbeurt
   ========================================================= */

/* ---------- typografie ---------- */
/* Een systeemlettertype, dus niets van buitenaf, maar dan wel de mooiste
   variant die elk toestel in huis heeft, met de juiste fijnafstelling. */

:root {
  --sans: "Segoe UI Variable Display", "SF Pro Display", -apple-system,
          BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .stapje h3, .qset > span:first-child {
  font-optical-sizing: auto;
  text-wrap: balance;
}
h1, h2 { letter-spacing: -0.03em; }
h3 { letter-spacing: -0.02em; }
p, .lead { text-wrap: pretty; }
.lead { line-height: 1.6; }

/* ---------- de twee kolommen ---------- */

.config-grid { grid-template-columns: 1.05fr 0.95fr; align-items: start; }
@media (max-width: 62rem) { .config-grid { grid-template-columns: 1fr; } }

/* rechterkolom beweegt mee terwijl je links door de vragen scrolt */
.config-rechts {
  position: sticky; top: 5.5rem;
  display: flex; flex-direction: column; gap: 1rem;
}
@media (max-width: 62rem) {
  .config-rechts { position: static; }
}

/* ---------- voortgang door de vragen ---------- */

.voortgang {
  display: flex; align-items: center; gap: 0.9rem;
  margin-bottom: 1.6rem; padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--rule-soft);
}
.vg-balk {
  flex: 1; height: 3px; border-radius: 999px;
  background: var(--rule-soft); overflow: hidden;
}
.vg-balk i {
  display: block; height: 100%; width: 12.5%;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  border-radius: 999px;
  transition: width 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vg-tekst { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-dim); white-space: nowrap; }

/* ---------- de vraag ---------- */

.qset > span:first-child {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  font-weight: 600;
  align-items: center;
}

.qnr {
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem; border-radius: 7px;
  font-size: 0.62rem; letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--cyan) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
}

/* de vraag waar je mee bezig bent licht subtiel op */
.qset { transition: opacity 300ms ease; }
.qset:focus-within .qnr { background: var(--cyan); color: var(--on-accent); border-color: var(--cyan); }

/* ---------- het prijsvak onder het voorbeeld ---------- */

.prijsbalk { position: static; margin-top: 0; }
.prijsbalk .quote {
  background: linear-gradient(150deg, color-mix(in srgb, var(--cyan) 10%, var(--surface-2)), var(--surface-2) 60%);
  border-color: color-mix(in srgb, var(--cyan) 35%, transparent);
}
.prijsbalk .amount { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); letter-spacing: -0.03em; }

/* ---------- afronden ---------- */

.afronden { border-top: 0; padding-top: 0; margin-top: 0; }
.afronden .btn.groot { padding: 0.95rem 1.4rem; font-size: 0.95rem; }
.werkdag { padding: 0.75rem 0.95rem; margin-bottom: 0.85rem; }
.wd-cijfer { font-size: 2rem; }

@media (max-width: 62rem) {
  .prijsbalk { position: sticky; bottom: 0.8rem; }
}

/* =========================================================
   Configurator — pictogrammen, nieuwe velden, en passend maken
   ========================================================= */

/* ---------- de rechterkolom mag niet meer afsnijden ---------- */
.config-rechts {
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.35rem;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.config-rechts::-webkit-scrollbar { width: 6px; }
.config-rechts::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 999px; }
.config-rechts::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 62rem) { .config-rechts { max-height: none; overflow: visible; } }

/* het voorbeeldvenster wat compacter, zodat prijs en knop erbij passen */
.config-rechts .win-wrap { flex: 0 0 auto; }
.config-rechts .prev-body { max-height: 46vh; }

/* ---------- knoppen met een pictogram ---------- */

.chip.ic { display: inline-flex; align-items: center; gap: 0.55rem; padding-left: 0.85rem; }
.chip.ic svg { width: 19px; height: 19px; flex: 0 0 auto; opacity: 0.75; transition: opacity 200ms ease, transform 260ms cubic-bezier(0.2,0.7,0.2,1); }
.chip.ic:hover svg { opacity: 1; transform: scale(1.08); }
.chip.ic[aria-pressed="true"] svg { opacity: 1; }
.chip.ic[aria-pressed="true"]::after { content: none; }

/* een zachte glans die één keer over de gekozen knop loopt */
.chip[aria-pressed="true"]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.35) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: glans 700ms cubic-bezier(0.3, 0.8, 0.3, 1) 1;
  pointer-events: none;
}
@keyframes glans { to { transform: translateX(100%); } }

/* ---------- sfeer in eigen woorden ---------- */

.eigensfeer { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 1rem; }
.eigensfeer > span { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-dim); }
.eigensfeer input {
  background: var(--field); border: 1px solid var(--rule); border-radius: 11px;
  color: var(--ink); font: inherit; font-size: 0.9rem; padding: 0.62rem 0.85rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.eigensfeer input:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 13%, transparent);
}

/* ---------- beeld laten maken ---------- */

.beeldmaken {
  display: flex; align-items: flex-start; gap: 0.8rem; cursor: pointer; margin-top: 0.9rem;
  border: 1px dashed color-mix(in srgb, var(--cyan) 40%, transparent);
  border-radius: 13px; padding: 0.85rem 1rem;
  background: linear-gradient(120deg, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 70%);
  transition: border-style 200ms ease, border-color 200ms ease;
}
.beeldmaken input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.beeldmaken .vak {
  width: 20px; height: 20px; flex: 0 0 auto; margin-top: 0.1rem;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--field);
  display: grid; place-items: center;
  transition: background 200ms ease, border-color 200ms ease;
}
.beeldmaken .haak { color: var(--on-accent); font-size: 0.7rem; font-weight: 700; opacity: 0; transform: scale(0.5); transition: opacity 180ms ease, transform 180ms ease; }
.beeldmaken input:checked ~ .vak { background: var(--cyan); border-color: var(--cyan); }
.beeldmaken input:checked ~ .vak .haak { opacity: 1; transform: none; }
.beeldmaken:has(input:checked) { border-style: solid; border-color: var(--cyan); }
.bm-tekst { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8125rem; color: var(--ink-dim); }
.bm-tekst strong { font-size: 0.9rem; color: var(--ink); }

/* ---------- velden die je zelf invult, met bevestiging ---------- */
.eigenveld[hidden] { display: none; }
.eigenveld {
  position: relative; display: block; margin-top: 0.7rem;
  animation: fadeUp 240ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.eigenveld input {
  width: 100%; background: var(--field); border: 1px solid var(--rule); border-radius: 11px;
  color: var(--ink); font: inherit; font-size: 0.9rem; padding: 0.62rem 2.3rem 0.62rem 0.85rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.eigenveld input:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 13%, transparent);
}
.ev-vink {
  position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%) scale(0.6);
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.65rem; font-weight: 700;
  background: var(--cyan); color: var(--on-accent);
  opacity: 0; transition: opacity 220ms ease, transform 220ms cubic-bezier(0.2,0.8,0.3,1);
  pointer-events: none;
}
.eigenveld.gevuld .ev-vink { opacity: 1; transform: translateY(-50%) scale(1); }
.eigenveld.gevuld input { border-color: color-mix(in srgb, var(--cyan) 50%, transparent); }

/* de uitnodiging bij vraag 5 mag opvallen */
.vragenknop {
  font-size: 0.85rem; color: var(--cyan); font-weight: 500;
  text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
  padding-bottom: 1px; margin-left: 0;
}
.vragenknop::before { content: "✨ "; }
.tellerregel { justify-content: space-between; }

/* ---------- bedrijfsgegevens met pictogrammen ---------- */
.veldje { position: relative; }
.vj-kop { display: flex; align-items: center; gap: 0.45rem; }
.vj-kop svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--ink-dim); transition: color 220ms ease, transform 260ms cubic-bezier(0.2,0.7,0.2,1); }
.vj-kop > span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.03em; color: var(--ink-dim); }

.veldje:focus-within .vj-kop svg { color: var(--cyan); transform: scale(1.12); }
.veldje:focus-within .vj-kop > span { color: var(--cyan); }

/* een veld dat ingevuld is, blijft zichtbaar afgerond */
.veldje input:not(:placeholder-shown) {
  border-color: color-mix(in srgb, var(--cyan) 38%, transparent);
  background: color-mix(in srgb, var(--cyan) 5%, var(--field));
}

.gegevensraster { gap: 0.85rem 0.8rem; }

/* ---------- de rechterkolom past nu op één scherm ---------- */

.config-rechts {
  max-height: none;
  overflow: visible;
  gap: 0.8rem;
}
.config-rechts .prev-body { max-height: 34vh; }
.config-rechts .win { max-height: 40vh; }

.prijsbalk .quote { padding: 0.85rem 1rem; }
.prijsbalk .amount { font-size: clamp(1.35rem, 1rem + 1.3vw, 1.8rem); }
.eerstzien { font-size: 0.78rem; margin-top: 0.45rem; }
.pb-uitleg { margin-top: 0.55rem; padding-top: 0.55rem; }
.kortingkaart.klein { margin-top: 0.6rem; padding: 0.5rem 0.65rem; }

.werkdag { padding: 0.6rem 0.85rem; margin-bottom: 0.65rem; gap: 0.7rem; }
.wd-cijfer { font-size: 1.7rem; }
.wd-tekst { font-size: 0.78rem; }
.wd-tekst strong { font-size: 0.95rem; }

.afronden .field { margin-bottom: 0.7rem !important; }
.afronden .btn.groot { padding: 0.85rem 1.3rem; font-size: 0.92rem; }
.schetsknop { margin-bottom: 0.55rem; }
.kleine-opties { margin-top: 0.8rem; padding-top: 0.7rem; gap: 0.4rem 0.9rem; }
.kleine-opties button { font-size: 0.75rem; }

@media (max-height: 50rem) {
  .config-rechts .prev-body { max-height: 26vh; }
  .config-rechts .win { max-height: 32vh; }
}

/* ---------- typografie binnen de configurator ---------- */

#bouw .lead { font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem); color: var(--ink-dim); max-width: 58ch; }

.qset > span:first-child { font-weight: 600; line-height: 1.25; }
.qset > span:first-child > span { color: var(--ink); }

/* kleine labels overal in dezelfde stijl: mono, klein, rustig */
.kleurinfo > span:first-child,
.eigensfeer > span,
.tellerregel .fine,
.fotokiezer,
.kliktip { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.02em; }

/* getallen in dezelfde familie, zodat prijzen en tellers rustig ogen */
.amount, .kleurcode, .vg-tekst, .wd-cijfer, .qnr, .sp-nr { font-variant-numeric: tabular-nums; }

/* de koppen in het paneel iets strakker */
#bouw h2 { letter-spacing: -0.035em; }

/* =========================================================
   Weergavekeuze, bevestigen en de vragenkaart
   ========================================================= */

/* ---------- zo ziet het eruit op ... ---------- */

.kijkbalk {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 0.7rem; flex-wrap: wrap;
}
.kb-uitleg {
  margin: 0; font-size: 0.8125rem; color: var(--ink);
  display: flex; align-items: center; gap: 0.45rem;
}
.kb-uitleg::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan); flex: 0 0 auto;
}

.devices { display: flex; gap: 0.3rem; background: var(--field); border: 1px solid var(--rule); border-radius: 11px; padding: 0.2rem; }
.devices button {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: 0; cursor: pointer; border-radius: 8px;
  font: inherit; font-size: 0.78rem; color: var(--ink-dim);
  padding: 0.35rem 0.7rem;
  transition: background 200ms ease, color 200ms ease;
}
.devices button svg { width: 15px; height: 15px; }
.devices button:hover { color: var(--ink); }
.devices button[aria-pressed="true"] { background: var(--surface-2); color: var(--cyan); box-shadow: 0 1px 6px rgba(0,0,0,0.3); }

/* ---------- bevestigen met enter of het pijltje ---------- */

.ev-knop {
  position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer; padding: 0;
  border: 0; background: var(--surface-2); color: var(--ink-dim);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease, background 200ms ease, color 200ms ease;
}
.ev-knop svg { width: 15px; height: 15px; }

.eigenveld.gevuld .ev-knop { opacity: 1; pointer-events: auto; }
.eigenveld.gevuld .ev-knop:hover { background: var(--cyan); color: var(--on-accent); }

/* bevestigd: het veld kleurt mee en het pijltje wordt een vinkje */
.eigenveld.bevestigd input {
  border-color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 12%, var(--field));
  color: var(--ink);
}

/* ---------- de vragenlijst als kaartje ---------- */

.vragenkaart {
  display: flex; align-items: center; gap: 0.85rem; width: 100%;
  margin-top: 0.8rem; padding: 0.85rem 1rem; cursor: pointer;
  text-align: left; font: inherit;
  background: linear-gradient(115deg, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 75%);
  border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
  border-radius: 14px;
  transition: border-color 220ms ease, transform 220ms cubic-bezier(0.2,0.7,0.2,1), box-shadow 220ms ease;
}
.vragenkaart:hover {
  border-color: var(--cyan); transform: translateY(-2px);
  box-shadow: 0 14px 34px -20px var(--cyan);
}
.vk-ic {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px;
  display: grid; place-items: center; color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 15%, transparent);
}
.vk-ic svg { width: 20px; height: 20px; }
.vk-tekst { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; }
.vk-tekst strong { font-size: 0.9375rem; color: var(--ink); }
.vk-tekst > span { font-size: 0.78rem; color: var(--ink-dim); }
.vk-pijl { color: var(--cyan); font-size: 1.1rem; transition: transform 240ms cubic-bezier(0.2,0.7,0.2,1); }
.vragenkaart:hover .vk-pijl { transform: translateX(4px); }

/* ---------- rechterkolom compacter, knop altijd zichtbaar ---------- */

.config-rechts .prev-body { max-height: 27vh; }
.config-rechts .win { max-height: 33vh; }
.prijsbalk .quote { padding: 0.75rem 0.9rem; }
.prijsbalk .amount { font-size: clamp(1.25rem, 0.95rem + 1.1vw, 1.6rem); }
.werkdag { padding: 0.5rem 0.8rem; }
.wd-cijfer { font-size: 1.5rem; }
.kleine-opties { margin-top: 0.6rem; padding-top: 0.6rem; }

@media (max-height: 52rem) {
  .config-rechts .prev-body { max-height: 22vh; }
  .config-rechts .win { max-height: 27vh; }
  .pb-uitleg { display: none; }
}

/* =========================================================
   Bevestigde eigen velden zien eruit als een gekozen knop
   ========================================================= */

.eigenveld.bevestigd input {
  background: linear-gradient(112deg, var(--cyan), var(--violet));
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 600;
  box-shadow: 0 10px 26px -12px var(--cyan);
}
.eigenveld.bevestigd input::placeholder { color: color-mix(in srgb, var(--on-accent) 65%, transparent); }
/* bevestigd: de kleur van het veld zegt genoeg, dus het pijltje verdwijnt
   en alleen het kruisje blijft over om het weer te wissen */
.eigenveld.bevestigd .ev-knop { display: none; }
.eigenveld.bevestigd .ev-wis { right: 0.4rem; }
.eigenveld.bevestigd input { padding-right: 2.6rem; }

/* één keer een glans, net als bij de keuzeknoppen */
.eigenveld.bevestigd::after {
  content: ""; position: absolute; inset: 0; border-radius: 11px;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.3) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: glans 700ms cubic-bezier(0.3, 0.8, 0.3, 1) 1;
  pointer-events: none;
}

/* het eigen bedrag met het euroteken ervoor */
.eigenveld.met-euro input { padding-left: 2.1rem; font-family: var(--mono); }
.eigenveld .euro {
  position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 0.95rem; color: var(--ink-dim);
  pointer-events: none; z-index: 1;
}
.eigenveld.bevestigd .euro { color: var(--on-accent); }
.eigenveld.met-euro input::-webkit-outer-spin-button,
.eigenveld.met-euro input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.eigenveld.met-euro input { -moz-appearance: textfield; }

/* ---------- klaar om te versturen ---------- */

.klaarmelding[hidden] { display: none; }
.klaarmelding {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin: 0 0 0.85rem; padding: 0.7rem 0.9rem;
  border-radius: 12px; font-size: 0.8125rem; line-height: 1.4; color: var(--ink);
  border: 1px solid color-mix(in srgb, #35d07f 45%, transparent);
  background: linear-gradient(115deg, rgba(53, 208, 127, 0.14), transparent 75%);
  animation: fadeUp 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.km-vink {
  width: 18px; height: 18px; flex: 0 0 auto; margin-top: 0.05rem;
  border-radius: 50%; display: grid; place-items: center;
  background: #35d07f; color: #04120a; font-size: 0.62rem; font-weight: 700;
}

/* ---------- de glans mag niet buiten het element doorlopen ---------- */
.eigenveld, .chip { overflow: hidden; }

/* ---------- wisknop in de eigen velden ---------- */
.ev-wis {
  position: absolute; right: 2.5rem; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 7px; cursor: pointer; padding: 0;
  border: 0; background: none; color: var(--ink-dim);
  font-size: 1.05rem; line-height: 1; display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease, background 200ms ease, color 200ms ease;
}
.eigenveld.gevuld .ev-wis { opacity: 1; pointer-events: auto; }
.ev-wis:hover { background: color-mix(in srgb, #ff5c5c 20%, transparent); color: #ff8a8a; }
.eigenveld.bevestigd .ev-wis { color: color-mix(in srgb, var(--on-accent) 75%, transparent); }
.eigenveld.bevestigd .ev-wis:hover { background: rgba(255, 255, 255, 0.22); color: var(--on-accent); }

/* ruimte maken voor beide knoppen */
.eigenveld input { padding-right: 4.4rem; }

/* de gegevensvelden en de naam gebruiken nu dezelfde omhulling */
.veldje .eigenveld, .namebar .eigenveld { margin-top: 0; }
.veldje .eigenveld input { width: 100%; }
.namebar .eigenveld input { width: 100%; font-size: 1rem; padding: 0.75rem 4.4rem 0.75rem 1rem; border-radius: 12px; }

/* in het smalle raster passen twee knoppen krap; iets compacter */
.gegevensraster .eigenveld input { padding-right: 4rem; font-size: 0.85rem; }
.gegevensraster .ev-wis { right: 2.3rem; width: 22px; height: 22px; }
.gegevensraster .ev-knop { width: 24px; height: 24px; }
.gegevensraster .ev-knop svg { width: 13px; height: 13px; }

/* ---------- de opzet blijft bewaard ---------- */
.bewaardregel {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.8rem;
  margin: 1.4rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 0.66rem; color: var(--ink-dim);
}
.bw-stip {
  width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: #35d07f; box-shadow: 0 0 8px #35d07f;
  animation: ademen 2.6s ease-in-out infinite;
}
@keyframes ademen { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.bewaardregel button {
  margin-left: auto; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--ink-dim);
  text-decoration: underline; text-underline-offset: 3px;
}
.bewaardregel button:hover { color: #ff8a8a; }
@media (prefers-reduced-motion: reduce) { .bw-stip { animation: none; } }

/* =========================================================
   RUST — de site minder "gemaakt" laten ogen
   Minder gloed, minder kleur, meer wit. Eén accent, spaarzaam
   gebruikt. Effecten die je niet opmerkt in plaats van effecten
   die om aandacht vragen.
   ========================================================= */

:root {
  --void: #0a0a0c;                 /* neutraal donkergrijs in plaats van blauwzwart */
  --ink: #f5f5f7;
  --ink-dim: #86868b;              /* rustig grijs, geen blauwzweem */

  --surface-1: #141416;
  --surface-2: #1c1c1f;
  --field: #131315;
  --bar: rgba(10, 10, 12, 0.72);
  --bar-solid: rgba(10, 10, 12, 0.94);

  --rule: rgba(255, 255, 255, 0.12);
  --rule-soft: rgba(255, 255, 255, 0.07);
  --grid: rgba(255, 255, 255, 0.04);

  --orb-op: 0;                     /* de zwevende bollen uit */
  --noise-op: 0;

  --on-accent: #0a0a0c;
}

/* ---------- de decoratie weg ---------- */

.bg, .mesh, .noise, .sparks { display: none; }
.cur-ring, .cur-dot { display: none; }      /* eigen muisaanwijzer weg */

/* ---------- geen gloed meer ---------- */

.btn, .chip, .kaart, .card, .panel, .win, .sfeer, .vragenkaart,
.prijsbalk .quote, .config-grid > :first-child, .kleurknop, .huisknop {
  box-shadow: none !important;
}
.btn-primary { text-shadow: none; }
.wd-cijfer, .hb-cijfer, .sp-nr, .kleurcode { text-shadow: none !important; }

/* ---------- ruimte, het belangrijkste verschil ---------- */

.band { padding-block: clamp(4.5rem, 10vw, 9rem); }
.inner { max-width: 68rem; }
h2 { margin-bottom: 1rem; }
.lead { margin-bottom: 0; max-width: 40ch; }
.kicker { margin-bottom: 1.5rem; }

/* ---------- typografie: groter, rustiger ---------- */

h1 { letter-spacing: -0.035em; line-height: 1.04; font-weight: 600; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); letter-spacing: -0.03em; font-weight: 600; line-height: 1.08; }
h3 { font-weight: 600; }
.lead { font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem); line-height: 1.55; color: var(--ink-dim); }
p { line-height: 1.6; }

.kicker {
  font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0;
  text-transform: none; color: var(--ink-dim);
}
.kicker .dot { display: none; }

/* ---------- knoppen: rustig en herkenbaar ---------- */

.btn {
  border-radius: 999px; font-weight: 500; letter-spacing: 0;
  padding: 0.8rem 1.5rem;
  transition: opacity 200ms ease, background 200ms ease, border-color 200ms ease;
}
.btn-primary { background: var(--ink); color: var(--void); border-color: var(--ink); }
.btn-primary:hover { opacity: 0.88; transform: none; }
.btn-ghost { background: transparent; border-color: var(--rule); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-dim); background: rgba(255,255,255,0.04); transform: none; }

/* ---------- keuzeknoppen zonder verloop ---------- */

.chip[aria-pressed="true"] {
  background: var(--ink); color: var(--void);
  border-color: var(--ink); font-weight: 500;
  transform: none;
}
.chip[aria-pressed="true"]::before { display: none; }   /* de glans weg */
.chip:hover { transform: none; border-color: var(--ink-dim); }

.eigenveld.bevestigd input {
  background: var(--ink); color: var(--void); border-color: var(--ink);
  font-weight: 500;
}
.eigenveld.bevestigd::after { display: none; }
.eigenveld.bevestigd .ev-wis { color: rgba(10,10,12,0.55); }
.eigenveld.bevestigd .ev-wis:hover { background: rgba(10,10,12,0.1); color: var(--void); }
.eigenveld.bevestigd .euro { color: rgba(10,10,12,0.55); }

/* ---------- de accentkleur blijft, maar spaarzaam ---------- */

.qnr { background: none; border-color: var(--rule); color: var(--ink-dim); }
.vg-balk i { background: var(--ink); }
.werkdag { background: none; border-color: var(--rule); }
.wd-cijfer { color: var(--ink); }
.vk-ic { background: rgba(255,255,255,0.06); color: var(--ink); }
.vragenkaart { background: none; border-color: var(--rule); }
.vragenkaart:hover { transform: none; border-color: var(--ink-dim); }
.kortingkaart { background: none; }
.beeldmaken { background: none; }
.sneller { background: none; border-color: var(--rule); }
.klaarmelding { background: none; border-color: var(--rule); }
.km-vink { background: var(--ink); color: var(--void); }
.eerstzien .ez-vink { background: var(--ink); color: var(--void); }
.prijsbalk .quote { background: var(--surface-1); border-color: var(--rule); }
.config-grid > :first-child { background: var(--surface-1); }
.hero-belofte { border-left-color: var(--rule); }
.hb-cijfer { color: var(--ink); }

/* =========================================================
   Telefoon: minder op het scherm, meer lucht
   ========================================================= */

@media (max-width: 52rem) {

  /* meer ruimte tussen de onderdelen, minder proppen */
  .band { padding-block: 3.5rem; }
  .inner { padding-inline: 1.35rem; }
  h2 { font-size: clamp(1.7rem, 1.2rem + 3vw, 2.2rem); }
  .lead { font-size: 1rem; }

  /* de balk onderin verdween achter de prijs: één van de twee is genoeg */
  .callbar { display: none; }

  /* de lopende band met diensten leidt af op een klein scherm */
  .ticker, .marquee, .htrack { display: none; }

  /* het röntgenknopje en de kleurkiezer horen niet op een telefoon */
  .xrbtn, .kleurdoos { display: none; }

  /* de configurator: één vraag tegelijk voelt rustiger dan acht onder elkaar */
  .qset { margin-bottom: 1.6rem; padding-bottom: 1.6rem; }
  .qset > span:first-child { font-size: 1.05rem; }
  .chips { gap: 0.45rem; }
  .chip { padding: 0.55rem 0.95rem; font-size: 0.875rem; }

  /* de sfeerkaartjes in twee kolommen, zonder voorbeeldvlak */
  .sfeerrij { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .sf-proef { height: 34px; }

  /* het voorbeeldvenster blijft — dat is juist wat overtuigt — maar
     compacter, en zonder de keuze laptop/telefoon: op een telefoon
     laat hij vanzelf de telefoonweergave zien */
  .config-rechts .win-wrap { max-height: 42vh; }
  .config-rechts .prev-body { max-height: 36vh; }
  .devices { display: none; }
  .kijkbalk { justify-content: flex-start; }
  .kb-uitleg { font-size: 0.78rem; }

  /* het uitklapmenu en de zoekbalk zijn genoeg; de rest uit de balk */
  .topbar { padding-block: 0.65rem; }

  /* minder randen en vlakken: dat maakt het meteen rustiger */
  .config-grid > :first-child { background: none; border: 0; padding: 0; }
  .prijsbalk .quote { border-radius: 14px; }

  /* de vier stappen zonder de verbindende lijn */
  .stappenrij::before { display: none; }
  .stapje { grid-template-columns: 1fr; gap: 0.35rem; }
  .sp-nr { width: auto; height: auto; background: none; border: 0; padding: 0;
           justify-self: start; font-size: 0.7rem; color: var(--ink-dim); }

  /* kaarten onder elkaar met meer lucht */
  .cards { gap: 0.9rem; }
  .card { padding: 1.25rem; }
}

/* op hele kleine schermen nog iets verder terug */
@media (max-width: 26rem) {
  .band { padding-block: 3rem; }
  .sfeerrij { grid-template-columns: 1fr; }
  .sf-proef { height: 40px; }
}

/* =========================================================
   Lichte modus als standaard — en de schakelaar werkt weer
   Deze regels staan bewust onderaan, zodat ze winnen van de
   donkere waarden hierboven.
   ========================================================= */

[data-theme="light"] {
  --void: #ffffff;
  --ink: #1d1d1f;                  /* niet zwart: rustiger om te lezen */
  --ink-dim: #6e6e73;

  --surface-1: #f5f5f7;
  --surface-2: #ffffff;
  --field: #ffffff;
  --bar: rgba(255, 255, 255, 0.82);
  --bar-solid: rgba(255, 255, 255, 0.96);

  --rule: rgba(0, 0, 0, 0.12);
  --rule-soft: rgba(0, 0, 0, 0.07);
  --grid: rgba(0, 0, 0, 0.04);

  --orb-op: 0;
  --noise-op: 0;

  --on-accent: #ffffff;
  --cyan: #0071e3;                 /* één rustig blauw, zoals een systeemkleur */
  --violet: #0071e3;
}

/* in de lichte modus wordt wat gekozen is donker in plaats van wit */
[data-theme="light"] .btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
[data-theme="light"] .chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
[data-theme="light"] .eigenveld.bevestigd input { background: var(--ink); color: #fff; border-color: var(--ink); }
[data-theme="light"] .eigenveld.bevestigd .ev-wis { color: rgba(255,255,255,0.6); }
[data-theme="light"] .eigenveld.bevestigd .ev-wis:hover { background: rgba(255,255,255,0.2); color: #fff; }
[data-theme="light"] .eigenveld.bevestigd .euro { color: rgba(255,255,255,0.6); }
[data-theme="light"] .vg-balk i { background: var(--ink); }
[data-theme="light"] .km-vink, [data-theme="light"] .eerstzien .ez-vink { background: var(--ink); color: #fff; }
[data-theme="light"] .vk-ic { background: rgba(0,0,0,0.05); color: var(--ink); }
[data-theme="light"] .card, [data-theme="light"] .stat, [data-theme="light"] .panel { background: var(--surface-1); }
[data-theme="light"] .win { background: #fff; }
[data-theme="light"] .footer { border-top-color: var(--rule); }

/* de donkere modus houdt de waarden van hierboven */
[data-theme="dark"] {
  --void: #0a0a0c;
  --ink: #f5f5f7;
  --ink-dim: #86868b;
  --surface-1: #141416;
  --surface-2: #1c1c1f;
  --field: #131315;
  --bar: rgba(10, 10, 12, 0.72);
  --bar-solid: rgba(10, 10, 12, 0.94);
  --rule: rgba(255, 255, 255, 0.12);
  --rule-soft: rgba(255, 255, 255, 0.07);
  --grid: rgba(255, 255, 255, 0.04);
  --on-accent: #0a0a0c;
  --cyan: #2997ff;
  --violet: #2997ff;
}

/* ---------- minder monospace: dat leest als techniek ---------- */

.kicker, .vg-tekst, .qnr, .sp-nr, .vj-kop > span, .eigensfeer > span,
.kleurinfo > span:first-child, .tellerregel .fine, .bewaardregel,
.kanaallijst span, .fine {
  font-family: var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
.vg-tekst, .qnr, .sp-nr { font-variant-numeric: tabular-nums; }
.kleurcode, .amount { font-family: var(--sans); }

/* =========================================================
   Laatste slag: minder kaders, meer papier
   Een site oogt "gemaakt" door veel omlijnde vlakken. Apple zet
   dingen op een vlak vel en scheidt met ruimte en een dunne lijn.
   ========================================================= */

/* kaarten zonder rand, alleen een ander vlak */
.card, .stat, .panel, .win-wrap, .vestiging, .sfeer, .kortingkaart, .beeldmaken,
.sneller, .klaarmelding, .vragenkaart, .werkdag, .prijsbalk .quote {
  border-color: var(--rule-soft);
}
.card { background: var(--surface-1); border-radius: 18px; }
.card:hover { transform: none; border-color: var(--rule); }

/* de menubalk: vast wit of vast donker, geen glaseffect */
.topbar {
  background: var(--void);
  backdrop-filter: none;
  border-bottom: 1px solid var(--rule-soft);
}
.menu-paneel { background: var(--void); backdrop-filter: none; }

/* de voortgangsbalk hoeft niet in kleur */
.vg-balk { background: var(--rule-soft); }

/* het configuratorpaneel op een vel in plaats van in een kader */
.config-grid > :first-child {
  background: none; border: 0; padding: 0;
}
.qset { border-bottom: 1px solid var(--rule-soft); }

/* het voorbeeldvenster: een echt venster, niet een neonlijst */
.win { border: 1px solid var(--rule); border-radius: 14px; }
.win-wrap { border: 0; }

/* knoppen in de balk rustiger */
.themebtn, .huisknop, .kleurknop, .menu-knop {
  border-color: var(--rule-soft); color: var(--ink-dim);
}
.themebtn:hover, .huisknop:hover { color: var(--ink); border-color: var(--rule); }

/* de zoekbalk zonder gloed en zonder verlopende rand */
.zoekdoos input:focus {
  background: var(--field);
  border-color: var(--ink-dim);
  box-shadow: none;
}
.zoek-uitslag { background: var(--surface-2); border-color: var(--rule); }
.zoek-lijst li .ic { background: var(--rule-soft); color: var(--ink-dim); }
.zoek-lijst li:hover, .zoek-lijst li[aria-selected="true"] { background: var(--rule-soft); }
.zoek-lijst li[aria-selected="true"] .ic { background: var(--ink); color: var(--void); }
.zoek-lijst li mark { color: var(--ink); font-weight: 600; }

/* de assistent rechtsonder: rustig rondje in plaats van neonknop */
.chat-knop { background: var(--ink); color: var(--void); border: 0; }
.chat-venster { border-color: var(--rule); }

/* stippen en streepjes die nergens toe dienen */
.kicker .dot, .bw-stip, .eerstzien .ez-vink { }
.kb-uitleg::before { background: var(--ink-dim); box-shadow: none; }
.status .bolletje { box-shadow: none; }

/* =========================================================
   De titel: één rustige regel, geen gloed, geen losse letters
   ========================================================= */

h1 {
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.03;
  margin-bottom: 1.2rem;
  color: var(--ink);
  max-width: 14ch;
}
.glow-text, .split { color: var(--ink) !important; background: none !important;
  -webkit-text-fill-color: currentColor !important; text-shadow: none !important; }
.split .ch, .split .w { opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important; }

/* ---------- wat je kiest wordt blauw, niet zwart ---------- */

.chip[aria-pressed="true"],
.eigenveld.bevestigd input {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #fff;
}
[data-theme="light"] .chip[aria-pressed="true"],
[data-theme="light"] .eigenveld.bevestigd input {
  background: var(--cyan); border-color: var(--cyan); color: #fff;
}
.eigenveld.bevestigd .ev-wis,
[data-theme="light"] .eigenveld.bevestigd .ev-wis { color: rgba(255,255,255,0.7); }
.eigenveld.bevestigd .ev-wis:hover,
[data-theme="light"] .eigenveld.bevestigd .ev-wis:hover { background: rgba(255,255,255,0.22); color: #fff; }
.eigenveld.bevestigd .euro,
[data-theme="light"] .eigenveld.bevestigd .euro { color: rgba(255,255,255,0.7); }

/* de knop blijft wel donker: die moet het zwaarst wegen op de pagina */
.btn-primary, [data-theme="light"] .btn-primary { background: var(--ink); color: var(--void); border-color: var(--ink); }

/* =========================================================
   Kortingslabel, tijdsduur, donkere secties, vragenkaart
   ========================================================= */

/* ---------- -40% naast het bedrag in plaats van eronder ---------- */

.quote .amount {
  display: flex; flex-wrap: nowrap; align-items: baseline;
  gap: 0.45rem; white-space: nowrap;
}
.oudeprijs { font-size: 0.6em; }
.kortingvlag {
  font-size: 0.55em; padding: 0.1rem 0.4rem; letter-spacing: 0;
  background: var(--cyan); color: #fff; align-self: center;
}

/* ---------- hoe lang het invullen duurt ---------- */

.vg-duur { font-size: 0.72rem; color: var(--ink-dim); white-space: nowrap; }
.voortgang { gap: 0.7rem; }
.vg-balk { order: 3; flex-basis: 100%; }

/* ---------- donkere secties tussen de witte ---------- */

.band.omgekeerd {
  --void: #1d1d1f;
  --ink: #f5f5f7;
  --ink-dim: #a1a1a6;
  --surface-1: #2a2a2e;
  --surface-2: #2a2a2e;
  --field: #2a2a2e;
  --rule: rgba(255, 255, 255, 0.14);
  --rule-soft: rgba(255, 255, 255, 0.08);
  --cyan: #2997ff;

  background: var(--void);
  color: var(--ink);
}
.band.omgekeerd .card { background: var(--surface-1); }

/* ---------- de vragenkaart ---------- */

.vragenkaart {
  gap: 1rem; padding: 1.1rem 1.15rem; border-radius: 16px;
  border: 1px solid var(--rule);
  background: var(--surface-1);
}
.vragenkaart:hover { background: var(--surface-2); border-color: var(--ink-dim); }
.vk-ic {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--ink); color: var(--void);
}
.vk-ic svg { width: 21px; height: 21px; }
.vk-tekst strong { font-size: 1rem; font-weight: 600; }
.vk-tekst > span { font-size: 0.8125rem; line-height: 1.4; }
.vk-pijl { display: grid; place-items: center; width: 22px; height: 22px; color: var(--ink-dim); }
.vk-pijl svg { width: 18px; height: 18px; }
.vragenkaart:hover .vk-pijl { color: var(--ink); transform: translateX(3px); }

/* =========================================================
   De knop rechtsonder: rustig, duidelijk, niet schreeuwerig
   ========================================================= */

.chat-knop {
  right: 1.25rem; bottom: 1.25rem;
  gap: 0.55rem;
  background: var(--ink); color: var(--void);
  border: 0; border-radius: 999px;
  padding: 0.7rem 1.15rem 0.7rem 0.85rem;
  font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.45);
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 220ms ease, box-shadow 220ms ease;
}
.chat-knop:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.55);
}
.chat-knop:active { transform: translateY(0); }

.chat-knop .bel { width: 19px; height: 19px; color: currentColor; animation: none; }
.chat-knop .bel .maan { display: none; }
.chat-knop:hover .bel { animation: none; }

/* de drie stipjes in de ballon wippen zacht op bij hover */
.chat-knop .bel circle { transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1); transform-origin: center; }
.chat-knop:hover .bel circle:nth-of-type(1) { transform: translateY(-1.4px); }
.chat-knop:hover .bel circle:nth-of-type(2) { transform: translateY(-1.4px); transition-delay: 60ms; }
.chat-knop:hover .bel circle:nth-of-type(3) { transform: translateY(-1.4px); transition-delay: 120ms; }

/* het venster erboven in dezelfde rust */
.chat-venster {
  border-radius: 18px; border: 1px solid var(--rule);
  background: var(--surface-2);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.5);
}
.chat-kop { border-bottom: 1px solid var(--rule-soft); }
.chat-bel { background: var(--surface-1); }
.chat-ik { background: var(--ink); color: var(--void); }
.chat-optie { border-color: var(--rule); color: var(--ink); }
.chat-optie:hover { background: var(--rule-soft); border-color: var(--ink-dim); }

@media (max-width: 48rem) {
  .chat-knop { bottom: 1rem; right: 1rem; padding: 0.62rem 1rem 0.62rem 0.75rem; font-size: 0.82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-knop, .chat-knop .bel circle { transition: none; }
}

/* =========================================================
   Donkere modus: de omgekeerde blokken subtiel houden
   In het licht is een donker blok een accent. In het donker zou
   hetzelfde blok een grijze plak worden — daar wordt het juist
   een tint dieper, met een haarlijn erboven en eronder.
   ========================================================= */

[data-theme="dark"] .band.omgekeerd {
  --void: #141416;
  --ink: #f5f5f7;
  --ink-dim: #86868b;
  --surface-1: #1c1c1f;
  --surface-2: #1c1c1f;
  --field: #1c1c1f;
  --rule: rgba(255, 255, 255, 0.11);
  --rule-soft: rgba(255, 255, 255, 0.06);

  background: var(--void);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* in het licht dezelfde behandeling: een haarlijn in plaats van een harde rand */
[data-theme="light"] .band.omgekeerd {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* vlakken binnen zo'n blok mogen niet verdwijnen tegen de achtergrond */
.band.omgekeerd .card,
.band.omgekeerd .stat,
.band.omgekeerd .panel,
.band.omgekeerd .win,
.band.omgekeerd .stapel-kaart {
  background: var(--surface-1);
  border: 1px solid var(--rule-soft);
}

/* en de horizontale dienstenrij past sowieso niet in een blok */
.htrack, .hbar { background: none; }

/* =========================================================
   Donkere modus: vlakken die je ook echt ziet
   Bijna-zwart op bijna-zwart leest als een fout. Een vlak hoort
   een tint lichter te zijn dan de pagina, met een haarlijn eromheen.
   ========================================================= */

[data-theme="dark"] {
  --surface-1: #161618;
  --surface-2: #1c1c1f;
  --field: #161618;
  --rule: rgba(255, 255, 255, 0.13);
  --rule-soft: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .card,
[data-theme="dark"] .stat,
[data-theme="dark"] .panel,
[data-theme="dark"] .vestiging,
[data-theme="dark"] .sfeer,
[data-theme="dark"] .vragenkaart,
[data-theme="dark"] .prijsbalk .quote,
[data-theme="dark"] .zoek-uitslag,
[data-theme="dark"] .chat-venster,
[data-theme="dark"] .kleurpaneel {
  background: var(--surface-1);
  border: 1px solid var(--rule-soft);
}

/* invoervelden mogen niet wegvallen; schuifbalken niet, anders verdwijnt
   de regenboog van de kleurkiezer in de menubalk */
[data-theme="dark"] input:not([type="range"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .chip {
  background: var(--field);
  border-color: var(--rule);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #6b6b70; }

/* de menubalk een tint donkerder dan de pagina, zodat hij zich aftekent */
[data-theme="dark"] .topbar { background: #08080a; border-bottom-color: var(--rule-soft); }

/* de lijn langs de stappen op Over mij */
.band.omgekeerd .rail, [data-theme="dark"] .rail { background: var(--rule-soft); }
.band.omgekeerd .rail i, [data-theme="dark"] .rail i { background: var(--ink); }

/* =========================================================
   De schuivende dienstenrij in een eigen donker vlak
   ========================================================= */

.hwrap.omgekeerd {
  --void: #1d1d1f;
  --ink: #f5f5f7;
  --ink-dim: #a1a1a6;
  --surface-1: #2a2a2e;
  --surface-2: #2a2a2e;
  --rule: rgba(255, 255, 255, 0.14);
  --rule-soft: rgba(255, 255, 255, 0.08);
  --cyan: #2997ff;

  background: var(--void);
  color: var(--ink);
  margin-top: clamp(3rem, 7vw, 6rem);     /* lucht tussen de tekst en het vlak */
}

[data-theme="dark"] .hwrap.omgekeerd {
  --void: #141416;
  --surface-1: #1c1c1f;
  --surface-2: #1c1c1f;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
[data-theme="light"] .hwrap.omgekeerd {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* de kaarten in de rij moeten zich aftekenen tegen dat vlak */
.hwrap.omgekeerd .kaart,
.hwrap.omgekeerd .card {
  background: var(--surface-1);
  border: 1px solid var(--rule-soft);
}

/* wat ruimte binnen het vlak, anders plakken de kaarten tegen de randen */
.hwrap.omgekeerd .hpin { padding-block: clamp(2rem, 5vw, 3.5rem); }

/* en de inleiding erboven krijgt zijn onderruimte terug */
#diensten { padding-bottom: 0 !important; }

/* de kaart met de oproep en de voortgangsbalk in dezelfde rust */
.hcta { background: var(--surface-1); border: 1px solid var(--rule); }
.hbar i { background: var(--ink); }
.hwrap.omgekeerd .hbar { background: var(--rule-soft); }

/* ---------- de hulpzin onder elke vraag ---------- */
.q-sub {
  margin: -0.5rem 0 0.9rem;
  font-size: 0.85rem;
  color: var(--ink-dim);
  max-width: 48ch;
}

/* de tijdsbelofte mag opvallen zonder te schreeuwen */
.vg-duur { font-size: 0.78rem; }
.voortgang { align-items: baseline; }


/* =========================================================
   Het logo en de knoppen in de balk
   ========================================================= */

/* geen gloed meer om het logo en geen pulserende punt */
.wordmark img {
  filter: none;
  height: 24px;
  border-radius: 0;
}
.wordmark {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; gap: 0.5rem;
}
.wordmark em {
  color: var(--cyan);
  text-shadow: none;
  animation: none;
}

/* de huisknop krijgt precies dezelfde vorm als de andere knoppen */
.huisknop, .themebtn, .xrbtn, .kleurknop {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--surface-1);
  color: var(--ink-dim);
  display: inline-grid; place-items: center;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.huisknop svg { width: 16px; height: 16px; }
.themebtn svg { width: 15px; height: 15px; }

.huisknop:hover, .themebtn:hover, .xrbtn:hover {
  color: var(--ink);
  border-color: var(--ink-dim);
  background: var(--surface-2);
  transform: none;
}
/* de actieve stand mag niet donkerder zijn dan de rest van de knoppen */
.huisknop.actief { color: var(--ink-dim); border-color: var(--ink-dim); background: var(--surface-2); }

/* de taalknoppen in dezelfde rust */
.langswitch { border-color: var(--rule); font-family: var(--sans); font-size: 0.75rem; }
.langswitch button[aria-pressed="true"] { background: var(--ink); color: var(--void); }

/* de kleurknop houdt zijn ring, maar zonder gloed */
.kleurknop { padding: 3px; }
.kleurknop:hover { box-shadow: none; border-color: var(--ink-dim); }

/* =========================================================
   Beweging met terughoudendheid
   Het zwevende venster uit de hero, doorgetrokken naar de plekken
   waar iets te tonen valt. Alles met transform, dus soepel.
   ========================================================= */

/* het venster in de hero blijft zweven, maar rustiger en rechter */
/* precies zoals hij was: dit is de beweging die de site zijn karakter geeft */
.build {
  transform: perspective(1400px) rotateY(-7deg) rotateX(3deg);
  animation: float 9s ease-in-out infinite;
}

/* het voorbeeldvenster in de configurator komt licht omhoog als je kiest */
.win-wrap { transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.win-wrap.verandert { transform: translateY(-6px) scale(1.006); }

/* kaarten komen één voor één binnen in plaats van allemaal tegelijk */
.cards.stagger .card {
  opacity: 0; transform: translateY(20px);
}
.cards.stagger.in .card {
  opacity: 1; transform: none;
  transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cards.stagger.in .card:nth-child(2) { transition-delay: 90ms; }
.cards.stagger.in .card:nth-child(3) { transition-delay: 180ms; }
.cards.stagger.in .card:nth-child(4) { transition-delay: 270ms; }

/* de stappen schuiven van links binnen, met de nummers iets eerder */
.stapje { opacity: 0; transform: translateX(-14px); }
.stapje.in { opacity: 1; transform: none;
  transition: opacity 650ms cubic-bezier(0.2,0.7,0.2,1), transform 650ms cubic-bezier(0.2,0.7,0.2,1); }
.stapje.in:nth-child(2) { transition-delay: 80ms; }
.stapje.in:nth-child(3) { transition-delay: 160ms; }
.stapje.in:nth-child(4) { transition-delay: 240ms; }

/* een donkere sectie komt binnen alsof er een vel overheen schuift */
.band.omgekeerd { position: relative; overflow: hidden; }
.band.omgekeerd > .inner { position: relative; z-index: 1; }

/* de prijs telt zichtbaar om bij een wijziging */
.prijsbalk .amount { transition: opacity 220ms ease; }
.prijsbalk.wisselt .amount { opacity: 0.35; }

@media (prefers-reduced-motion: reduce) {
  .build { animation: none; }
  .cards.stagger .card, .stapje { opacity: 1; transform: none; }
  .win-wrap, .prijsbalk .amount { transition: none; }
}

/* =========================================================
   Meer van die zwevende panelen
   Dezelfde perspectiefbeweging als in de hero, op de plekken
   waar iets te tonen valt. Nooit twee naast elkaar.
   ========================================================= */

.zweeft {
  transform: perspective(1400px) rotateY(-7deg) rotateX(3deg);
  animation: float 9s ease-in-out infinite;
  transform-style: preserve-3d;
}

/* de andere kant op, zodat het niet als herhaling voelt */
.zweeft.omgekeerd-hoek {
  transform: perspective(1400px) rotateY(7deg) rotateX(3deg);
  animation: floatOm 9s ease-in-out infinite;
}
@keyframes floatOm {
  0%, 100% { transform: perspective(1400px) rotateY(7deg) rotateX(3deg) translateY(0); }
  50%      { transform: perspective(1400px) rotateY(5deg) rotateX(2deg) translateY(-12px); }
}

/* iets langzamer voor grote vlakken, anders wordt het onrustig */
.zweeft.traag { animation-duration: 13s; }

/* het vlak licht mee op waar het "naar voren" staat */
.zweeft { box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.55); }

@media (max-width: 62rem) {
  /* op smalle schermen recht voor je: gekantelde panelen vallen dan uit beeld */
  .zweeft, .zweeft.omgekeerd-hoek { transform: none; animation: floatRecht 9s ease-in-out infinite; }
  @keyframes floatRecht {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .zweeft, .zweeft.omgekeerd-hoek { animation: none; transform: none; }
}

/* =========================================================
   Scènes in de stijl van de hero
   Eén zwevend venster per pagina, met een eigen verhaaltje van
   negen seconden dat zichzelf herhaalt. Alles met transform en
   opacity, geen script, geen beeldbestanden.
   ========================================================= */

.scene {
  position: relative;
  transform: perspective(1400px) rotateY(-7deg) rotateX(3deg);
  animation: float 9s ease-in-out infinite;
  max-width: 34rem;
}
.scene.rechts {
  transform: perspective(1400px) rotateY(7deg) rotateX(3deg);
  animation: floatR 9s ease-in-out infinite;
  margin-left: auto;
}
@keyframes floatR {
  0%, 100% { transform: perspective(1400px) rotateY(7deg) rotateX(3deg) translateY(0); }
  50%      { transform: perspective(1400px) rotateY(5deg) rotateX(2deg) translateY(-12px); }
}

.scene .win { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.5); }
.scene .win-body { padding: 1.2rem 1.15rem 1.4rem; display: grid; gap: 0.6rem; }

/* ---------- 1. opknappen: oud wordt nieuw ---------- */

.sc-oud, .sc-nieuw { grid-area: 1 / 1; display: grid; gap: 0.55rem; }
.scene-wissel .win-body { display: grid; }

.sc-oud { animation: oudUit 9s ease-in-out infinite; }
.sc-nieuw { animation: nieuwIn 9s ease-in-out infinite; }
@keyframes oudUit { 0%, 38% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes nieuwIn { 0%, 38% { opacity: 0; } 48%, 92% { opacity: 1; } 100% { opacity: 0; } }

.rij { height: 10px; border-radius: 3px; background: var(--rule); }
.rij.kort { width: 52%; }
.rij.half { width: 74%; }
.sc-oud .rij { background: var(--rule-soft); }
.sc-oud .prop { height: 46px; border-radius: 4px; border: 1px dashed var(--rule); }
.sc-nieuw .kop { height: 22px; width: 62%; border-radius: 5px; background: var(--ink); }
.sc-nieuw .vlak { height: 58px; border-radius: 8px; background: var(--surface-1); border: 1px solid var(--rule-soft); }
.sc-nieuw .knop { height: 30px; width: 44%; border-radius: 999px; background: var(--cyan); }

/* ---------- 2. over mij: een gesprek dat zich vult ---------- */

.sc-bericht {
  border-radius: 12px; padding: 0.6rem 0.8rem; max-width: 78%;
  background: var(--surface-1); border: 1px solid var(--rule-soft);
  opacity: 0; transform: translateY(8px);
}
.sc-bericht .rij { background: var(--rule); }
.sc-bericht.van-mij { margin-left: auto; background: var(--cyan); border-color: transparent; }
.sc-bericht.van-mij .rij { background: rgba(255, 255, 255, 0.75); }
.sc-b1 { animation: berichtIn 9s ease-in-out infinite 0.4s; }
.sc-b2 { animation: berichtIn 9s ease-in-out infinite 1.6s; }
.sc-b3 { animation: berichtIn 9s ease-in-out infinite 2.8s; }
@keyframes berichtIn {
  0% { opacity: 0; transform: translateY(8px); }
  12%, 88% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

/* ---------- 3. contact: een bericht dat verstuurd wordt ---------- */

.sc-veld {
  border: 1px solid var(--rule); border-radius: 10px; padding: 0.7rem 0.8rem;
  display: grid; gap: 0.45rem; min-height: 5.2rem; align-content: start;
}
.sc-typ { height: 10px; border-radius: 3px; background: var(--rule); transform-origin: left; transform: scaleX(0); }
.sc-t1 { animation: grow 9s ease-in-out infinite 0.3s; }
.sc-t2 { animation: grow 9s ease-in-out infinite 0.9s; max-width: 82%; }
.sc-t3 { animation: grow 9s ease-in-out infinite 1.5s; max-width: 48%; }

.sc-verstuur {
  margin-top: 0.7rem; height: 34px; width: 48%; border-radius: 999px;
  background: var(--ink); display: grid; place-items: center;
  animation: knopDruk 9s ease-in-out infinite 2.4s;
}
@keyframes knopDruk {
  0%, 24% { transform: none; }
  28% { transform: scale(0.95); }
  32%, 100% { transform: none; }
}
.sc-vink {
  margin-top: 0.8rem; display: flex; align-items: center; gap: 0.5rem;
  opacity: 0; animation: vinkIn 9s ease-in-out infinite;
}
.sc-vink i {
  width: 20px; height: 20px; border-radius: 50%; background: var(--cyan);
  display: grid; place-items: center; font-style: normal;
  color: #fff; font-size: 0.65rem; font-weight: 700;
}
.sc-vink .rij { width: 8rem; }
@keyframes vinkIn { 0%, 34% { opacity: 0; } 42%, 90% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 62rem) {
  .scene, .scene.rechts { transform: none; margin-inline: auto; animation: floatRecht 9s ease-in-out infinite; }
  @keyframes floatRecht { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
}

@media (prefers-reduced-motion: reduce) {
  .scene, .scene.rechts { animation: none; transform: none; }
  .scene * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .sc-oud { display: none; }
}

/* =========================================================
   Opknappen: de veegscène
   Eén venster, twee lagen. Een lichtlijn veegt van links naar
   rechts en laat achter zich de nieuwe site staan. Daarna terug.
   ========================================================= */

.veeg {
  position: relative; max-width: 38rem; margin-inline: auto;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--surface-2);
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.55);
}

.veeg-laag { display: grid; gap: 0.7rem; padding: 1.6rem 1.5rem 2rem; }
.veeg-nieuw {
  position: absolute; inset: 0;
  background: var(--surface-2);
  clip-path: inset(0 100% 0 0);
  animation: veegOver 7s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes veegOver {
  0%, 8%   { clip-path: inset(0 100% 0 0); }
  42%, 62% { clip-path: inset(0 0 0 0); }
  96%,100% { clip-path: inset(0 100% 0 0); }
}

/* het lichtstreepje dat meeloopt met de veeg */
.veeg::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--cyan);
  box-shadow: 0 0 22px 3px color-mix(in srgb, var(--cyan) 65%, transparent);
  left: 0; animation: veegLijn 7s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes veegLijn {
  0%, 8%   { left: 0%; opacity: 0; }
  10%      { opacity: 1; }
  42%      { left: 100%; opacity: 1; }
  48%,100% { left: 100%; opacity: 0; }
}

/* links: de oude site */
.veeg-oud .balk { height: 12px; border-radius: 3px; background: var(--rule-soft); }
.veeg-oud .balk.k { width: 46%; }
.veeg-oud .balk.m { width: 72%; }
.veeg-oud .doos { height: 74px; border: 1px dashed var(--rule); border-radius: 4px; }
.veeg-oud .knopje { height: 26px; width: 30%; border-radius: 3px; background: var(--rule-soft); }

/* rechts: wat jij ervan maakt */
.veeg-nieuw .kop { height: 26px; width: 58%; border-radius: 6px; background: var(--ink); }
.veeg-nieuw .balk { height: 11px; border-radius: 3px; background: var(--rule); }
.veeg-nieuw .balk.m { width: 76%; }
.veeg-nieuw .beeld { height: 74px; border-radius: 10px; background: var(--surface-1); border: 1px solid var(--rule-soft); }
.veeg-nieuw .knopje { height: 30px; width: 38%; border-radius: 999px; background: var(--cyan); }

/* de twee stempels die met de veeg meekomen */
.veeg-merk {
  position: absolute; top: 0.9rem; font-size: 0.66rem; letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid var(--rule);
  color: var(--ink-dim); background: var(--surface-2);
}
.veeg-merk.links { left: 0.9rem; animation: merkUit 7s ease-in-out infinite; }
.veeg-merk.rechts { right: 0.9rem; color: var(--void); background: var(--cyan); border-color: transparent; animation: merkIn 7s ease-in-out infinite; }
@keyframes merkUit { 0%, 30% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes merkIn  { 0%, 36% { opacity: 0; } 46%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* =========================================================
   Over mij: de keten die inklapt
   Vier schakels van een bureau schuiven binnen, en klappen dan
   samen tot één naam.
   ========================================================= */

.keten {
  position: relative; max-width: 30rem; margin-inline: auto;
  display: grid; gap: 0.55rem; padding: 2.2rem 0 3.6rem;
}
.schakel {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0.95rem; border-radius: 12px;
  border: 1px solid var(--rule); background: var(--surface-1);
  font-size: 0.875rem; color: var(--ink-dim);
  opacity: 0; transform: translateX(-16px);
}
.schakel span.bol {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  background: var(--rule-soft);
}
.s1 { animation: schakelIn 8s ease-in-out infinite 0.2s; }
.s2 { animation: schakelIn 8s ease-in-out infinite 0.55s; }
.s3 { animation: schakelIn 8s ease-in-out infinite 0.9s; }
.s4 { animation: schakelIn 8s ease-in-out infinite 1.25s; }
@keyframes schakelIn {
  0%       { opacity: 0; transform: translateX(-16px); }
  10%, 42% { opacity: 1; transform: none; }
  52%,100% { opacity: 0; transform: translateY(46px) scale(0.92); }
}

.keten-uit {
  position: absolute; left: 0; right: 0; bottom: 1.4rem;
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  padding: 0.95rem 1.2rem; border-radius: 14px;
  background: var(--ink); color: var(--void);
  font-size: 1rem; font-weight: 600;
  opacity: 0; transform: scale(0.94);
  animation: ketenUit 8s cubic-bezier(0.2, 0.8, 0.3, 1) infinite;
}
.keten-uit img { height: 20px; width: auto; }
@keyframes ketenUit {
  0%, 50%  { opacity: 0; transform: scale(0.94); }
  60%, 92% { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
  .veeg-nieuw { clip-path: none; animation: none; }
  .veeg::after, .veeg-merk.links { display: none; }
  .veeg-merk.rechts, .schakel, .keten-uit { opacity: 1; transform: none; animation: none; }
  .keten-uit { position: static; margin-top: 1rem; }
}

/* =========================================================
   De voettekst als donker vak
   ========================================================= */

.footer {
  --void: #1d1d1f;
  --ink: #f5f5f7;
  --ink-dim: #a1a1a6;
  --rule: rgba(255, 255, 255, 0.14);
  --rule-soft: rgba(255, 255, 255, 0.08);

  background: var(--void);
  color: var(--ink-dim);
  border-top: 0;
  margin-top: clamp(3rem, 8vw, 6rem);
  padding: clamp(2rem, 5vw, 3rem) var(--pad);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.6rem 1.6rem;
  font-size: 0.8125rem;
}
.footer a { color: var(--ink-dim); text-decoration: none; }
.footer a:hover { color: var(--ink); }
.footer .spacer { margin-left: auto; }
.footer .wettelijk { color: #75757a; font-size: 0.75rem; }

[data-theme="dark"] .footer { --void: #141416; border-top: 1px solid rgba(255,255,255,0.07); }

@media (max-width: 52rem) {
  .footer { gap: 0.5rem 1.1rem; font-size: 0.78rem; }
  .footer .spacer { margin-left: 0; flex-basis: 100%; }
}

/* ---------- lucht boven de scène op de contactpagina ---------- */

.scene.klein { max-width: 26rem; margin-top: clamp(2.5rem, 6vw, 4rem); }
.scene.klein .win-body { padding: 1rem 1rem 1.2rem; }

/* =========================================================
   De veegscène, beter uitgevoerd
   Een echt venster met adresbalk, twee lagen eronder, en een
   lichtlijn die de nieuwe versie achter zich laat staan.
   ========================================================= */

.veegwin {
  max-width: 42rem; margin-inline: auto;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--rule); background: var(--surface-2);
  box-shadow: 0 60px 100px -60px rgba(0, 0, 0, 0.6);
}
.veegwin .win-bar .url { transition: color 400ms ease; }

.veeg { position: relative; min-height: 20rem; }

.veeg-laag {
  display: grid; gap: 0.75rem; align-content: start;
  padding: 1.7rem 1.6rem 2.2rem;
}
.veeg-oud { position: absolute; inset: 0; }
.veeg-nieuw {
  position: absolute; inset: 0; background: var(--surface-2);
  clip-path: inset(0 100% 0 0);
  animation: veegOver 8s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}
@keyframes veegOver {
  0%, 12%  { clip-path: inset(0 100% 0 0); }
  48%, 74% { clip-path: inset(0 0 0 0); }
  96%,100% { clip-path: inset(0 100% 0 0); }
}

.veeg::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 2px; z-index: 2;
  background: var(--cyan);
  box-shadow: 0 0 26px 4px color-mix(in srgb, var(--cyan) 55%, transparent);
  left: 0; opacity: 0;
  animation: veegLijn 8s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}
@keyframes veegLijn {
  0%, 12%  { left: 0%; opacity: 0; }
  16%      { opacity: 1; }
  48%      { left: 100%; opacity: 1; }
  54%,100% { left: 100%; opacity: 0; }
}

/* links: de verouderde site */
.veeg-oud .balk { height: 12px; border-radius: 3px; background: var(--rule-soft); }
.veeg-oud .balk.k { width: 42%; }
.veeg-oud .balk.m { width: 70%; }
.veeg-oud .doos { height: 88px; border: 1px dashed var(--rule); border-radius: 4px; }
.veeg-oud .knopje { height: 26px; width: 28%; border-radius: 3px; background: var(--rule-soft); }
.veeg-oud .rommel { display: flex; gap: 0.5rem; }
.veeg-oud .rommel span { height: 34px; flex: 1; border: 1px dashed var(--rule); border-radius: 3px; }

/* rechts: wat jij ervan maakt */
.veeg-nieuw .kop { height: 30px; width: 56%; border-radius: 7px; background: var(--ink); }
.veeg-nieuw .balk { height: 11px; border-radius: 3px; background: var(--rule); }
.veeg-nieuw .balk.m { width: 74%; }
.veeg-nieuw .beeld { height: 88px; border-radius: 12px; background: var(--surface-1); border: 1px solid var(--rule-soft); }
.veeg-nieuw .kaartjes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.veeg-nieuw .kaartjes span { height: 42px; border-radius: 9px; background: var(--surface-1); border: 1px solid var(--rule-soft); }
.veeg-nieuw .knopje { height: 32px; width: 36%; border-radius: 999px; background: var(--cyan); }

.veeg-merk {
  position: absolute; top: 0.9rem; z-index: 3;
  font-size: 0.66rem; letter-spacing: 0.03em;
  padding: 0.22rem 0.6rem; border-radius: 999px;
}
.veeg-merk.links { left: 1rem; border: 1px solid var(--rule); color: var(--ink-dim); background: var(--surface-2); animation: merkUit 8s ease-in-out infinite; }
.veeg-merk.rechts { right: 1rem; background: var(--cyan); color: #fff; animation: merkIn 8s ease-in-out infinite; }
@keyframes merkUit { 0%, 34% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes merkIn  { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 40rem) { .veeg { min-height: 16rem; } .veeg-laag { padding: 1.2rem 1.1rem 1.6rem; } }

@media (prefers-reduced-motion: reduce) {
  .veeg-nieuw { clip-path: none; animation: none; }
  .veeg::after, .veeg-merk.links { display: none; }
  .veeg-merk.rechts { opacity: 1; animation: none; }
}

/* =========================================================
   Over mij: de keten die inklapt, beter uitgevoerd
   Vier schakels met een lijn ertussen, die na een paar tellen
   samenvallen tot één naam.
   ========================================================= */

.ketenwrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 62rem) { .ketenwrap { grid-template-columns: 1fr; } }

.keten {
  position: relative; display: grid; gap: 0.5rem;
  padding: 0 0 5.5rem;
}

/* de verbindende lijn achter de schakels */
.keten::before {
  content: ""; position: absolute; left: 1.55rem; top: 1.4rem; bottom: 6.6rem; width: 1px;
  background: var(--rule);
  animation: lijnUit 8s ease-in-out infinite;
}
@keyframes lijnUit { 0%, 44% { opacity: 1; } 54%, 100% { opacity: 0; } }

.schakel {
  position: relative; display: flex; align-items: center; gap: 0.8rem;
  padding: 0.75rem 1rem; border-radius: 12px;
  border: 1px solid var(--rule); background: var(--surface-1);
  font-size: 0.875rem; color: var(--ink-dim);
  opacity: 0; transform: translateX(-18px);
}
.schakel .bol {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: var(--surface-2); border: 1px solid var(--rule);
}
.schakel .wacht {
  margin-left: auto; font-size: 0.7rem; color: var(--ink-dim); opacity: 0.7;
}

.s1 { animation: schakelIn 8s cubic-bezier(0.2,0.7,0.2,1) infinite 0.15s; }
.s2 { animation: schakelIn 8s cubic-bezier(0.2,0.7,0.2,1) infinite 0.5s; }
.s3 { animation: schakelIn 8s cubic-bezier(0.2,0.7,0.2,1) infinite 0.85s; }
.s4 { animation: schakelIn 8s cubic-bezier(0.2,0.7,0.2,1) infinite 1.2s; }
@keyframes schakelIn {
  0%       { opacity: 0; transform: translateX(-18px); }
  9%, 42%  { opacity: 1; transform: none; }
  54%,100% { opacity: 0; transform: translateY(58px) scale(0.9); }
}

.keten-uit {
  position: absolute; left: 0; right: 0; bottom: 0.6rem;
  display: flex; align-items: center; justify-content: center; gap: 0.8rem;
  padding: 1.05rem 1.3rem; border-radius: 14px;
  background: var(--ink); color: var(--void);
  font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em;
  opacity: 0; transform: scale(0.94) translateY(10px);
  animation: ketenUit 8s cubic-bezier(0.2, 0.8, 0.3, 1) infinite;
}
.keten-uit img { height: 22px; width: auto; }
.keten-uit .mini { font-size: 0.78rem; font-weight: 400; opacity: 0.7; }
@keyframes ketenUit {
  0%, 52%  { opacity: 0; transform: scale(0.94) translateY(10px); }
  62%, 92% { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: scale(0.94) translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .keten::before, .schakel { animation: none; opacity: 1; transform: none; }
  .keten-uit { animation: none; opacity: 1; transform: none; position: static; margin-top: 1rem; }
}

/* ---------- de veegscène: rijker en ruimer ---------- */

.veegwin { max-width: 46rem; }
.veeg { min-height: 24rem; }
.veeg-laag { padding: 1.4rem 1.5rem 2rem; gap: 0.8rem; }

/* de rommelige menubalk van de oude site */
.oud-nav { display: flex; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.oud-nav span {
  height: 14px; border-radius: 2px; background: var(--rule-soft);
}
.oud-nav span:nth-child(1) { width: 3.4rem; }
.oud-nav span:nth-child(2) { width: 2.6rem; }
.oud-nav span:nth-child(3) { width: 4.1rem; }
.oud-nav span:nth-child(4) { width: 2.2rem; }
.oud-nav span:nth-child(5) { width: 3rem; }

/* de nette menubalk van de nieuwe */
.nieuw-nav { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; }
.nieuw-nav i { width: 22px; height: 22px; border-radius: 6px; background: var(--ink); flex: 0 0 auto; }
.nieuw-nav span { height: 9px; width: 2.6rem; border-radius: 999px; background: var(--rule); }
.nieuw-nav em { margin-left: auto; height: 24px; width: 4.6rem; border-radius: 999px; background: var(--cyan); }

/* de oude kant oogt vaal, de nieuwe fris */
.veeg-oud { filter: saturate(0.4); }

/* een zachte schaduw onder de veeglijn, alsof het vel eroverheen schuift */
.veeg-nieuw { box-shadow: -18px 0 40px -20px rgba(0, 0, 0, 0.55); }

/* ---------- contact: typen, versturen, en er komt antwoord ---------- */

.scene.klein .win { position: relative; overflow: hidden; }

.sc-label { height: 8px; width: 4.5rem; border-radius: 999px; background: var(--rule); opacity: 0.6; }
.sc-veld { min-height: 6rem; }

.sc-verstuur {
  display: grid; place-items: center; color: var(--void);
  animation: knopDruk 9s ease-in-out infinite 2.4s;
}
.sc-pijl { font-size: 1rem; line-height: 1; }

/* de melding die van boven binnenschuift zodra het bericht weg is */
.sc-melding {
  position: absolute; left: 0.6rem; right: 0.6rem; top: 2.9rem;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.65rem 0.75rem; border-radius: 12px;
  background: var(--surface-1); border: 1px solid var(--rule);
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.5);
  opacity: 0; transform: translateY(-16px) scale(0.97);
  animation: meldingIn 9s cubic-bezier(0.2, 0.8, 0.3, 1) infinite;
}
.sc-logo {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px;
  background: var(--ink); display: grid; place-items: center;
}
.sc-logo img { height: 17px; width: auto; }
.sc-mtekst { display: block; flex: 1; }
.sc-mtekst .rij { display: block; height: 8px; border-radius: 999px; background: var(--rule); }

@keyframes meldingIn {
  0%, 38%  { opacity: 0; transform: translateY(-16px) scale(0.97); }
  46%, 88% { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: translateY(-16px) scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
  .sc-melding { opacity: 1; transform: none; animation: none; }
}

/* ---------- de keten: duidelijker, met de dagen erbij ---------- */

.keten { padding-bottom: 7.5rem; }
.schakel .wacht { font-size: 0.72rem; color: var(--ink-dim); opacity: 0.75; }

.keten-som {
  margin-top: 0.3rem; padding-left: 0.2rem;
  font-size: 0.8rem; color: var(--ink-dim);
  opacity: 0; animation: somIn 8s ease-in-out infinite;
}
@keyframes somIn {
  0%, 24%  { opacity: 0; }
  32%, 44% { opacity: 1; }
  52%,100% { opacity: 0; }
}

.keten-uit {
  bottom: 0.4rem;
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.6);
}

/* de sectie eromheen krijgt lucht van boven */
.ketenwrap { padding-top: clamp(1rem, 3vw, 2.5rem); }

/* =========================================================
   Werk: de sites die je hebt gemaakt
   ========================================================= */

/* twee kaarten naast elkaar pas als elk 32rem krijgt, anders komen
   beeld en tekst binnen de kaart te smal te staan; min(…, 100%) houdt
   de kaart binnen de rij op een smalle telefoon */
.werkrij {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(32rem, 100%), 1fr));
  gap: 1.25rem; margin-top: 2.5rem;
}

.werkkaart {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--rule-soft); border-radius: 18px; overflow: hidden;
  background: var(--surface-1); text-decoration: none; color: var(--ink);
  transition: border-color 260ms ease, transform 260ms cubic-bezier(0.2,0.7,0.2,1);
}
.werkkaart:hover { border-color: var(--ink-dim); transform: translateY(-3px); }
@media (max-width: 40rem) { .werkkaart { grid-template-columns: 1fr; } }

/* het miniatuur, in de kleuren van die site zelf */
.wk-beeld {
  display: block; padding: 1.1rem; background: #f0e7d8;
  border-right: 1px solid var(--rule-soft);
}
@media (max-width: 40rem) { .wk-beeld { border-right: 0; border-bottom: 1px solid var(--rule-soft); } }
.wk-beeld.mischa { background: #f3efe6; }
.wk-beeld img { display: block; width: 100%; border-radius: 6px; }

.wk-bar { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.7rem; }
.wk-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(60,40,20,0.2); }
.wk-bar em {
  margin-left: 0.5rem; font-style: normal; font-size: 0.62rem;
  color: #7a6a52; letter-spacing: 0.02em;
}
/* de tekst ernaast */
.wk-tekst { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.4rem 1.5rem; }
.wk-tekst strong { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; }
.wk-wat { font-size: 0.8rem; color: var(--ink-dim); }
.wk-uitleg { font-size: 0.875rem; color: var(--ink-dim); line-height: 1.5; margin-top: 0.3rem; }

.wk-merken { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; }
.wk-merken b {
  font-weight: 400; font-size: 0.72rem; color: var(--ink-dim);
  border: 1px solid var(--rule); border-radius: 999px; padding: 0.15rem 0.6rem;
}

/* een zin van de klant zelf, onder de labeltjes */
.wk-citaat {
  display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.9rem;
  padding-left: 0.85rem; border-left: 1px solid var(--rule);
  font-size: 0.875rem; font-style: italic; line-height: 1.5; color: var(--ink);
}
.wk-citaat small { font-style: normal; font-size: 0.72rem; color: var(--ink-dim); }

.wk-link { margin-top: auto; padding-top: 0.9rem; font-size: 0.875rem; color: var(--cyan); }
.werkkaart:hover .wk-link { text-decoration: underline; text-underline-offset: 3px; }