/* Lettertypes, zelf gehost (geen verzoek naar Google: sneller en zonder gegevens naar derden). Alleen de latin-subset. */
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-semi-condensed-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-semi-condensed-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/barlow-semi-condensed-800.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/ibm-plex-sans.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Slabstraat: een Hollandse woonstraat. Huisstijl uit CLAUDE.md: straatnaambord-blauw, nacht, goud alleen voor De Gouden Sleutel. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(fonts/archivo-latin.woff2) format('woff2'); }

:root {
  --blauw: #0B4F9C;
  --blauw-donker: #08386F;
  --nacht: #14183F;
  --paars: #4A3470;
  --goud: #F2C14E;
  --goud-tekst: #F2C14E;
  --steen: #8E1B1B;
  --grond: #0d1030;
  --wit: #161a44;
  --inkt: #eef0f6;
  --grijs: #a6accb;
  --lijn: #2a3068;
  --blauw-tekst: #7fb2ff;
  --font-kop: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
  --r: 16px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.75, 0, .2, 1);
  /* aliassen voor de openingsanimatie (fx) */
  --amber: var(--goud); --text: #eef0f6; --soft: #c7cbe0; --dim: #9aa0bd; --line-2: rgba(238, 240, 246, .18);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--grond); color: var(--inkt); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font-kop); font-weight: 800; line-height: 1.05; letter-spacing: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.mono { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--goud); outline-offset: 2px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }
.bod-regel { font-size: .85rem; color: var(--grijs); margin: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 300; background: var(--blauw); color: #fff; padding: 10px 14px; font-weight: 600; border-radius: 8px; }
.skip:focus { left: 8px; }
.wrap { width: min(100% - 48px, 1200px); margin-inline: auto; }

/* ---------- knoppen ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 9px; border: 1px solid transparent; background: transparent; font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s, color .2s, transform .15s; position: relative; }
.knop:active { transform: translateY(1px); }
.knop:disabled { opacity: .5; cursor: not-allowed; }
.knop-blauw { background: var(--blauw); color: #fff; }
.knop-blauw:hover { background: var(--blauw-donker); }
.knop-goud { background: var(--goud); color: var(--nacht); }
.knop-goud:hover { background: #f7cf6e; }
.knop-rand { border-color: var(--lijn); background: var(--wit); color: var(--inkt); }
.knop-rand:hover { border-color: var(--blauw-tekst); color: var(--blauw-tekst); }
.knop-licht { border-color: rgba(255, 255, 255, .5); color: #fff; }
.knop-licht:hover { background: rgba(255, 255, 255, .1); }
.knop-groot { min-height: 52px; padding: 0 24px; font-size: 1rem; }
.link { color: var(--blauw-tekst); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- header ---------- */
.kop { position: sticky; top: 0; z-index: 50; background: rgba(13, 16, 48, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--lijn); }
.kop-in { width: min(100% - 48px, 1200px); margin-inline: auto; height: 72px; display: flex; align-items: center; gap: 28px; }
.logo { display: inline-flex; flex: none; }
.logo img { height: 40px; width: auto; }
.menu { display: flex; gap: 4px; }
.menu a { padding: 10px 12px; border-radius: 8px; text-decoration: none; font-weight: 500; color: var(--grijs); }
.menu a:hover { color: var(--inkt); background: var(--grond); }
.menu a[aria-current="page"] { color: #fff; background: rgba(127, 178, 255, .14); }
.kop-eind { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.saldo-pil { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; align-items: center; padding: 0 14px; border-radius: 9px; border: 1px solid var(--lijn); text-decoration: none; }
.saldo-pil span { color: var(--grijs); font-size: .85rem; }
.saldo-pil b { font-family: var(--font-mono); font-weight: 500; }
.stip { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--steen); color: #fff; font-size: .72rem; display: grid; place-items: center; border: 2px solid var(--grond); font-weight: 700; }
.stip[hidden] { display: none; }
.hamburger { display: none; width: 44px; height: 44px; border: 1px solid var(--lijn); border-radius: 9px; background: var(--wit); cursor: pointer; padding: 12px 11px; flex-direction: column; justify-content: space-between; }
.hamburger i { display: block; height: 2px; background: var(--inkt); border-radius: 1px; }

main#view { flex: 1; outline: none; padding-bottom: 72px; }
.laad { min-height: 60vh; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--grijs); }
.lantaarn { width: 22px; height: 64px; position: relative; }
.lantaarn::before { content: ''; position: absolute; left: 9px; top: 22px; bottom: 0; width: 4px; background: var(--nacht); border-radius: 2px; }
.lantaarn i { position: absolute; left: 1px; top: 0; width: 20px; height: 24px; border-radius: 6px 6px 3px 3px; background: var(--nacht); animation: lamp 1.4s ease-in-out infinite alternate; }
@keyframes lamp { to { background: var(--goud); } }

/* ---------- secties ---------- */
.sectie { padding-top: 64px; }
.sectie-kop { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.sectie-kop h2 { font-size: clamp(1.9rem, 3vw, 2.4rem); }
.sectie-kop p { color: var(--grijs); max-width: 60ch; margin-top: 6px; }
.vlak { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); padding: 24px; min-width: 0; }
.vlak h2 { font-size: 1.5rem; margin-bottom: 12px; }
.vlak h3 { font-size: 1.2rem; }
.pagina-kop { padding-top: 40px; display: grid; gap: 10px; max-width: 70ch; }
.pagina-kop h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); }
.pagina-kop p { color: var(--grijs); font-size: 1.05rem; }
.twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.noot { color: var(--grijs); font-size: .88rem; margin-top: 12px; }
.lijst { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; color: var(--grijs); }
.lijst li::marker { color: var(--blauw-tekst); }
.concept { background: rgba(242, 193, 78, .08); border: 1px solid rgba(242, 193, 78, .3); color: #f3dc9f; border-radius: 12px; padding: 12px 14px; font-size: .92rem; }

/* ---------- hero: de straat bij avond, met de duurste slabs die nu in de huizen liggen ---------- */
.hero { position: relative; overflow: hidden; color: #fff; isolation: isolate; background: var(--nacht); }
.hero-foto { position: absolute; inset: 0; z-index: 0; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.hero-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 12, 38, .92) 0%, rgba(10, 12, 38, .66) 34%, rgba(10, 12, 38, .12) 64%, rgba(10, 12, 38, .2) 100%), linear-gradient(180deg, rgba(10, 12, 38, .5) 0%, transparent 26%, rgba(74, 52, 112, .12) 70%, var(--grond) 100%); }
.voet-skyline svg, .rip-straat svg { width: 100%; height: 100%; display: block; }
.hero-in { position: relative; z-index: 2; width: min(100% - 48px, 1200px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-items: center; padding: 64px 0 88px; }
.hero-tekst-blok { max-width: 560px; }
.boventitel { font-family: var(--font-kop); font-weight: 700; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: #dfe3f5; opacity: .85; }
.hero h1 { font-size: clamp(2.8rem, 5.4vw, 4.5rem); margin: 12px 0 18px; max-width: 12ch; }
.hero-tekst { font-size: 1.12rem; color: #dfe3f5; max-width: 44ch; }
.hero-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.vinkjes { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; color: #dfe3f5; font-size: .95rem; }
.vinkjes li { display: inline-flex; align-items: center; gap: 8px; }
.vinkjes svg { width: 18px; height: 18px; fill: none; stroke: var(--goud); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* de waaier: drie echte slabs, de duurste in het midden */
.waaier { position: relative; height: clamp(440px, 40vw, 560px); }
.w { position: absolute; margin: 0; left: 50%; top: 50%; width: clamp(160px, 15.5vw, 210px); }
.w .slab { box-shadow: 0 40px 60px -30px rgba(0, 0, 0, .8); border-radius: 9px; }
.w2 { width: clamp(200px, 19vw, 262px); z-index: 3; transform: translate(-50%, -58%); }
.w1 { z-index: 2; transform: translate(-128%, -50%) rotate(-8deg); animation: waaierL 1s var(--ease) .15s backwards; }
.w3 { z-index: 2; transform: translate(28%, -50%) rotate(8deg); animation: waaierR 1s var(--ease) .15s backwards; }
@keyframes waaierL { from { transform: translate(-50%, -52%) rotate(0); } }
@keyframes waaierR { from { transform: translate(-50%, -52%) rotate(0); } }
.w2::before { content: ''; position: absolute; inset: -14% -40% 0; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(242, 193, 78, .34), rgba(242, 193, 78, .08) 60%, transparent); }
/* de bag vooraan: tik voor een demo-opening */
.hero-bag { position: absolute; left: -2%; bottom: 13%; z-index: 5; width: clamp(104px, 10vw, 146px); padding: 0; border: 0; background: none; cursor: pointer; transform: rotate(-9deg); transition: transform .35s var(--ease); border-radius: 12px; }
.hero-bag:hover { transform: rotate(-5deg) translateY(-8px); }
.hero-bag .pack-3d { width: 100%; }
.hero-bag-tip { position: absolute; left: 50%; top: 100%; margin-top: 10px; transform: translateX(-50%) rotate(9deg); white-space: nowrap; font-size: .8rem; font-weight: 600; color: #fff; background: rgba(13, 16, 48, .85); border: 1px solid rgba(255, 255, 255, .35); padding: 4px 11px; border-radius: 999px; }
.w figcaption { display: none; }
.w2 figcaption { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: max-content; display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.w-info { display: grid; line-height: 1.2; white-space: nowrap; }
.w-info b { font-family: var(--font-kop); font-weight: 700; font-size: 1.05rem; }
.w-info .mono { color: var(--goud); font-size: 1.05rem; }
.w2 figcaption { flex-wrap: wrap; justify-content: center; }
.w-meestal { flex-basis: 100%; text-align: center; font-size: .82rem; color: #c7cbe0; }
.demo-link { display: none; }
.hero-meer { display: inline; }
.chip.goud-chip { background: var(--goud); color: var(--nacht); }
.chip.goud-chip i { background: var(--nacht); }

/* net getrokken: de laatste echte openingen, direct onder de hero */
.net { border-block: 1px solid var(--lijn); background: #10133a; }
.net-in { display: flex; align-items: center; gap: 20px; padding-block: 12px; }
.net-kop { flex: none; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.net-link { flex: none; font-size: .88rem; }
.net-kop::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--goud); }
.net-rail { display: flex; gap: 10px; overflow-x: auto; list-style: none; margin: 0; padding: 2px; scrollbar-width: none; min-width: 0; }
.net-rail li { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 10px; background: var(--wit); border: 1px solid var(--lijn); }
.net-rail img { width: 32px; height: 45px; object-fit: cover; border-radius: 3px; outline: 2px solid var(--tc); }
.net-rail b { display: block; font-size: .86rem; font-weight: 600; white-space: nowrap; }
.net-rail small { display: block; color: var(--grijs); font-size: .74rem; white-space: nowrap; }
.net-rail .mono { color: var(--tc); font-size: .9rem; }

/* afsluiter met sfeerfoto */
.sfeer-band { position: relative; margin-top: 96px; min-height: 460px; display: grid; align-items: center; overflow: hidden; isolation: isolate; color: #fff; }
.sfeer-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; z-index: -2; filter: brightness(1.25); }
.sfeer-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--grond) 0%, rgba(13, 16, 48, .25) 22%, rgba(13, 16, 48, .25) 72%, var(--grond) 100%), linear-gradient(90deg, rgba(13, 16, 48, .6) 0%, rgba(13, 16, 48, .35) 45%, rgba(13, 16, 48, 0) 75%); }
.sfeer-in { display: grid; gap: 14px; justify-items: start; padding-block: 90px; }
.sfeer-in h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.sfeer-in p { color: #dfe3f5; max-width: 44ch; font-size: 1.1rem; margin-bottom: 8px; }

/* ---------- huiskaarten: de gevel is de kansentabel ---------- */
.huizen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.huis-kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: 20px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.huis-beeld { position: relative; display: block; height: 360px; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--lijn);
  background: linear-gradient(180deg, #1a64b8, var(--blauw) 55%, var(--blauw-donker)); }
.villa .huis-beeld { background: linear-gradient(180deg, #232a6b, var(--nacht) 60%, #0d1030); }
.hb-slab { position: absolute; left: 50%; transition: transform .5s var(--ease); }
.hb-slab .slab { box-shadow: 0 26px 40px -22px rgba(0, 0, 0, .8); border-radius: 9px; }
.hb-top { width: 136px; bottom: 74px; z-index: 2; transform: translateX(-2%) rotate(7deg); }
.hb-achter { width: 112px; bottom: 96px; z-index: 1; transform: translateX(84%) rotate(15deg); }
.huis-beeld .hb-pack { position: absolute; left: 50%; bottom: 20px; width: 196px; z-index: 3; transform: translateX(-90%) rotate(-5deg); transition: transform .5s var(--ease); }
.huis-beeld:hover .hb-top, .huis-beeld:focus-visible .hb-top { transform: translate(-2%, -16px) rotate(5deg); }
.huis-beeld:hover .hb-pack, .huis-beeld:focus-visible .hb-pack { transform: translate(-90%, -6px) rotate(-3deg); }
.huis-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .92rem; color: var(--grijs); }
.huis-top b { color: var(--inkt); font-weight: 600; }
.huis-top .mono { color: var(--goud); }
.huis-info { padding: 18px 22px 20px; display: grid; gap: 10px; align-content: start; }
.huis-titel { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.huis-titel h3 { font-size: 1.9rem; color: var(--blauw-tekst); }
.villa .huis-titel h3 { color: var(--inkt); }
.huis-titel .bedrag { font-family: var(--font-mono); font-size: 1.25rem; }
.huis-sub { color: var(--grijs); font-size: .95rem; margin-top: -4px; }
.odds-duim td { padding-block: 7px; }
.odds-duim .verdieping { gap: 12px; white-space: normal; }
.odds-duim .verdieping > span { display: grid; line-height: 1.2; }
.odds-duim .verdieping small { font-weight: 400; font-size: .8rem; color: var(--grijs); }
.odds-duim .duim { box-sizing: border-box; width: 32px; height: 44px; object-fit: cover; border-radius: 4px; flex: none; border: 2px solid var(--tc); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); }
.odds tr[data-tier="gouden-sleutel"] td { background: rgba(242, 193, 78, .09); }
.odds tr[data-tier="gouden-sleutel"] .kans span { color: var(--goud-tekst); font-weight: 600; }
.huis-voet { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; flex-wrap: wrap; border-top: 1px solid var(--lijn); }
.huis-voet .makelaar { color: var(--grijs); font-size: .92rem; }
.huis-voet .makelaar b { color: var(--inkt); font-family: var(--font-mono); font-weight: 500; }
.uitverkocht { font-size: .85rem; color: #ff8a7a; font-weight: 600; }
.bouwplaats { border: 2px dashed var(--lijn); border-radius: var(--r); padding: 22px; display: grid; gap: 8px; align-content: start; background: var(--wit); }
.bouwplaats h3 { font-size: 1.4rem; }
.bouwplaats p { color: var(--grijs); }

/* etalage: echte slabs onder spotlights */
.etalage { margin-top: 72px; padding: 56px 0 64px; color: #fff; background: linear-gradient(180deg, #171b47, #0f1236); position: relative; }
.etalage-kop { display: grid; gap: 8px; max-width: 62ch; margin-bottom: 26px; }
.etalage-kop h2 { font-size: clamp(2rem, 3.4vw, 2.6rem); }
.etalage-kop p { color: #c7cbe0; }
.etalage-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(160px, 15vw, 200px); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 26px 4px 18px; margin: 0 -4px; scrollbar-width: thin; scrollbar-color: #3a4290 transparent; }
.etalage-item { margin: 0; scroll-snap-align: start; display: grid; gap: 10px; position: relative; }
.etalage-item::before { content: ''; position: absolute; left: -10%; right: -10%; top: -30px; height: 70%; background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(255, 244, 214, .22), transparent 70%); pointer-events: none; }
.etalage-item figcaption { display: grid; gap: 3px; font-size: .86rem; color: #c7cbe0; }
.etalage-item figcaption b { color: #fff; font-family: var(--font-kop); font-size: 1.1rem; font-weight: 700; }
.etalage-item figcaption .chip { justify-self: start; background: color-mix(in srgb, var(--tc) 30%, #10133a); color: #fff; }

.waarde-regel { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.waarde-regel small { color: var(--grijs); font-size: .78rem; }
.etalage-item .waarde-regel b { color: #fff; }
.slab-kaart .waarde-regel { justify-content: flex-start; }

/* odds-tabel */
.tbl { overflow-x: auto; }
.odds { width: 100%; border-collapse: collapse; font-size: .95rem; }
.odds th { text-align: left; font-weight: 600; color: var(--grijs); font-size: .82rem; padding: 10px 8px 8px 0; border-bottom: 1px solid var(--lijn); }
.odds td { padding: 11px 8px 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); vertical-align: middle; }
/* eerste en laatste kolom: ruimte, zodat duimpjes en gekleurde regels niet tegen de rand plakken */
.odds th:first-child, .odds td:first-child { padding-left: 10px; }
.odds th:last-child, .odds td:last-child { padding-right: 10px; }
.odds tr:last-child td { border-bottom: 0; }
.odds .r { text-align: right; padding-right: 0; }
.odds .mono { white-space: nowrap; }
.odds .dim { color: var(--grijs); font-size: .88rem; }
.verdieping { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; white-space: nowrap; }
.verdieping i { width: 10px; height: 10px; border-radius: 2px; background: var(--tc); flex: none; }
.kans-balk { width: 90px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.kans-balk i { display: block; height: 100%; background: var(--tc); border-radius: 3px; min-width: 3px; }

/* zo werkt de straat */
.bordjes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.bordje-stap { display: grid; gap: 10px; align-content: start; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); padding: 20px 22px 22px; }
.stap-beeld { height: 132px; display: flex; align-items: end; justify-content: center; gap: 14px; border-radius: 12px; padding: 16px 16px 0; overflow: hidden; background: linear-gradient(180deg, #1c2152, #0f1236); }
.stap-beeld .p-sheen { animation: none; }
.sb-huizen .pack-3d { width: 66px; margin-bottom: -22px; }
.sb-huizen .pack-3d:first-child { transform: rotate(-6deg); }
.sb-huizen .pack-3d:last-child { transform: rotate(6deg); }
.sb-open .sb-pack { width: 66px; margin-bottom: -40px; transform: rotate(-8deg); }
.sb-open .sb-slab { width: 64px; margin-bottom: 6px; transform: rotate(7deg); }
.sb-keuze { align-items: center; gap: 8px; padding: 16px; }
.sb-keuze span { flex: 1; display: grid; gap: 4px; padding: 12px 6px; border-radius: 10px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #c7cbe0; font-size: .78rem; text-align: center; line-height: 1.2; }
.sb-keuze b { color: #fff; font-family: var(--font-mono); font-weight: 500; font-size: .92rem; }
.bordje-stap h3 { font-size: 1.45rem; display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.stap-nr { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 6px; background: var(--blauw); color: #fff; font-size: 1.05rem; box-shadow: inset 0 0 0 2px var(--blauw), inset 0 0 0 4px #fff; }
.bordje-stap p { color: var(--grijs); }

/* buurtapp */
.buurt { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; align-items: start; }
.buurt-uitleg { display: grid; gap: 10px; }
.buurt-uitleg h2 { font-size: clamp(1.9rem, 3vw, 2.4rem); }
.buurt-uitleg p { color: var(--grijs); }
.buurt-lijst { list-style: none; margin: 0; padding: 0; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; }
.buurt-lijst li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.buurt-lijst li:last-child { border-bottom: 0; }
.buurt-lijst .duim { width: 40px; height: 56px; object-fit: cover; border-radius: 4px; box-shadow: 0 4px 10px -4px rgba(20, 24, 63, .4); }
.buurt-lijst time { font-family: var(--font-mono); color: var(--grijs); font-size: .88rem; margin-right: 6px; }
.buurt-lijst .wie b { font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: color-mix(in srgb, var(--tc) 16%, transparent); color: var(--tc); white-space: nowrap; }
.chip i { width: 8px; height: 8px; border-radius: 2px; background: var(--tc); }
.leeg { padding: 22px 18px; color: var(--grijs); }

/* ---------- huispagina ---------- */
.koopbalk { display: none; }
.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; padding-top: 36px; }
.product-beeld { position: relative; height: 560px; border-radius: 24px; overflow: hidden; isolation: isolate; border: 1px solid var(--lijn); background: linear-gradient(180deg, #1a64b8, var(--blauw) 55%, var(--blauw-donker)); }
.villa .product-beeld { background: linear-gradient(180deg, #232a6b, var(--nacht) 60%, #0d1030); }
.product-beeld .pb-pack { position: absolute; left: 50%; bottom: 44px; width: 280px; z-index: 3; transform: translateX(-84%) rotate(-5deg); }
.pb-slab { position: absolute; left: 50%; }
.pb-slab .slab { box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .85); border-radius: 9px; }
.pb-1 { width: 196px; bottom: 132px; z-index: 2; transform: translateX(-6%) rotate(7deg); }
.pb-2 { width: 164px; bottom: 166px; z-index: 1; transform: translateX(66%) rotate(15deg); }
.product-info { display: grid; gap: 16px; align-content: center; min-width: 0; }
.product-info h1 { font-size: clamp(2.6rem, 4.6vw, 3.8rem); }
.product-tekst { color: var(--grijs); max-width: 52ch; }
.koop-rij { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 6px; }
.koop-rij .bedrag { font-family: var(--font-mono); font-weight: 500; font-size: 2rem; }
.link-knop { justify-self: start; padding: 0; border: 0; background: none; color: var(--blauw-tekst); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.product-feiten { list-style: none; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid var(--lijn); display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--grijs); font-size: .92rem; }
.product-feiten b { color: var(--inkt); font-weight: 600; }

.huis-hoofd { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; padding-top: 40px; }
.huis-hoofd h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); }
.huis-hoofd p { color: var(--grijs); margin-top: 8px; max-width: 60ch; }
.koopblok { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); padding: 16px 18px; display: grid; gap: 10px; justify-items: start; min-width: 260px; }
.koopblok .bedrag { font-family: var(--font-mono); font-size: 1.8rem; }
.feiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.feit { background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; padding: 14px 16px; display: grid; gap: 2px; }
.feit b { font-family: var(--font-mono); font-weight: 500; font-size: 1.25rem; }
.feit span { color: var(--grijs); font-size: .88rem; }
.verdiepingen { display: grid; gap: 22px; }
.verd { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 22px; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--wit); }
.verd-info h3 { margin-bottom: 12px; }
.verd-info dl { margin: 0; display: grid; gap: 8px; }
.verd-info dl div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, .06); padding-bottom: 6px; }
.verd-info dt { color: var(--grijs); font-size: .88rem; }
.verd-info dd { margin: 0; }
.verd-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 18px; overflow-x: auto; padding: 4px 4px 10px; scrollbar-width: thin; scrollbar-color: #3a4290 transparent; min-width: 0; }
.verd-rail .slab-kaart p { display: block; }
.verd-groep h3 { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.verd-groep h3 small { font-family: var(--font-mono); font-size: .85rem; color: var(--grijs); font-weight: 500; }
.slabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.slab-kaart { display: grid; gap: 8px; }
.slab-kaart p { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; }
.slab-kaart p b { font-family: var(--font-mono); font-weight: 500; }
.slab-kaart .st { color: var(--grijs); font-size: .8rem; }

/* ---------- slab (acryl houder met echte kaart, licht zoals het merk) ---------- */
.slab { --inkt: #111827; --grijs: #4B5563; --blauw: #0B4F9C; --blauw-tekst: #0B4F9C; --rc: var(--blauw); --mx: 50%; --my: 20%; --rx: 0deg; --ry: 0deg; position: relative; aspect-ratio: 62 / 106; container-type: inline-size; border-radius: 9px; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .45s var(--ease); }
.slab.tilting { transition: transform .06s linear; }
.slab-in { position: absolute; inset: 0; border-radius: 10px; padding: 5.5cqw 6cqw 6.5cqw; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 4cqw;
  background: linear-gradient(150deg, rgba(255, 255, 255, .96), rgba(232, 237, 245, .9) 45%, rgba(214, 222, 234, .9));
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .14), inset 0 0 0 4px rgba(255, 255, 255, .7), inset 0 1.5px 0 #fff, 0 20px 40px -18px rgba(17, 24, 39, .45), 0 6px 14px -8px rgba(17, 24, 39, .3); }
.s-label { position: relative; border-radius: 3px; background: #fff; color: var(--inkt); padding: 5.5% 6% 5%; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 5%; align-items: center; box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .1); overflow: hidden; }
.s-label::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1.6cqw; background: var(--rc); }
.s-name { font-family: var(--font-kop); font-weight: 800; font-size: 7cqw; line-height: 1.05; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-set { font-weight: 600; font-size: 3.9cqw; line-height: 1.25; color: var(--grijs); margin-top: 1.2cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-var { font-weight: 600; font-size: 3.9cqw; line-height: 1.25; color: var(--grijs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-cert { font-family: var(--font-mono); font-weight: 500; font-size: 3.6cqw; color: #6b7280; margin-top: 2.4%; display: flex; gap: 2.4cqw; align-items: center; }
.s-cert i { flex: 1; height: 2.6cqw; max-width: 18cqw; background: repeating-linear-gradient(90deg, #222 0 1px, transparent 1px 2px, #222 2px 4px, transparent 4px 5px, #222 5px 6px, transparent 6px 8px); }
.s-grade { text-align: center; grid-row: 1 / 5; grid-column: 2; }
.s-grade small { display: block; font-family: var(--font-kop); font-weight: 700; font-size: 3.8cqw; letter-spacing: .04em; color: var(--grijs); white-space: nowrap; }
.s-grade b { display: block; font-family: var(--font-kop); font-weight: 800; font-size: 13cqw; line-height: .95; color: var(--blauw-tekst); }
.s-win { position: relative; border-radius: 4px; overflow: hidden; background: #0b0d1a; box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .2); }
.s-win img { width: 100%; height: 100%; object-fit: cover; }
.s-holo { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: color-dodge; transition: opacity .3s;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 70, 160, .25) 34%, rgba(255, 220, 90, .28) 42%, rgba(80, 255, 200, .25) 50%, rgba(90, 160, 255, .28) 58%, transparent 72%); background-size: 240% 240%; background-position: var(--mx) var(--my); }
.slab.tilting .s-holo { opacity: .65; }
.slab[data-slab] { cursor: zoom-in; }
.slab[data-slab]:focus-visible { outline: 3px solid var(--goud); outline-offset: 4px; }
.s-vb { position: absolute; right: 6%; bottom: 3.5%; z-index: 3; font-size: max(9px, 3.4cqw); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #0d1030; background: rgba(255, 255, 255, .88); padding: .4em .7em; border-radius: 99px; pointer-events: none; }
@container (max-width: 180px) { .s-cert i { display: none; } .s-var { display: none; } }
/* slab met echte foto: het gefotografeerde label en de kaart zelf, in hetzelfde acrylkader */
.slab.is-foto .s-label { display: block; padding: 0; background: none; box-shadow: none; }
.slab.is-foto .s-label::before { display: none; }
.s-labelfoto { display: block; width: 100%; height: auto; border-radius: 2px; }
.slab.is-foto .s-win { background: transparent; box-shadow: none; display: grid; place-items: center; }
.slab.is-foto .s-win img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3.6cqw; box-shadow: 0 0 0 1px rgba(17, 24, 39, .18), 0 2px 6px rgba(17, 24, 39, .25); }
.s-glare { position: absolute; inset: 0; border-radius: 9px; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .3), transparent 40%), linear-gradient(118deg, transparent 38%, rgba(255, 255, 255, .18) 46%, transparent 55%); }

/* merkteken: het straatnaambordje met S (op de achterkant van de slab in de animatie) */
.brand-mark { width: 30px; height: 30px; border-radius: 7px; background: var(--blauw); color: #fff; display: grid; place-items: center; font-family: var(--font-kop); font-weight: 800; font-size: 1.1rem; box-shadow: inset 0 0 0 2px var(--blauw), inset 0 0 0 4px #fff; }
.rb-word { font-family: var(--font-kop); font-weight: 800; font-size: 1.3rem; color: #fff; }

/* ---------- Jouw Adres ---------- */
.adres-kop { display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; gap: 28px; align-items: end; margin-top: 36px; padding: 26px 28px 0; border: 1px solid var(--lijn); border-radius: 20px; background: linear-gradient(180deg, #1b2058, var(--wit) 70%); overflow: hidden; }
.adres-huis svg { display: block; width: 108px; height: auto; }
.adres-wie { padding-bottom: 24px; }
.adres-wie h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); margin-top: 4px; }
.adres-kop .portemonnee { padding-bottom: 24px; }
.schuur-samen { color: var(--grijs); }
.schuur-samen b { color: var(--inkt); }
.straatbord { display: inline-flex; background: var(--blauw); border-radius: 10px; padding: 5px; }
.straatbord span { border: 3px solid #fff; border-radius: 7px; padding: 4px 18px; color: #fff; font-family: var(--font-kop); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; }
.adres-sub { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; color: var(--grijs); }
.niveau { padding: 4px 10px; border-radius: 999px; background: rgba(127, 178, 255, .14); color: var(--blauw-tekst); font-weight: 600; font-size: .85rem; }
.portemonnee { display: grid; gap: 8px; justify-items: end; text-align: right; }
.portemonnee .bedrag { font-family: var(--font-mono); font-size: 2rem; }
.portemonnee small { color: var(--grijs); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 28px; border-bottom: 1px solid var(--lijn); }
.tabs a { padding: 10px 14px; text-decoration: none; color: var(--grijs); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--inkt); }
.tabs a[aria-current="page"] { color: var(--blauw-tekst); border-bottom-color: var(--blauw); }
.tab-body { padding-top: 22px; display: grid; gap: 20px; }
.brievenbus { display: grid; gap: 8px; }
.brievenbus h2 { font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
.brievenbus ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.brievenbus li { display: grid; grid-template-columns: auto 1fr; gap: 12px; font-size: .92rem; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.brievenbus li.nieuw { font-weight: 600; }
.brievenbus time { font-family: var(--font-mono); color: var(--grijs); font-size: .85rem; }
.schuur { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px; }
.schuur-item { display: grid; gap: 8px; align-content: start; }
.schuur-item .acties { display: grid; gap: 8px; }
.schuur-item .acties .knop { white-space: normal; line-height: 1.2; min-height: 42px; font-size: .88rem; padding: 6px 10px; }
.kies { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--grijs); cursor: pointer; }
.kies input, .vink input { width: 18px; height: 18px; accent-color: var(--blauw); }
.bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bulk > span { font-weight: 600; }
.lege-schuur { display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: center; }
.lege-schuur img { transform: rotate(-4deg); }
.lege-schuur h2 { font-size: 1.7rem; margin-bottom: 8px; }
.code-bord { display: inline-flex; background: var(--nacht); border-radius: 10px; padding: 5px; }
.code-bord span { border: 2px solid var(--goud); border-radius: 7px; padding: 6px 16px; color: var(--goud); font-family: var(--font-mono); font-size: 1.4rem; letter-spacing: .06em; }
.rij { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.slot-opties { display: flex; gap: 8px; flex-wrap: wrap; }
.slot-opties label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--lijn); border-radius: 9px; background: var(--wit); cursor: pointer; font-weight: 500; }
.slot-opties input { accent-color: var(--blauw); }
.meter { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--blauw); border-radius: 5px; }

/* formulieren */
.form { display: grid; gap: 12px; }
.form label { font-size: .9rem; color: var(--grijs); font-weight: 500; }
.veld { height: 48px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--lijn); background: var(--wit); color: var(--inkt); font: inherit; width: 100%; min-width: 0; }
.veld:focus { outline: 2px solid var(--blauw-tekst); outline-offset: 1px; border-color: var(--blauw); }
textarea.veld { height: auto; padding: 12px 14px; resize: vertical; }
.vink { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: .92rem; color: var(--inkt); font-weight: 400 !important; line-height: 1.45; }
.vink.mis { outline: 2px solid #ff8a7a; outline-offset: 6px; border-radius: 6px; }
.form > * { min-width: 0; }
.stap-regel { font-family: var(--font-kop); font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--grijs); margin: 0; }
.vink input { margin-top: 2px; flex: none; }
.msg { font-size: .9rem; min-height: 1.3em; color: #ff8a7a; font-weight: 500; }
.msg.ok { color: #5fd3a7; }
.betaal { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.betaal[hidden] { display: none; }
.betaal legend { font-size: .85rem; color: var(--grijs); padding: 0 0 6px; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.radio.tegel { justify-content: center; min-height: 52px; padding: 8px; border: 1px solid var(--lijn); border-radius: 10px; background: rgba(255, 255, 255, .03); font-weight: 600; font-size: .9rem; text-align: center; }
.radio.tegel:has(input:checked) { border-color: var(--goud); background: rgba(242, 193, 78, .08); }
.co-kop { display: flex; align-items: center; gap: 16px; padding-right: 48px; }
.co-kop .co-pack { width: 64px; flex: none; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); }
.co-kop h2 { font-size: 1.6rem; }
.co-prijs { font-size: 1.1rem; }
.co-kop .p-sheen { animation: none; }
.radio input { accent-color: var(--blauw); width: 17px; height: 17px; }
.som { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--lijn); padding-top: 12px; }
.som b { font-family: var(--font-mono); font-weight: 500; font-size: 1.5rem; }
.tabel { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabel th { text-align: left; color: var(--grijs); font-weight: 600; font-size: .82rem; padding: 0 10px 8px 0; border-bottom: 1px solid var(--lijn); }
.tabel td { padding: 12px 10px 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); vertical-align: top; }
.tabel small { color: var(--grijs); }

/* afrekenen (sheet) */
.slabkaart { display: grid; gap: 14px; }
.slabkaart h2 { font-size: 1.5rem; padding-right: 48px; }
.sk-beeld { display: block; width: min(240px, 62%); margin: 4px auto 0; padding: 0; border: 0; background: none; cursor: zoom-in; }
.sk-beeld.groot { width: min(440px, 100%); cursor: zoom-out; }
.sk-noot { text-align: center; margin: 0; }
.sk-feiten { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--lijn); }
.sk-feiten div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--lijn); }
.sk-feiten dt { color: var(--grijs); font-size: .88rem; }
.sk-feiten dd { margin: 0; }
.sk-feiten small { display: block; color: var(--grijs); font-size: .8rem; }
.cert-volgt { color: var(--grijs); }
.sheet { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 16px; }
.sheet[hidden] { display: none; }
.sheet-bg { position: absolute; inset: 0; background: rgba(20, 24, 63, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fadein .2s ease-out both; }
.sheet-panel { position: relative; width: min(100%, 540px); max-height: calc(100dvh - 32px); overflow: auto; border-radius: 18px; background: var(--wit); padding: 24px; box-shadow: 0 30px 80px rgba(20, 24, 63, .35); animation: sheetin .3s var(--ease) both; }
@keyframes sheetin { from { opacity: 0; transform: translateY(14px); } }
@keyframes fadein { from { opacity: 0; } }
.sheet-panel h2 { font-size: 1.6rem; padding-right: 40px; }
.sheet-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--lijn); background: var(--wit); color: var(--grijs); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.toast { border: 1px solid var(--lijn); position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); translate: -50% 16px; z-index: 260; background: var(--nacht); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 500; font-size: .92rem; opacity: 0; pointer-events: none; transition: opacity .25s, translate .3s var(--ease); max-width: calc(100vw - 32px); box-shadow: 0 18px 40px rgba(20, 24, 63, .35); }
.toast.on { opacity: 1; translate: -50% 0; }
.melding { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: rgba(242, 193, 78, .08); border: 1px solid rgba(242, 193, 78, .3); border-radius: 12px; padding: 12px 16px; margin-top: 20px; font-weight: 500; }

/* footer */
.voet { background: var(--nacht); color: #c7cbe0; padding: 40px 0 28px; }
.voet-in { width: min(100% - 48px, 1200px); margin-inline: auto; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: start; }
.voet-merk { display: grid; gap: 10px; }
.voet-merk img { height: 40px; width: auto; }
.voet-links { display: flex; gap: 22px; flex-wrap: wrap; }
.voet-links a { color: #fff; text-decoration: none; }
.voet-links a:hover { text-decoration: underline; }
.klein { font-size: .85rem; color: #9aa0bd; }
.voet-fijn { width: min(100% - 48px, 1200px); margin: 24px auto 0; font-size: .8rem; color: #9aa0bd; max-width: 1200px; }

/* ---------- openingsscherm (donker, met de straat) ---------- */
.rip { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; --rc: var(--goud); overflow: hidden; color: #fff; }
.rip[hidden] { display: none; }
.rip-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 42%, #262a63 0%, var(--nacht) 58%, #0a0c22 100%); animation: fadein .3s ease-out both; }
.rip-flood { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 75%, white) 0%, color-mix(in srgb, var(--rc) 40%, transparent) 16%, transparent 52%); transition: opacity .5s var(--ease); }
.rip-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rip-layer { position: absolute; inset: 0; z-index: 1; }
.rip-layer:empty { pointer-events: none; }
.rip.has-fx .rip-stage { visibility: hidden; }
.rip.has-fx .rip-flood { display: none; }
.rip-straat { position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; z-index: 2; pointer-events: none; opacity: .9; }
.rip-straat svg { width: 100%; height: 100%; }
.rip-straat .huis { fill: #0b0d26; }
.rip-straat .raam { fill: #f6d27a; opacity: .08; transition: opacity .35s ease-out; }
.rip-straat .paal { fill: #0b0d26; }
.rip-straat .lamp { fill: #f6d27a; opacity: .25; transition: opacity .3s; }
.rip-straat.aan .raam { opacity: 1; }
.rip-straat.aan .lamp { opacity: 1; }
.rip-close { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(10, 12, 34, .6); cursor: pointer; display: grid; place-items: center; }
.rip-close svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; }
.rip-stage { position: relative; z-index: 2; width: min(62vw, 300px, 36vh); aspect-ratio: 62 / 106; display: grid; place-items: center; perspective: 1500px; margin-top: 3vh; }
.rip-pack { position: absolute; width: 96%; cursor: pointer; transition: transform .35s var(--ease); }
.rip-pack .pack-3d { width: 100%; }
.rip-pack .p-top { transform-box: fill-box; transform-origin: 100% 100%; transition: transform .6s var(--ease-io), opacity .6s; }
.rip-hit { display: block; border-radius: 12px; cursor: pointer; }
.rip-hint { position: absolute; left: 50%; bottom: -16%; translate: -50% 0; white-space: nowrap; color: #c7cbe0; font-size: .9rem; }
.rip-slab { position: absolute; inset: 0; transform-style: preserve-3d; visibility: hidden; transform: translateY(26%) rotateY(180deg) scale(.7); }
.rip-slab .slab { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: none; }
.rip-back { position: absolute; inset: 0; border-radius: 9px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: rotateY(180deg); background: linear-gradient(160deg, #1d2260, #0d1030); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 26px 50px -18px rgba(0, 0, 0, .85); display: grid; place-content: center; justify-items: center; gap: 12px; }
.rip-back .brand-mark { width: 64px; height: 64px; font-size: 2.4rem; border-radius: 14px; }
.rip[data-s="charge"] .rip-pack { animation: shake 1.1s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes shake { 10%, 90% { transform: translate(-1px, 0) rotate(-1deg); } 20%, 80% { transform: translate(2px, -1px) rotate(1.5deg); } 30%, 50%, 70% { transform: translate(-3px, -2px) rotate(-2.5deg) scale(1.02); } 40%, 60% { transform: translate(3px, -2px) rotate(2.5deg) scale(1.03); } 100% { transform: scale(1.05); } }
.rip[data-s="tear"] .p-top, .rip[data-s="reveal"] .p-top, .rip[data-s="done"] .p-top { transform: translate(40%, -60%) rotate(24deg); opacity: 0; }
.rip[data-s="tear"] .rip-flood { opacity: .5; }
.rip[data-s="reveal"] .rip-pack, .rip[data-s="done"] .rip-pack { transform: translateY(70%) scale(.9); opacity: 0; transition: transform .9s var(--ease-io) .45s, opacity .5s .8s; }
.rip[data-s="reveal"] .rip-slab, .rip[data-s="done"] .rip-slab { visibility: visible; animation: slabout 1.9s var(--ease-io) .2s both; }
@keyframes slabout { 0% { transform: translateY(26%) rotateY(180deg) scale(.7); } 45% { transform: translateY(-7%) rotateY(180deg) scale(.95); } 100% { transform: translateY(0) rotateY(360deg) scale(1); } }
.rip[data-s="reveal"] .rip-flood, .rip[data-s="done"] .rip-flood { opacity: 1; }
.rip.low[data-s="done"] .rip-flood { opacity: .5; }
.rip[data-s="done"] .rip-stage { width: min(56vw, 270px, 30vh); }
.rip[data-s="done"] { overflow-y: auto; }
.rip-ui { position: relative; z-index: 3; width: min(100% - 32px, 900px); padding: 14px 0 calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; justify-items: center; text-align: center; min-height: 150px; }
.rip[data-s="done"] .rip-ui::before { content: ''; position: absolute; inset: -40px -50vw 0; z-index: -1; background: linear-gradient(180deg, transparent, rgba(8, 10, 30, .82) 40px); pointer-events: none; }
.r-regel { color: #dfe3f5; font-size: .95rem; }
.r-demo { color: #f3dc9f; font-size: .9rem; }
.r-acts.gelijk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 560px); }
.rip.is-demo[data-s="done"]::after { display: none; }
.rip.is-demo::after { content: 'DEMO · niets afgerekend'; position: absolute; top: calc(22px + env(safe-area-inset-top, 0px)); left: 50%; translate: -50% 0; z-index: 6; padding: 6px 14px; border-radius: 99px; background: rgba(242, 193, 78, .14); border: 1px solid rgba(242, 193, 78, .55); color: #f6dfa4; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.rip[data-s="done"][data-zoom] .rip-stage { width: min(86vw, 60vh, 440px); }
.rip[data-s="done"][data-zoom] .rip-ui { visibility: hidden; }
.r-rar { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--rc) 20%, transparent); color: color-mix(in srgb, var(--rc) 70%, white); font-weight: 700; font-size: .88rem; border: 1px solid color-mix(in srgb, var(--rc) 50%, transparent); }
.r-name { font-family: var(--font-kop); font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.05; }
.r-sub { color: #c7cbe0; font-size: .95rem; }
.r-sub b { color: #fff; font-family: var(--font-mono); font-weight: 500; }
.r-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.rip-pre, .r-done { display: grid; gap: 6px; }
.keuzes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.keuze { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; text-align: left; padding: 16px; border-radius: 16px; background: rgba(24, 28, 70, .94); border: 1px solid rgba(255, 255, 255, .14); }
.keuze b { font-family: var(--font-kop); font-weight: 800; font-size: 1.25rem; }
.keuze span b { font-family: var(--font-mono); font-weight: 500; font-size: 1rem; color: #fff; }
.keuze .knop:disabled { opacity: .45; }
.keuze span { color: #c7cbe0; font-size: .88rem; line-height: 1.4; }
.keuze .kosten { font-family: var(--font-mono); font-weight: 500; font-size: 1.1rem; color: #fff; }
.keuze .knop { width: 100%; white-space: normal; line-height: 1.2; background: #fff; color: var(--nacht); }
.keuze .knop:hover { background: var(--goud); }
.r-klein { font-size: .88rem; }
.r-klein .link { color: var(--goud); background: none; border: 0; cursor: pointer; padding: 0; font: inherit; }
.r-src { color: #9aa0bd; font-size: .8rem; }

/* pack (de bag in de animatie) */
.pack-3d { position: relative; aspect-ratio: 200 / 320; filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .55)); }
.pack-3d svg { width: 100%; height: 100%; overflow: visible; }
.p-sheen { animation: psheen 5.2s var(--ease-io) infinite; }
@keyframes psheen { 0%, 45% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(420px) skewX(-18deg); } }
.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { translate: 0 -10px; } }

/* ---------- mobiel ---------- */
@media (max-width: 1000px) {
  .buurt { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .wrap, .kop-in, .voet-in, .hero-in { width: min(100% - 32px, 1200px); }
  .kop-in { gap: 10px; height: 64px; }
  .logo img { height: 34px; }
  .hamburger { display: inline-flex; order: 3; }
  .kop-eind { margin-left: auto; }
  #adresBtn { display: none; }
  .saldo-pil span { display: none; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 64px; background: var(--wit); border-bottom: 1px solid var(--lijn); flex-direction: column; padding: 8px 16px 14px; box-shadow: 0 18px 30px rgba(20, 24, 63, .12); }
  .menu.open { display: flex; }
  .menu a { padding: 13px 10px; font-size: 1.05rem; }
  .menu .mob-adres { display: block; }
  .huizen, .twee, .drie, .bordjes { grid-template-columns: 1fr; }
  .feiten { grid-template-columns: 1fr; }
  .huis-hoofd { grid-template-columns: 1fr; }
  .adres-kop { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 20px 18px 0; }
  .adres-huis svg { width: 72px; }
  .adres-kop .portemonnee { grid-column: 1 / -1; padding: 0 0 20px; }
  .portemonnee { justify-items: start; text-align: left; }
  .lege-schuur { grid-template-columns: 1fr; }
  .lege-schuur img { width: 110px; }
  .kans-balk { display: none; }
  .keuzes { grid-template-columns: 1fr; gap: 8px; }
  .rip-ui { gap: 8px; padding-top: 8px; }
  .sheet { padding: 0; align-items: end; }
  .sheet-panel { width: 100%; border-radius: 18px 18px 0 0; max-height: 92dvh; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
}
.menu .mob-adres { display: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* voet: hetzelfde gevelsilhouet */
.voet { position: relative; padding-top: 0; }
.voet-skyline { display: block; width: 100%; height: 110px; margin-bottom: 26px; background: var(--grond); }
.voet-skyline .huis, .voet-skyline .paal { fill: var(--nacht); }
.voet-skyline .raam { fill: #f6d27a; opacity: .16; }
.voet-skyline .raam:nth-of-type(4n+1) { opacity: .8; }
.voet-skyline .lamp { fill: #f6d27a; }
.voet-skyline .balk, .rip-straat .balk { fill: none; stroke: #2c3270; stroke-width: 1.4; stroke-linecap: round; }

@media (max-width: 1000px) {
  .hero-in { grid-template-columns: 1fr; padding: 40px 0 40px; gap: 8px; }
  .waaier { height: clamp(380px, 88vw, 500px); }
  .w { width: clamp(132px, 30vw, 190px); }
  .w2 { width: clamp(168px, 38vw, 236px); }
  .w1 { transform: translate(-118%, -50%) rotate(-8deg); }
  .w3 { transform: translate(18%, -50%) rotate(8deg); }
  .hero-bag { width: 86px; top: 2%; bottom: auto; }
  .hero-bag-tip { left: -2px; transform: rotate(9deg); transform-origin: left top; }
}
@media (max-width: 767px) {
  .hero h1 { font-size: 2.7rem; }
  .huizen, .bordjes { grid-template-columns: 1fr; }
  .buurt { grid-template-columns: 1fr; }
  .etalage { margin-top: 56px; }
  .huis-beeld { height: 300px; }
  .hb-top { width: 112px; bottom: 64px; }
  .hb-achter { width: 92px; bottom: 84px; }
  .huis-beeld .hb-pack { width: 156px; bottom: 18px; }
  .net-in { flex-direction: column; align-items: stretch; gap: 10px; }
  .sfeer-band { min-height: 400px; margin-top: 72px; }
  .hero-foto img { object-position: 62% 60%; }
}

@media (max-width: 767px) {
  /* hero: titel, dan meteen de slabs en de tas, daarna de tekst */
  .w1 { display: none; }
  .waaier .hero-bag { width: 104px; left: 50%; top: 50%; bottom: auto; z-index: 2; transform: translate(-134%, -44%) rotate(-8deg); }
  .waaier .hero-bag:hover { transform: translate(-134%, -48%) rotate(-6deg); }
  .odds .bod { display: none; }
  .bod-regel { display: block; font-size: .85rem; color: var(--grijs); margin: 0; }
  .r-acts.gelijk { grid-template-columns: 1fr; }
  .r-acts.gelijk .knop { white-space: normal; }
  .hero-tekst-blok { display: contents; }
  .hero-in { gap: 0; padding: 28px 0 32px; }
  .boventitel { order: 1; font-size: .8rem; }
  .hero h1 { order: 2; font-size: 2.2rem; margin: 8px 0 4px; }
  .waaier { order: 3; height: 330px; margin: 0 0 54px; }
  .hero-tekst { order: 4; font-size: 1rem; }
  .hero-meer { display: none; }
  .hero-knoppen { order: 5; margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero-knoppen .knop { padding: 0 12px; }
  .vinkjes { order: 6; flex-wrap: nowrap; gap: 14px; font-size: .82rem; margin-top: 14px; }
  .vinkjes svg { width: 15px; height: 15px; }
  .demo-link { order: 7; display: inline-block; margin-top: 10px; }
  .w { width: 118px; }
  .w2 { width: 150px; }
  .w1 { transform: translate(-112%, -50%) rotate(-8deg); }
  .w3 { transform: translate(12%, -50%) rotate(8deg); }
  .hero-bag-tip { display: none; }
  .w-meestal { font-size: .76rem; }
  .huis-beeld { height: 220px; }
  .hb-top { width: 92px; bottom: 50px; }
  .hb-achter { width: 76px; bottom: 64px; }
  .huis-beeld .hb-pack { width: 118px; bottom: 14px; }
  .sfeer-band { min-height: 0; margin-top: 48px; }
  .sfeer-in { padding-block: 56px; }
  .verd { grid-template-columns: 1fr; padding: 16px; gap: 14px; }
  .verd-rail { grid-auto-columns: 140px; }
  .koopbalk { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(13, 16, 48, .96); border-top: 1px solid var(--lijn); transform: translateY(110%); transition: transform .3s var(--ease); }
  .koopbalk.aan { transform: none; }
  .kb-naam { display: grid; line-height: 1.2; min-width: 0; }
  .kb-naam b { font-family: var(--font-kop); font-size: 1.05rem; }
  .kb-naam small { color: var(--grijs); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kb-prijs { font-size: .95rem; }
  .betaal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .radio.tegel { font-size: .8rem; padding: 6px 4px; }
  .sk-feiten div { grid-template-columns: 7.5rem minmax(0, 1fr); }
  /* resultaat: grotere slab, drie even hoge keuzes met één regel */
  .rip[data-s="done"] .rip-stage { width: min(52vw, 30vh); margin-top: 1vh; }
  .rip-straat { height: 16vh; }
  .keuzes { grid-auto-rows: 1fr; }
  .keuze { grid-template-columns: minmax(0, 1fr) 8.4rem; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; padding: 10px 12px; min-height: 64px; align-items: center; }
  .keuze > b { grid-column: 1; font-size: 1.02rem; }
  .keuze > span { grid-column: 1; font-size: .8rem; }
  .keuze .knop { grid-column: 2; grid-row: 1 / 3; min-height: 44px; font-size: .85rem; padding: 0 10px; }
  .r-regel { font-size: .85rem; }
  .rip[data-s="done"] .rip-ui { max-height: 64vh; overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 767px) {
  .product { grid-template-columns: 1fr; gap: 24px; padding-top: 20px; }
  .slabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .product-beeld { height: 400px; }
  .product-beeld .pb-pack { width: 200px; bottom: 28px; }
  .pb-1 { width: 138px; bottom: 96px; }
  .pb-2 { width: 116px; bottom: 120px; }
  .huis-info { padding: 16px 16px 18px; }
  .odds-duim td.r { white-space: normal; }
  .odds { font-size: .86rem; }
  .odds-duim .vr { display: none; }
  .odds .bonus-rij .verdieping > span, .bonus-uitleg { white-space: normal; }
  .odds-duim td.r { white-space: nowrap; }
  .odds-duim .verdieping { gap: 10px; }
  .odds td, .odds th { padding-right: 6px; }
  .verdieping { white-space: normal; }
  .odds .mono { white-space: nowrap; }
}

/* ---------- Slabstraat-editie: digitale bonuskaarten ---------- */
.ed-slab { position: relative; container-type: inline-size; aspect-ratio: 600 / 1000; }
.ed-slab img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* de echte echtheidscode van dit exemplaar, precies over de voorbeeldcode op het label */
.ed-code { position: absolute; left: 68.4%; top: 15.35%; width: 21.2%; height: 1.75%; display: flex; align-items: center; justify-content: flex-end; padding-right: .3cqw; background: #fff; color: #14183F; font: 600 2.45cqw/1 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: .04em; }
.ed-holo { position: absolute; inset: 19% 9% 7% 9%; border-radius: 2%; pointer-events: none; mix-blend-mode: color-dodge; opacity: .45;
  background: linear-gradient(115deg, transparent 28%, rgba(255, 120, 220, .38) 40%, rgba(120, 255, 230, .36) 50%, rgba(255, 230, 120, .38) 60%, transparent 72%) 0 0 / 260% 260%; animation: ed-holo 5s linear infinite; }
.ed-slab.ster-3 .ed-holo { opacity: .65; animation-duration: 3.4s; }
@keyframes ed-holo { from { background-position: 120% 0; } to { background-position: -60% 0; } }
.ed-slab.silhouet img { filter: brightness(0) saturate(0); opacity: .32; }
.ster-chip { background: rgba(242, 193, 78, .14); color: var(--goud); letter-spacing: .06em; }
/* in de kansentabel: de bonus als aparte regel */
.odds .bonus-rij td { background: rgba(127, 178, 255, .06); border-top: 1px dashed var(--lijn); }
.odds .bonus-rij .verdieping i { background: conic-gradient(#ff7ad9, #ffe27a, #6ff5e4, #8f7dff, #ff7ad9); }
.bonus-uitleg { color: var(--grijs); font-size: .82rem; white-space: nowrap; }
.odds .bonus-rij .verdieping > span { display: grid; line-height: 1.2; white-space: nowrap; }
.odds .bonus-rij .verdieping small { font-weight: 400; font-size: .8rem; color: var(--grijs); }
.odds-duim .ed-duim { width: 32px; height: 44px; object-fit: contain; border: 0; box-shadow: none; border-radius: 2px; }
.odds .bonus-rij .kans span { color: var(--blauw-tekst); }
/* Buurtapp en strook */
.bonus-rij-buurt { background: linear-gradient(90deg, rgba(242, 193, 78, .09), transparent 60%); }
.buurt-lijst .bonus-rij-buurt .duim { height: 67px; object-fit: contain; box-shadow: none; border-radius: 0; }
.noot-inline { color: var(--grijs); font-size: .82rem; }
.net-rail .net-bonus img { width: 28px; height: 47px; object-fit: contain; outline: none; }
.net-rail .net-bonus b { color: var(--goud); }
/* Jouw Adres: de collectie */
.collectie-kop { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: end; }
.collectie-kop h2 { font-size: 1.5rem; }
.collectie-kop > div:first-child { max-width: 62ch; }
.collectie-teller { min-width: 220px; display: grid; gap: 6px; }
.collectie-teller b { font-size: 1.6rem; }
.collectie-teller small { color: var(--grijs); }
.collectie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px; }
.col-kaart { margin: 0; display: grid; gap: 10px; align-content: start; }
.col-kaart figcaption { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.col-kaart figcaption b { font-family: var(--font-kop); font-size: 1.1rem; }
.col-kaart figcaption small { flex-basis: 100%; color: var(--grijs); font-size: .8rem; }
.col-kaart .aantal { font-size: .85rem; padding: 1px 7px; border-radius: 99px; background: rgba(127, 178, 255, .14); color: var(--blauw-tekst); }
.col-kaart .beloning { flex-basis: 100%; color: var(--grijs); font-size: .82rem; line-height: 1.4; margin: 0; }
.col-kaart .codes { flex-basis: 100%; font-size: .78rem; margin: 0; }
.col-kaart.leeg figcaption b { color: var(--grijs); }
.set-beloning { margin-top: 4px; }
.set-beloning h3 { font-size: 1.2rem; }
/* het bonusmoment in de opening */
.bonus-moment { position: absolute; inset: 0; z-index: 4; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 440px); justify-content: center; align-items: center; gap: 44px; padding: 72px 24px calc(28px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(8, 10, 30, .5), rgba(8, 10, 30, .86)); overflow-y: auto; }
.rip.bonus-aan .rip-layer, .rip.bonus-aan .rip-ui { visibility: hidden; }
.bm-scene { --bm-c: #dfe3f5; position: relative; display: grid; place-items: center; }
.bm-scene.ster-2 { --bm-c: #5aa2ff; }
.bm-scene.ster-3 { --bm-c: #F2C14E; }
.bm-stralen { position: absolute; left: 50%; top: 50%; width: 240%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: 0; pointer-events: none; will-change: opacity, transform;
  background: repeating-conic-gradient(from 0deg, transparent 0deg 7deg, color-mix(in srgb, var(--bm-c) 50%, transparent) 9deg, transparent 12deg 20deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent 100%); mask-image: radial-gradient(closest-side, #000 15%, transparent 100%); animation: bm-draai 16s linear infinite; }
@keyframes bm-draai { to { rotate: 360deg; } }
.bm-kaart { position: relative; width: 100%; perspective: 1400px; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
.bm-kaart.tril { animation: bm-tril .09s linear infinite; }
@keyframes bm-tril { 25% { translate: -2px 1px; } 50% { translate: 2px -1px; } 75% { translate: -1px -1px; } }
.bm-flip { position: relative; transform-style: preserve-3d; }
.bm-voor { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bm-achter { position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 5%; display: grid; place-content: center; justify-items: center; gap: 8px; color: #fff; background: linear-gradient(160deg, #232a6b, #0d1030); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .75), inset 0 0 0 7px rgba(17, 24, 39, .3); }
.bm-s { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; background: #F2C14E; color: #14183F; font-family: var(--font-kop); font-weight: 800; font-size: 2.4rem; }
.bm-achter b { font-family: var(--font-kop); font-size: 1.5rem; }
.bm-achter small { color: #c7cbe0; }
.bm-flits { position: fixed; inset: 0; border-radius: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen; background: color-mix(in srgb, var(--bm-c) 65%, white); }
.bm-tekst { display: grid; gap: 12px; justify-items: start; text-align: left; opacity: 0; transform: translateY(10px); transition: opacity .45s ease-out, transform .45s ease-out; }
.bonus-moment.klaar .bm-tekst { opacity: 1; transform: none; }
.bm-voor { color: #c7cbe0; font-size: .92rem; }
.bm-chip { background: rgba(242, 193, 78, .16); color: #f6dfa4; }
.bm-beloning { color: #dfe3f5; font-size: .95rem; max-width: 46ch; }
.bm-beloning small { color: #9aa0bd; }
.bonus-moment .r-acts.gelijk { width: 100%; }
/* echtheid controleren */
.echt-form { max-width: 560px; }
.echt-kaart { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 22px; }
.echt-info { display: grid; gap: 10px; }
.echt-info h2 { font-size: 2rem; }
.echt-ok { color: #5fd3a7; font-weight: 600; }
@media (max-width: 767px) {
  .bonus-moment { grid-template-columns: 1fr; gap: 16px; padding-top: 64px; justify-items: center; }
  .bm-kaart { width: min(52vw, 220px); }
  .bm-tekst { justify-items: center; text-align: center; }
  .echt-kaart { grid-template-columns: 1fr; }
  .echt-beeld { width: min(60vw, 240px); }
  .collectie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
/* collectie en homepage: kaarten die je nog niet hebt */
.ed-leeg { position: relative; }
.ed-leeg .ed-slab.silhouet img { filter: grayscale(1) brightness(.3) blur(2px); opacity: 1; }
.ed-vraag { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-kop); font-weight: 800; font-size: 3.2rem; color: rgba(255, 255, 255, .6); }
.ed-leeg.ster-3 .ed-vraag { color: rgba(242, 193, 78, .85); }
/* homepage: de editie als verzamelhaak */
.editie-strook { padding: 64px 0 56px; border-top: 1px solid var(--lijn); }
.editie-kop { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.editie-kop h2 { font-size: clamp(2rem, 3.4vw, 2.6rem); }
.editie-kop p { color: var(--grijs); max-width: 62ch; margin-top: 8px; }
.editie-set { max-width: 38ch; color: var(--grijs); font-size: .9rem; border-left: 2px solid var(--goud); padding-left: 14px; }
.editie-set b { color: var(--goud); }
.editie-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(118px, 11vw, 150px); gap: 18px; overflow-x: auto; padding: 4px 4px 12px; scrollbar-width: thin; scrollbar-color: #3a4290 transparent; }
.ed-item { margin: 0; display: grid; gap: 8px; }
.ed-item figcaption { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.ed-item figcaption b { font-family: var(--font-kop); font-size: 1rem; }
.ed-item figcaption small { flex-basis: 100%; color: var(--grijs); font-size: .78rem; }
.verzamelaars { margin-top: 24px; max-width: 420px; }
.verzamelaars h3 { font-size: 1.15rem; margin-bottom: 8px; }
.verzamelaars ol { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; }
.verzamelaars li { padding-left: 4px; }
.verzamelaars li span:first-child { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.verzamelaars li .mono { float: right; color: var(--goud); }
/* statusbeloningen */
.titel-chip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; font-size: .72rem; font-weight: 600; background: rgba(242, 193, 78, .14); color: #f6dfa4; vertical-align: middle; }
.bewoner-licht { background: rgba(246, 210, 122, .2); color: #ffe6a3; padding: 0 4px; border-radius: 4px; }
.kikker { position: absolute; z-index: 6; left: -60px; bottom: 17vh; width: 46px; pointer-events: none; animation: kikker 5.5s ease-in-out .8s 1 forwards; }
@keyframes kikker { 0% { transform: translate(0, 0); } 10% { transform: translate(14vw, -60px); } 20% { transform: translate(24vw, 0); } 30% { transform: translate(38vw, -70px); } 40% { transform: translate(48vw, 0); } 55% { transform: translate(62vw, -60px); } 65% { transform: translate(72vw, 0); } 80% { transform: translate(88vw, -60px); } 100% { transform: translate(110vw, 0); } }
@media (prefers-reduced-motion: reduce) { .ed-holo, .bm-kaart, .bm-stralen, .kikker { animation: none; } .kikker { display: none; } .bm-tekst { opacity: 1; transform: none; } }
@media (max-width: 767px) {
  /* bonusregel mag op mobiel afbreken, anders duwt hij de kansentabel te breed */
  .odds .bonus-rij .verdieping > span, .odds .bonus-uitleg { white-space: normal; }
  .odds .bonus-rij .verdieping small { font-size: .74rem; }
  .odds th:first-child, .odds td:first-child { padding-left: 6px; }
  .odds th:last-child, .odds td:last-child { padding-right: 4px; }
}
/* tablet: het menu klapt in, saldo en Jouw Adres blijven staan */
@media (min-width: 768px) and (max-width: 1000px) {
  .kop-in { gap: 14px; }
  .hamburger { display: inline-flex; order: 3; }
  .kop-eind { margin-left: auto; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 72px; background: var(--wit); border-bottom: 1px solid var(--lijn); flex-direction: column; padding: 8px 24px 14px; box-shadow: 0 18px 30px rgba(0, 0, 0, .35); }
  .menu.open { display: flex; }
  .menu a { padding: 13px 10px; font-size: 1.05rem; }
}

/* ---------- QA-ronde 21 okt: uitlijning en afkappen op alle schermen ---------- */
.nw { white-space: nowrap; }
.tbl { container-type: inline-size; scrollbar-width: thin; scrollbar-color: #3a4290 transparent; }
.kt-smal { display: none; }
.odds th.vr, .odds td.vr { padding-left: 18px; }
/* kansentabel in een smalle kaart: per verdieping de naam links, kans en waarde rechts onder elkaar */
@container (max-width: 470px) {
  .odds.kt, .odds.kt thead, .odds.kt tbody { display: block; }
  .odds.kt tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 1px; align-items: center; padding: 9px 6px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
  .odds.kt thead tr { padding-block: 0 8px; border-bottom-color: var(--lijn); }
  .odds.kt tbody tr:last-child { border-bottom: 0; }
  .odds.kt th, .odds.kt td { display: block; padding: 0 !important; border: 0; background: none !important; }
  .odds.kt .balk, .odds.kt .bod, .odds.kt th.kans, .odds.kt th.vr, .odds.kt .bonus-rij td.vr { display: none; }
  .odds.kt .kt-breed { display: none; }
  .odds.kt .kt-smal { display: inline; }
  .odds.kt th.kt-w { grid-column: 2; text-align: right; }
  .odds.kt td:first-child { grid-column: 1; grid-row: 1 / span 2; }
  .odds.kt td.kans { grid-column: 2; grid-row: 1; text-align: right; }
  .odds.kt td.kt-w { grid-column: 2; grid-row: 2; text-align: right; font-size: .8rem; white-space: nowrap; }
  .odds.kt td.vr { display: block; grid-column: 2; grid-row: 3; text-align: right; font-size: .74rem; color: var(--grijs); }
  .odds.kt td.vr.mono::after { content: " slabs in de catalogus"; font-family: var(--font); }
  .odds.kt tr[data-tier="gouden-sleutel"] { background: rgba(242, 193, 78, .09); border-radius: 8px; }
  .odds.kt tr.bonus-rij { background: rgba(127, 178, 255, .06); border-top: 1px dashed var(--lijn); border-radius: 0 0 8px 8px; }
  .odds.kt .verdieping { white-space: normal; gap: 9px; }
  .odds-duim.kt .duim { width: 28px; height: 39px; }
  .odds-duim.kt .ed-duim { width: 28px; height: 46px; }
}
/* bonus-kanstabel in de Huisregels */
.odds-ster td { vertical-align: top; }
.odds-ster .zz { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* hero: chip, naam en waarde op één lijn */
.w2 figcaption { align-items: center; }
.w-info { display: flex; align-items: baseline; gap: 8px; text-shadow: 0 1px 10px rgba(8, 10, 30, .9); }
@media (max-width: 767px) { .w2 figcaption { max-width: calc(100vw - 32px); gap: 6px 12px; } }

/* huiskaart en productpagina: naam en waarde van de topslab blijven samen */
.ht-slab { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.product-feiten { display: grid; gap: 6px; }

/* rails: zachte rand zolang er nog meer komt, en op tablet/mobiel van rand tot rand met de inhoud op de kantlijn */
.schuift { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); }
@media (max-width: 1000px) {
  .etalage-rail, .editie-rail { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); scroll-padding-inline: calc(50vw - 50%); }
  .schuift { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
}
.etalage-item figcaption b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; line-height: 1.35; }
.waarde-regel { display: grid; gap: 0; justify-items: start; }
.waarde-regel small { white-space: nowrap; }
.verd-rail .slab-kaart > p:first-of-type { min-height: 2.8em; line-height: 1.4; }

/* editie: naam op regel 1, sterren en setnummer op regel 2, overal hetzelfde */
.ed-item figcaption, .col-kaart figcaption { display: grid; gap: 6px; justify-items: start; }
.ed-item figcaption b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ed-naam { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.ed-naam b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ed-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ed-meta small, .ed-item .ed-meta small, .col-kaart .ed-meta small { flex-basis: auto; color: var(--grijs); font-size: .78rem; }
.col-kaart.is-leeg .ed-naam b { color: var(--grijs); }
.collectie { align-items: start; }
@media (min-width: 768px) { .collectie { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.editie-strook { padding-bottom: 8px; }

/* Jouw Adres */
.adres-wie h1 { white-space: nowrap; }
.adres-sub .titel-chip { margin-left: 0; }
@media (max-width: 1000px) {
  .adres-kop { grid-template-columns: 96px minmax(0, 1fr); gap: 20px; }
  .adres-huis svg { width: 96px; }
  .adres-kop .portemonnee { grid-column: 1 / -1; justify-items: start; text-align: left; padding: 16px 0 22px; border-top: 1px solid var(--lijn); }
}
@media (max-width: 767px) { .adres-kop { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; } .adres-huis svg { width: 72px; } }
.tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--lijn); scroll-snap-type: x proximity; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; white-space: nowrap; margin-bottom: 0; scroll-snap-align: start; }
.tab-body .twee { align-items: start; }
.kies { min-height: 44px; }
.schuur-item .acties { grid-auto-rows: 1fr; }
.schuur-item .acties .knop { min-height: 48px; }
.schuur-bron { margin: 0; font-size: .8rem; }
.slot-opties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slot-opties label { min-height: 46px; }
.slot-opties label:has(input:checked) { border-color: var(--blauw-tekst); background: rgba(127, 178, 255, .08); }
.slot-opties input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border-radius: 50%; border: 2px solid #7a81a8; background: transparent; }
.slot-opties input:checked { border-color: var(--blauw-tekst); background: radial-gradient(circle, var(--blauw-tekst) 0 4px, transparent 4.5px); }
.slot-eigen { display: grid; gap: 8px; }
.slot-eigen[hidden] { display: none; }
#buurlink { font-family: var(--font-mono); font-size: .86rem; }
.echt-form .knop, [data-kopieer] { min-height: 48px; }
@media (max-width: 640px) {
  .slot-opties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Verhuizingen en Bestellingen: elke regel een kaartje met label en waarde */
  .tabel-kaart thead { display: none; }
  .tabel-kaart, .tabel-kaart tbody, .tabel-kaart tr { display: block; }
  .tabel-kaart tr { padding: 12px 0; border-bottom: 1px solid var(--lijn); }
  .tabel-kaart tr:first-child { padding-top: 0; }
  .tabel-kaart td { display: block; position: relative; padding: 3px 0 3px 8.4rem; border: 0; }
  .tabel-kaart td::before { content: attr(data-l); position: absolute; left: 0; top: 4px; width: 8rem; color: var(--grijs); font: 400 .82rem/1.5 var(--font); }
}

/* Buurtapp: tijd en bewoner boven, daaronder wat er gebeurde */
.buurt-lijst .wie { display: grid; gap: 2px; }
.buurt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: .85rem; color: var(--grijs); }
.buurt-lijst .buurt-meta time { margin-right: 0; }
.buurt-meta b { color: var(--inkt); }
.buurt-lijst .titel-chip { margin-left: 4px; }
.buurt-lijst .chip { justify-self: end; }
.buurt-pagina { grid-template-columns: minmax(0, 1.55fr) minmax(0, .75fr); }
@media (max-width: 1000px) { .buurt-pagina { grid-template-columns: 1fr; } }

/* zo werkt de straat: beelden heel in beeld, keuzes even hoog */
.stap-beeld { height: 150px; align-items: center; padding: 12px; }
.sb-huizen .pack-3d, .sb-open .sb-pack, .sb-open .sb-slab { margin-bottom: 0; }
.sb-keuze { align-items: stretch; }
.sb-keuze span { align-content: center; }
@media (min-width: 768px) and (max-width: 1000px) {
  .bordjes { grid-template-columns: 1fr; gap: 16px; }
  .bordje-stap { grid-template-columns: 240px minmax(0, 1fr); column-gap: 22px; align-content: start; }
  .bordje-stap .stap-beeld { grid-row: 1 / 3; }
  .product { grid-template-columns: 1fr; gap: 28px; }
  .product-beeld { height: 440px; }
}

/* afsluiter: tekst leesbaar op de foto, geen lege band erna */
.sfeer-band { margin-bottom: -72px; }
@media (max-width: 767px) {
  .sfeer-band::before { background: linear-gradient(180deg, var(--grond) 0%, rgba(13, 16, 48, .55) 16%, rgba(13, 16, 48, .78) 55%, var(--grond) 100%); }
}

/* koopbalk: dicht, met schaduw */
@media (max-width: 767px) {
  .koopbalk { background: #0d1030; box-shadow: 0 -12px 28px rgba(0, 0, 0, .5); }
  .kb-naam small { font-size: .78rem; }
}

/* sheets en 404 */
.sheet-panel h2, .slabkaart h2 { padding-right: 56px; }
.sk-feiten dd { text-wrap: pretty; }
.niet-gevonden { display: grid; justify-items: center; text-align: center; gap: 12px; padding-block: 72px 24px; }
.niet-gevonden img { width: 120px; transform: rotate(-4deg); margin-bottom: 10px; }
.niet-gevonden h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.niet-gevonden .noot { margin: 0 0 6px; }

/* menu op mobiel en tablet: lichte links met scheidingslijnen */
@media (max-width: 1000px) {
  .menu { box-shadow: 0 18px 30px rgba(0, 0, 0, .5); }
  .menu a { color: var(--inkt); border-radius: 0; border-bottom: 1px solid var(--lijn); }
  .menu a:last-child { border-bottom: 0; }
}

/* footer: alles op dezelfde kantlijn */
.voet-links { gap: 10px 22px; }
@media (max-width: 767px) { .voet-fijn { width: min(100% - 32px, 1200px); } }

@media (max-width: 400px) { .kb-naam small { font-size: .7rem; } }

/* Buurtapp op mobiel: verdiepingslabel onder de zin, zodat tijd en bewoner op één regel passen */
.buurt-meta > span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 600px) {
  .buurt-lijst li { grid-template-columns: 40px minmax(0, 1fr); row-gap: 6px; align-items: start; }
  .buurt-lijst li > img { grid-row: 1 / span 2; }
  .buurt-lijst li > .chip { grid-column: 2; justify-self: start; }
}

/* rail- en rasteritems: inhoud bovenaan, zodat namen op één hoogte staan */
.ed-item, .col-kaart, .etalage-item, .slab-kaart { align-content: start; }
.editie-rail { grid-auto-columns: clamp(132px, 11vw, 150px); }
.ed-meta { gap: 6px; }

/* tweede controleronde */
.odds.kt .bonus-rij .verdieping > span { white-space: normal; }
@container (max-width: 470px) { .odds.kt .bonus-rij .verdieping > span { white-space: normal; } }
@media (min-width: 1001px) { .hero-bag-tip { top: auto; bottom: 100%; margin: 0 0 12px; } }
@media (min-width: 768px) and (max-width: 1000px) { .huis-titel h3 { font-size: 1.5rem; } .huis-titel .bedrag { font-size: 1.1rem; } .sb-keuze { gap: 6px; padding: 12px; } }
.sb-keuze b { white-space: nowrap; }
.verzamelaars ol { list-style: none; padding: 0; counter-reset: vz; }
.verzamelaars li { display: flex; align-items: center; gap: 10px; padding-left: 0; counter-increment: vz; }
.verzamelaars li::before { content: counter(vz) "."; flex: none; width: 1.4em; color: var(--grijs); }
.verzamelaars li span:first-child { min-width: 0; }
.verzamelaars li .mono { float: none; margin-left: auto; flex: none; }
@media (min-width: 1001px) { .hero-bag-tip { left: 0; transform: rotate(9deg); transform-origin: left bottom; } }

/* 360-ronde */
.w-meestal { color: #d6d9ea; text-shadow: 0 1px 8px rgba(8, 10, 30, .95); }
.kb-naam b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bedrag, .som b, .koop-rij .bedrag, .portemonnee .bedrag { letter-spacing: -.04em; }
.slot-opties { grid-auto-rows: 1fr; }
.slot-opties label { white-space: nowrap; }
@media (max-width: 400px) { .slot-opties label { font-size: .9rem; padding: 10px 12px; } }
.sb-keuze span { grid-template-rows: 2.5em auto; align-content: center; }
.odds-duim.kt .ed-duim { height: 39px; }
@media (max-width: 767px) { .portemonnee .rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .portemonnee .rij .knop { padding: 0 10px; white-space: normal; line-height: 1.2; } }
@media (max-width: 1000px) { .etalage-rail, .editie-rail { scroll-padding-inline: 24px; } }
@media (max-width: 767px) { .etalage-rail, .editie-rail { scroll-padding-inline: 16px; } }
@media (max-width: 400px) { .kb-naam b { font-size: .92rem; } .koopbalk { gap: 8px; } .koopbalk .knop { padding: 0 12px; } }

/* ===== v2 (overdracht 22 okt): catalogus, De Makelaar voorop, Schuur met editie, de straat ontploft, beheer ===== */

/* echte slab: foto van het exemplaar zelf (vrijstaand), in dezelfde maat als de nagebouwde houder */
.slab.is-echt { display: grid; place-items: center; }
.slab.is-echt .s-echt { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); }
.slab.is-echt .s-glare { inset: 2% 4%; border-radius: 6%; opacity: .5; }
.s-geen { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; padding: 10%; color: #c7cbe0; font: 600 6cqw/1.2 var(--font-kop); }
.s-geen small { font: 500 4.4cqw/1.2 var(--font-mono); color: #9aa0bd; }
.lever { display: inline-block; padding: 1px 7px; border: 1px solid rgba(111, 211, 167, .55); color: #8fe3bd; border-radius: 4px; font-size: .74rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.etalage-item .lever { justify-self: start; }

/* huispagina: alles wat eruit kan komen, als raster */
.verd-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 20px 16px; min-width: 0; }
.verd-raster .slab-kaart { gap: 6px; }
.verd-raster .slab-kaart p { display: block; }
.verd-raster .sk-naam { font-weight: 600; font-size: .88rem; line-height: 1.25; }
.verd-raster .sk-sub { color: var(--grijs); font-size: .76rem; line-height: 1.3; }
.verd-raster .waarde-regel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.verd-bonus { --tc: var(--goud); border-color: rgba(242, 193, 78, .35); }
.eerste-bewoners { margin-top: 16px; color: var(--grijs); font-size: .9rem; }
.eerste-bewoners b { color: var(--goud); }
.td-sub { display: block; color: var(--grijs); font-size: .8rem; }

/* keuzescherm: het bod van De Makelaar als hoofdkeuze, Schuur en Verhuizen als gewone knoppen eronder */
.keuzes-v2 { width: min(100%, 560px); display: grid; gap: 10px; }
.mk-vlak { text-align: left; padding: 18px 20px 20px; border-radius: 12px; background: #1b1d3f; border: 1px solid rgba(242, 193, 78, .55); border-top: 3px solid var(--goud); display: grid; gap: 10px; }
.mk-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mk-tag { font: 800 1.15rem/1 var(--font-kop); color: #fff; }
.mk-aanbevolen { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--goud); }
.mk-bod { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; }
.mk-bod span { grid-column: 1 / -1; color: #c7cbe0; font-size: .9rem; }
.mk-bod b { font-size: clamp(2.2rem, 7vw, 3rem); line-height: 1.05; color: var(--goud); }
.mk-bod small { color: #c7cbe0; font-family: var(--font-mono); font-size: .85rem; }
.mk-uitleg { color: #dfe3f5; font-size: .92rem; }
.mk-vlak .knop { width: 100%; }
.keuze-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.keuze-rij .knop { white-space: normal; line-height: 1.2; min-height: 48px; padding: 6px 12px; }
.keuzes-v2 .r-src { text-align: left; }
.sb-keuze .sb-mk { border-color: rgba(242, 193, 78, .6); }
.sb-keuze .sb-mk b { color: var(--goud); }

/* De Schuur: editie bovenaan, daaronder de PSA-slabs met het bod groot */
.ed-rij { margin-top: 24px; padding: 20px 22px 16px; border: 1px solid rgba(242, 193, 78, .45); border-radius: 12px; background: #17193b; }
.ed-rij-kop { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 6px 14px; margin-bottom: 14px; }
.ed-rij-kop h2 { font-size: 1.4rem; }
.ed-rij-kop .mono { color: var(--goud); }
.ed-rij-kop p { grid-column: 1 / -1; margin: 0; max-width: 70ch; }
.ed-rij .ed-item .beloning, .editie-strook .ed-item .beloning { margin: 0; color: var(--grijs); font-size: .78rem; line-height: 1.35; white-space: normal; }
.ed-rij .ed-item .beloning b, .editie-strook .ed-item .beloning b { display: block; color: #f6dfa4; font: 600 .8rem/1.3 var(--font); white-space: normal; max-width: none; }
.ed-item.is-leeg figcaption b { color: var(--grijs); }
.ed-binnenkort { aspect-ratio: 600 / 1000; border: 1px dashed rgba(255, 255, 255, .22); border-radius: 8px; display: grid; place-items: center; }
.ed-binnenkort span { font: 800 1.6rem/1 var(--font-kop); color: rgba(255, 255, 255, .22); }
.ed-item.binnenkort figcaption b { color: var(--grijs); }
.editie-rail { grid-auto-columns: clamp(124px, 12vw, 156px); }
.beloningen { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, .08); display: grid; gap: 4px; font-size: .9rem; }
.beloningen li::before { content: '\2192  '; color: var(--goud); }
.beloningen small { color: var(--grijs); margin-left: 6px; }
.schuur { margin-top: 18px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.schuur-item .si-naam { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .92rem; }
.schuur-item .si-waarde { font-size: .85rem; color: var(--grijs); }
.schuur-item .si-waarde b { color: var(--inkt); }
.si-bod { display: grid; gap: 4px; padding: 10px 12px 12px; border-top: 2px solid var(--goud); background: #1b1d3f; border-radius: 0 0 8px 8px; }
.si-bod span { font-size: .8rem; color: #c7cbe0; }
.si-bod b { font-size: 1.5rem; color: var(--goud); line-height: 1.1; }
.si-bod .knop { margin-top: 4px; white-space: normal; line-height: 1.2; min-height: 42px; font-size: .9rem; }
.schuur-item > .knop { white-space: normal; line-height: 1.2; min-height: 42px; font-size: .88rem; padding: 6px 10px; }
.si-cert { margin: 0; font-size: .78rem; }
.is-vervang { padding: 12px; border: 1px solid rgba(255, 106, 82, .5); border-radius: 10px; }
.si-melding { color: #ffb4a6; font-size: .88rem; }
.vervang-opties { display: grid; gap: 6px; }
.vervang-opties .knop { white-space: normal; line-height: 1.2; min-height: 40px; font-size: .84rem; padding: 6px 10px; }

/* ---------- de straat ontploft (bonus) ---------- */
.kop-straat { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; opacity: 0; pointer-events: none; transition: opacity .5s; }
.kop-straat svg { width: 100%; height: 100%; }
.kop-straat .huis, .kop-straat .paal { fill: #0b0d26; }
.kop-straat .raam, .feest-straat .raam, .voet-skyline .raam { transition: opacity .3s ease-out, fill .3s; }
.kop-straat .raam, .kop-straat .lamp { fill: #f6d27a; opacity: 0; }
.kop-straat .balk { fill: none; stroke: #2c3270; }
.kop-in { position: relative; }
html.straat-feest .kop { z-index: 320; background: #0b0d26; }
html.straat-feest .kop-straat { opacity: 1; }
html.lichten-aan .kop-straat .raam, html.lichten-aan .kop-straat .lamp, html.lichten-aan .voet-skyline .raam { opacity: 1; }
html.kop-flits .kop { animation: kopFlits 1.2s ease-out; }
@keyframes kopFlits { 0% { box-shadow: 0 0 0 0 rgba(242, 193, 78, 0); } 12% { box-shadow: 0 0 80px 20px rgba(242, 193, 78, .55); background: #5a4512; } 100% { box-shadow: 0 0 0 0 rgba(242, 193, 78, 0); } }
.feest { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; color: #fff; overflow: hidden; }
.feest-veil { position: absolute; inset: 0; background: rgba(6, 7, 22, .9); }
.feest-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.feest-straat { position: absolute; left: 0; right: 0; bottom: 0; height: 24vh; z-index: 1; pointer-events: none; }
.feest-straat svg { width: 100%; height: 100%; display: block; }
.feest-straat .huis, .feest-straat .paal { fill: #10123a; }
.feest-straat .raam, .feest-straat .lamp { fill: #f6d27a; opacity: .06; }
.feest-straat .balk { fill: none; stroke: #2c3270; }
html.lichten-aan .feest-straat .raam, html.lichten-aan .feest-straat .lamp { opacity: 1; }
.feest-in { position: relative; z-index: 4; width: min(100% - 32px, 920px); display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; align-items: center; padding-top: 72px; }
.feest-kaart { --mx: 50%; --my: 40%; --rx: 0deg; --ry: 0deg; perspective: 1000px; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)) drop-shadow(0 0 40px color-mix(in srgb, var(--kc) 45%, transparent)); }
.feest-flip { position: relative; transform-style: preserve-3d; }
.feest-voor { position: relative; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .12s linear; }
.feest-voor, .feest-achter { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.feest-holo { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .55; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .55), transparent 38%), linear-gradient(115deg, transparent 20%, rgba(255, 122, 217, .35) 38%, rgba(111, 245, 228, .35) 50%, rgba(255, 226, 122, .35) 62%, transparent 80%); background-size: 100% 100%, 220% 220%; background-position: center, var(--mx) var(--my); }
.feest-achter { position: absolute; inset: 0; transform: rotateY(180deg); border-radius: 10px; background: #14183F; border: 2px solid #3a4690; display: grid; place-content: center; text-align: center; gap: 4px; }
.feest-achter span { font: 800 4rem/1 var(--font-kop); color: var(--goud); }
.feest-achter b { font: 800 1.4rem/1 var(--font-kop); }
.feest-achter small { color: #9aa0bd; }
.feest-tekst { display: grid; gap: 12px; justify-items: start; }
.feest-voor-tekst { color: #c7cbe0; }
.feest-bonus { font: 800 clamp(2.6rem, 7vw, 4.4rem)/.9 var(--font-kop); color: var(--goud); letter-spacing: .02em; }
.feest-bonus span { font-size: .45em; vertical-align: middle; }
.feest-tekst h2 { font-size: clamp(1.8rem, 4.2vw, 2.6rem); }
.feest-beloning { font-size: 1.05rem; max-width: 46ch; }
.feest-beloning b { color: #f6dfa4; }
.feest-code { color: #9aa0bd; font-size: .88rem; }
.feest-code b { color: #fff; }
.feest.rustig .feest-veil { animation: fade .4s ease-out; }
.feest.rustig .feest-in { animation: fade .5s ease-out; }
@keyframes fade { from { opacity: 0; } }
@media (max-width: 767px) {
  .feest { overflow-y: auto; place-items: start center; }
  .feest-in { grid-template-columns: 1fr; gap: 18px; justify-items: center; text-align: center; padding: 84px 0 calc(24vh + 16px); }
  .feest-kaart { width: min(58vw, 230px); }
  .feest-tekst { justify-items: center; }
  .keuze-rij { grid-template-columns: 1fr; }
  .ed-rij-kop { grid-template-columns: auto 1fr; }
}
.live-balk { position: sticky; top: 0; z-index: 330; display: flex; justify-content: center; align-items: center; gap: 14px; padding: 9px 48px 9px 16px; background: var(--goud); color: var(--nacht); font-weight: 700; text-align: center; }
.live-balk[hidden] { display: none; }
.live-balk button { position: absolute; right: 10px; border: 0; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--nacht); }

/* ---------- beheer ---------- */
.bh-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--lijn); border: 1px solid var(--lijn); margin-top: 20px; }
.bh-cijfers > div { background: var(--grond); padding: 14px 16px; display: grid; gap: 2px; }
.bh-cijfers small, .bh-cijfers span { color: var(--grijs); font-size: .8rem; }
.bh-cijfers b { font-size: 1.5rem; }
.bh-sectie .sectie-kop h2 small { color: var(--grijs); font-size: .9rem; font-weight: 500; margin-left: 8px; }
.bh-sectie { padding-top: 36px; }
.bh-rij { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bh-rij .veld { min-width: 0; width: auto; flex: 1 1 110px; }
.bh-inkoop, .bh-huizen { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.bh-velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 16px; }
.bh-velden label, .bh-inkoop label { display: grid; gap: 4px; font-size: .85rem; color: var(--grijs); }
.bh-uit td { opacity: .55; }
.bh-leeg td { color: #ffb4a6; }
.bh-cat { margin-bottom: 12px; }
.bh-cat summary { cursor: pointer; font-size: 1.05rem; }
.bh-cat summary small { color: var(--grijs); margin-left: 8px; }
.bh-cat .tbl { margin-top: 12px; }
.bh-cat .bh-rij .veld { flex: 0 1 90px; }
.tab-body, .ed-rij { min-width: 0; }
.ed-rij .editie-rail { margin-inline: 0; padding-inline: 4px; }
@media (max-width: 767px) {
  .rip[data-s="done"] .rip-stage { width: min(42vw, 24vh); }
  .rip[data-s="done"] .r-regel { display: none; }
  .rip-ui { gap: 8px; }
  .mk-vlak { padding: 12px 14px 14px; gap: 6px; }
  .mk-bod b { font-size: 2rem; }
  .mk-uitleg { font-size: .84rem; line-height: 1.35; }
  .keuze-rij { grid-template-columns: 1fr 1fr; gap: 8px; }
  .keuze-rij .knop { font-size: .82rem; min-height: 46px; padding: 4px 8px; }
}

/* PSA-controle */
.psa-ok { display: block; color: #8fe3bd; font-size: .82rem; }
.bh-fout { color: #ffb4a6; }
.psa-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 4px 0 2px; }
.psa-fotos a { display: grid; gap: 4px; text-decoration: none; color: var(--grijs); font-size: .78rem; }
.psa-fotos img { width: 100%; aspect-ratio: 3 / 5; object-fit: contain; background: #0b0d26; border: 1px solid var(--lijn); border-radius: 6px; }
.bh-psa-uitslag { display: flex; flex-wrap: wrap; gap: 8px; align-items: start; }
.bh-psa-uitslag p { flex-basis: 100%; margin: 0; font-size: .86rem; }
.bh-psa-foto { width: 110px; border-radius: 6px; border: 1px solid var(--lijn); }


/* =====================================================================================================
   v3 "drop-winkel" (25 okt): het pack is het product. Neutraal donker in plaats van navy, lijnen in plaats van
   kaartjes met schaduw, grote strakke koppen, goud alleen voor de hoofdactie en De Gouden Sleutel.
   ===================================================================================================== */
:root {
  --grond: #0b0c10;
  --wit: #121419;
  --vlak-2: #181b22;
  --lijn: #24272f;
  --lijn-2: #31353f;
  --inkt: #f1f2f4;
  --grijs: #9b9fab;
  --nacht: #0b0c10;
  --blauw-tekst: #8ab8ff;
  --r: 10px;
}
body { background: var(--grond); }
::selection { background: rgba(242, 193, 78, .35); }

/* kop: dun, zwart, één lijn eronder */
.kop { background: rgba(11, 12, 16, .88); border-bottom: 1px solid var(--lijn); }
.kop-in { height: 64px; }
.menu a { border-radius: 6px; color: #b9bdc7; }
.menu a:hover { background: transparent; color: #fff; }
.menu a[aria-current="page"] { background: transparent; color: #fff; box-shadow: inset 0 -2px 0 var(--goud); border-radius: 0; }
.saldo-pil { border-radius: 8px; border-color: var(--lijn-2); }

/* knoppen: strak, kleine radius */
.knop { border-radius: 8px; letter-spacing: .01em; }
.knop-groot { min-height: 52px; padding: 0 22px; }
.knop-goud { background: var(--goud); color: #15120a; }
.knop-goud:hover { background: #ffd56a; }
.knop-lijn { border: 1px solid var(--lijn-2); color: var(--inkt); background: transparent; }
.knop-lijn:hover { border-color: #fff; }
.knop-rand { background: transparent; border-color: var(--lijn-2); border-radius: 8px; }
.knop-blauw { border-radius: 8px; }
.vlak { border-radius: var(--r); box-shadow: none; }
.chip { border-radius: 4px; }

/* koppen van secties */
.w-sectie { padding: 72px 0 0; }
.w-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--lijn); }
.w-kop h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); text-transform: uppercase; letter-spacing: .005em; line-height: .95; }
.w-kop-sub { flex: 1 1 320px; color: var(--grijs); max-width: 62ch; }
.w-meer { color: var(--inkt); font-weight: 600; text-decoration: none; white-space: nowrap; }
.w-meer::after { content: ' →'; color: var(--goud); }
.w-meer:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- hero: het pack als product ---------- */
.w-hero { padding: 40px 0 8px; overflow: hidden; }
.w-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px; align-items: center; min-height: min(78vh, 720px); }
.w-eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--goud); }
.w-hero h1 { margin-top: 18px; font-size: clamp(3rem, 6.6vw, 5.8rem); line-height: .9; text-transform: uppercase; letter-spacing: -.005em; }
.w-lead { margin-top: 22px; font-size: 1.12rem; color: #c9ccd4; max-width: 46ch; }
.w-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.w-feiten { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--lijn); }
.w-feiten li { flex: 1 1 140px; padding: 16px 18px 0 0; color: var(--grijs); font-size: .88rem; line-height: 1.35; }
.w-feiten li + li { padding-left: 18px; border-left: 1px solid var(--lijn); }
.w-feiten b { display: block; color: #fff; font-size: 1.5rem; font-weight: 500; margin-bottom: 4px; }
.w-hero-packs { position: relative; height: min(70vh, 640px); min-height: 460px; }
.w-hero-packs::before { content: ''; position: absolute; left: 8%; right: 8%; bottom: 2%; height: 22%; background: radial-gradient(closest-side, rgba(242, 193, 78, .16), transparent); filter: blur(10px); }
.w-hero-pack { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .45s var(--ease), filter .45s var(--ease); }
.w-hero-pack img { width: 100%; height: auto; filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .6)); }
.w-hero-pack:not(.w-hero-pack-achter) { width: min(46%, 330px); left: 34%; top: 2%; z-index: 2; transform: rotate(4deg); }
.w-hero-pack-achter { width: min(40%, 290px); left: 6%; top: 10%; z-index: 1; transform: rotate(-9deg); filter: brightness(.72); }
.w-hero-pack:hover { transform: rotate(1deg) translateY(-10px) scale(1.02); }
.w-hero-pack-achter:hover { transform: rotate(-6deg) translateY(-8px); filter: brightness(.9); }
.w-hero-pack:focus-visible { outline-offset: 6px; }
.w-hero-hit { position: absolute; right: 0; bottom: 6%; z-index: 3; width: min(28%, 190px); transform: rotate(7deg); }
.w-hero-hit .slab { box-shadow: 0 30px 40px -20px rgba(0, 0, 0, .8); }
.w-hero-hit p { display: grid; gap: 2px; margin-top: 12px; transform: rotate(-7deg); transform-origin: 0 0; font-size: .86rem; }
.w-hero-hit p b { font-family: var(--font-kop); font-size: 1.05rem; }
.w-hero-hit p .mono { color: var(--goud); font-size: 1rem; }
.w-hero-tip { position: absolute; left: 34%; bottom: -2px; margin: 0; font-size: .8rem; color: var(--grijs); }

/* verdieping als klein label: kleurblokje + naam */
.w-tier { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 600; color: #c9ccd4; }
.w-tier i { width: 8px; height: 8px; background: var(--tc); }

/* ---------- rijen met slabs ---------- */
.w-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(150px, 14vw, 182px); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px; scrollbar-width: thin; scrollbar-color: var(--lijn-2) transparent; }
.w-slab { margin: 0; display: grid; gap: 12px; align-content: start; scroll-snap-align: start; }
.w-slab figcaption { display: grid; gap: 3px; font-size: .86rem; }
.w-slab figcaption b { font-family: var(--font-kop); font-size: 1.06rem; font-weight: 700; line-height: 1.15; }
.w-slab-sub, .w-slab-wie { color: var(--grijs); font-size: .8rem; }
.w-slab-waarde { color: #fff; font-size: 1.02rem; }
.w-slab .lever { justify-self: start; }

/* ---------- de packs als productpanelen ---------- */
.w-packs { display: grid; grid-template-columns: 1fr; gap: 0; }
.w-pack { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 48px; padding: 36px 0; align-items: center; }
.w-pack + .w-pack { border-top: 1px solid var(--lijn); }
.w-pack-beeld { position: relative; padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.w-pack-beeld img { width: 100%; height: auto; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .55)); transition: transform .45s var(--ease); }
.w-pack-beeld:hover img { transform: translateY(-6px) rotate(-1.5deg); }
.w-pack-demo { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); white-space: nowrap; font-size: .76rem; color: var(--grijs); }
.w-pack-info { display: grid; gap: 18px; min-width: 0; max-width: 640px; }
.w-pack-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.w-pack-kop h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); text-transform: uppercase; line-height: .95; }
.w-pack-kop h3 a { color: inherit; text-decoration: none; }
.w-pack-kop h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.w-prijs { font-size: 1.5rem; color: #fff; white-space: nowrap; }
.w-pack-sub { color: var(--grijs); font-size: .94rem; }
.w-pack-sub b { color: #fff; }
.w-pack-acties { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; }

/* de kansen: één regel per verdieping, met een balkje */
.w-odds { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.w-odds li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 150px); align-items: center; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--lijn); font-size: .95rem; }
.w-odds-naam { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; min-width: 0; }
.w-odds-naam::before { content: ''; width: 8px; height: 8px; background: var(--tc, var(--goud)); flex: none; }
.w-odds-balk { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--tc); }
.w-odds-kans { text-align: right; color: #fff; }
.w-odds-waarde { text-align: right; color: var(--grijs); font-size: .86rem; }
.w-odds li.is-sleutel .w-odds-naam { color: var(--goud); }
.w-odds-bonus .w-odds-naam { color: #d9c7ff; font-weight: 500; }
.w-odds-bonus .w-odds-naam::before { background: linear-gradient(135deg, #ff7ad9, #ffe27a, #6ff5e4); }

/* ---------- zo werkt het ---------- */
.w-stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.w-stappen li { padding: 4px 28px 0 0; display: grid; gap: 10px; align-content: start; }
.w-stappen li + li { padding-left: 28px; border-left: 1px solid var(--lijn); }
.w-stap-nr { color: var(--goud); font-size: .9rem; letter-spacing: .1em; }
.w-stappen h3 { font-size: 1.5rem; text-transform: uppercase; }
.w-stappen p { color: var(--grijs); }

/* ---------- huispagina ---------- */
.product-beeld { background: none; border: 0; border-radius: 0; overflow: visible; height: 600px; }
.product-beeld::before { content: ''; position: absolute; left: 10%; right: 10%; bottom: 0; height: 20%; background: radial-gradient(closest-side, rgba(242, 193, 78, .14), transparent); filter: blur(10px); }
.pb-packfoto { position: absolute; left: 50%; top: 0; width: min(62%, 340px); height: auto; z-index: 3; transform: translateX(-70%) rotate(-4deg); filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .6)); }
.pb-1 { bottom: 60px; z-index: 2; }
.pb-2 { bottom: 110px; z-index: 1; }
.product-info h1 { text-transform: uppercase; line-height: .92; }
.verd, .vlak.collectie-kop, .ed-rij { border-radius: var(--r); }
.verd { background: transparent; border-width: 1px 0 0; border-radius: 0; padding: 24px 0; }
.verdiepingen { gap: 0; }

/* ---------- editie, voet ---------- */
.editie-strook { border-top: 0; padding-top: 72px; }
.voet { background: #08090c; border-top: 1px solid var(--lijn); }
.voet-skyline { background: var(--grond); }

@media (max-width: 1000px) {
  .w-hero-in { grid-template-columns: 1fr; min-height: 0; }
  .w-hero-packs { height: 470px; min-height: 0; max-width: 560px; width: 100%; margin: 0 auto; }
  .w-packs { grid-template-columns: 1fr; }
  .w-pack, .w-pack + .w-pack { padding: 28px 0; border-left: 0; }
  .w-pack + .w-pack { border-top: 1px solid var(--lijn); }
}
@media (max-width: 767px) {
  .w-hero { padding-top: 24px; }
  .w-hero h1 { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .w-hero-packs { height: 380px; }
  .w-hero-hit { width: 30%; }
  .w-hero-tip { left: 0; }
  .w-feiten li { flex-basis: 30%; }
  .w-feiten li + li { padding-left: 12px; }
  .w-feiten b { font-size: 1.2rem; }
  .w-pack { grid-template-columns: 112px minmax(0, 1fr); gap: 18px; }
  .w-pack-kop { flex-direction: column; gap: 4px; }
  .w-odds li { grid-template-columns: minmax(0, 1fr) 46px minmax(0, 96px); }
  .w-odds-balk { display: none; }
  .w-pack-acties .knop { flex: 1 1 100%; }
  .w-stappen { grid-template-columns: 1fr; gap: 22px; }
  .w-stappen li, .w-stappen li + li { padding: 0; border-left: 0; }
  .w-sectie { padding-top: 56px; }
  .product-beeld { height: 420px; }
}

/* de editie-strook in dezelfde stijl als de andere secties */
.editie-kop { border-bottom: 1px solid var(--lijn); padding-bottom: 16px; margin-bottom: 24px; }
.editie-kop h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); text-transform: uppercase; line-height: .95; }
.editie-kop p { color: var(--grijs); }
.editie-set { border-left-color: var(--goud); }
.ed-item figcaption b { font-family: var(--font-kop); }
.ster-chip { border-radius: 4px; }
@media (max-width: 767px) {
  .w-pack { grid-template-columns: 110px minmax(0, 1fr); gap: 18px; align-items: start; }
  .w-odds li { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 100px); gap: 10px; font-size: .86rem; }
}

/* mobiel: pack en titel naast elkaar, kansen en knoppen over de volle breedte */
@media (max-width: 767px) {
  .w-pack { grid-template-columns: 88px minmax(0, 1fr); gap: 14px 18px; padding: 28px 0; align-items: center; }
  .w-pack-info { display: contents; }
  .w-pack-beeld { grid-column: 1; grid-row: 1; }
  .w-pack-kop { grid-column: 2; grid-row: 1; display: grid; gap: 4px; justify-items: start; }
  .w-pack-sub, .w-pack .w-odds, .w-pack-acties { grid-column: 1 / -1; }
  .w-pack-demo { display: none; }
  .w-odds li { grid-template-columns: minmax(0, 1fr) 44px auto; gap: 10px; padding: 10px 0; }
  .w-odds-naam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .w-odds-waarde { white-space: nowrap; font-size: .82rem; text-align: right; }
  .w-pack-acties { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
  .w-cta { display: grid; gap: 10px; }
  .w-cta .knop { width: 100%; justify-content: center; }
}
@media (max-width: 767px) { .kort-weg { display: none; } }
/* huispagina: het pack vrij op de grond, geen gekleurd vlak erachter */
.product-beeld, .villa .product-beeld, .grachtenpand .product-beeld { background: none; border: 0; }

.sectie-kop h2 { text-transform: uppercase; letter-spacing: 0; }
@media (max-width: 767px) {
  .w-odds-naam .kort-weg { display: none; }
  .product-beeld { overflow: hidden; overflow: clip; }
}
html, body { overflow-x: clip; }

/* overige pagina's: lijnen in plaats van kaders, koppen zoals op de winkel */
#view .vlak { background: none; border: 0; border-top: 1px solid var(--lijn); border-radius: 0; padding: 22px 0 0; }
#view .vlak h2 { text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: 0; }
.pagina-kop h1 { text-transform: uppercase; line-height: .95; font-size: clamp(2.4rem, 5vw, 3.8rem); }
.pagina-kop { padding-top: 48px; }

/* openingsscherm v3: de straat zit in de 3D-achtergrond; na het openen staat de slab groot naast de keuzes, nooit eronder */
.rip.has-fx .rip-straat { display: none; }
.rip.has-fx .rip-bg { background: #05060f; }
@media (min-width: 900px) {
  .rip[data-s="done"]:not([data-zoom]) { grid-template-columns: minmax(0, 1fr) minmax(380px, 470px); grid-template-rows: 1fr; column-gap: clamp(32px, 5vw, 96px); padding: 0 clamp(24px, 6vw, 120px); align-items: center; overflow: hidden; }
  .rip[data-s="done"]:not([data-zoom]) .rip-stage { grid-column: 1; grid-row: 1; justify-self: end; margin: 0; width: min(34vw, calc(80vh * 62 / 106), 470px); }
  .rip[data-s="done"]:not([data-zoom]) .rip-ui { grid-column: 2; grid-row: 1; justify-self: start; width: 100%; max-height: 100vh; overflow-y: auto; padding: 84px 4px 40px; justify-items: start; text-align: left; scrollbar-width: none; }
  .rip[data-s="done"]:not([data-zoom]) .rip-ui::before { display: none; }
  .rip[data-s="done"]:not([data-zoom]) .r-name { font-size: clamp(2rem, 3vw, 2.8rem); text-transform: uppercase; }
  .rip[data-s="done"]:not([data-zoom]) .keuzes-v2, .rip[data-s="done"]:not([data-zoom]) .r-acts.gelijk { width: 100%; }
  .rip[data-s="done"]:not([data-zoom]) .keuze-rij { grid-template-columns: 1fr; }
}
/* knoppen op het openingsscherm: dicht vlak, zodat de lichtjes erachter niet door de tekst schijnen */
.rip .keuze-rij .knop, .rip .r-acts .knop-licht { background: #10132e; border: 1px solid rgba(255, 255, 255, .22); color: #fff; }
.rip .keuze-rij .knop:disabled { opacity: 1; color: rgba(255, 255, 255, .55); }
.rip .mk-vlak { background: #12163a; }
@media (min-width: 900px) { .rip[data-s="done"]:not([data-zoom]) .r-acts.gelijk { grid-template-columns: 1fr; } }
/* mobiel: geen los vlak achter de keuzes, maar de onderkant van het scherm loopt donker af */
@media (max-width: 899px) {
  .rip[data-s="done"] .rip-ui::before { display: none; }
  .rip.has-fx[data-s="done"] .rip-layer::after { content: ''; position: absolute; inset: 34% 0 0; background: linear-gradient(180deg, rgba(5, 6, 15, 0), rgba(5, 6, 15, .88) 22%, rgba(5, 6, 15, .94)); pointer-events: none; }
}

/* ---------- homepage v3: avond in de straat ---------- */
.w-hero { position: relative; isolation: isolate; overflow: hidden; padding: 40px 0 150px; background: linear-gradient(180deg, #05060f 0%, #0c0f2c 34%, #1e1a4e 66%, #3a2b66 86%, #4A3470 100%); }
.w-avond { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.w-defs { position: absolute; }
.w-sterren { position: absolute; left: 0; top: 0; width: 100%; height: 62%; fill: #eef0ff; }
.w-sterren .twinkel { animation: twinkel 4.5s ease-in-out infinite; }
@keyframes twinkel { 50% { opacity: .1; } }
.w-avond::before { content: ''; position: absolute; right: 8%; top: 9%; width: clamp(56px, 6vw, 92px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #fffaf0, #f4e6c2 55%, #d8c493); box-shadow: 0 0 60px 18px rgba(255, 236, 196, .16), 0 0 220px 90px rgba(255, 236, 196, .07); }
.w-stad { position: absolute; left: 0; right: 0; }
.w-stad svg { width: 100%; height: 100%; display: block; }
.w-stad-ver { bottom: 78px; height: 270px; opacity: .55; }
.w-stad-ver .huis, .w-stad-ver .paal { fill: #241d55; }
.w-stad-ver .raam { fill: #ffcf7a; opacity: .05; transition: opacity 1.2s ease-out; }
.w-stad-ver .lamp, .w-stad-ver .balk { display: none; }
.w-stad-dicht { bottom: 76px; height: 200px; }
.w-stad-dicht .huis, .w-stad-dicht .paal, .w-spiegel .huis, .w-spiegel .paal { fill: #0a0b1c; }
.w-stad-dicht .balk, .w-spiegel .balk { fill: none; stroke: #23285a; stroke-width: 1.4; stroke-linecap: round; }
.w-stad-dicht .raam, .w-spiegel .raam { fill: #ffcf6e; opacity: .07; transition: opacity .9s ease-out; }
.w-stad .lamp { fill: #ffe2a0; opacity: .35; transition: opacity .6s; }
.w-stad .lamp-gloed { opacity: 0; transition: opacity 1s; }
.w-hero.aan .w-stad .lamp { opacity: 1; }
.w-hero.aan .w-stad .lamp-gloed { opacity: 1; }
.w-hero.aan .w-stad-dicht .raam:nth-of-type(3n+1), .w-hero.aan .w-stad-dicht .raam:nth-of-type(7n+3), .w-hero.aan .w-spiegel .raam:nth-of-type(3n+1), .w-hero.aan .w-spiegel .raam:nth-of-type(7n+3) { opacity: .95; }
.w-hero.aan .w-stad-ver .raam:nth-of-type(4n+2) { opacity: .5; }
.w-hero.aan .w-stad-dicht .raam.deur { opacity: .5; }
.w-stad-dicht .raam:nth-of-type(11n+5) { animation: knipper 9s steps(1) infinite; }
@keyframes knipper { 0%, 63%, 100% { filter: none; } 64%, 68% { filter: brightness(.3); } }
.w-water { position: absolute; left: 0; right: 0; bottom: 0; height: 78px; overflow: hidden; background: linear-gradient(180deg, #0a0a20, var(--grond)); border-top: 1px solid rgba(255, 207, 110, .14); }
.w-spiegel { position: absolute; left: 0; right: 0; top: 0; height: 200px; transform: scaleY(-.55); transform-origin: top; opacity: .45; filter: blur(1.5px); -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent 100%); mask-image: linear-gradient(0deg, #000 30%, transparent 100%); }
.w-spiegel svg { width: 100%; height: 100%; display: block; }
.w-water::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(6, 7, 20, .55) 3px 5px); animation: golfjes 6s linear infinite; }
@keyframes golfjes { to { background-position: 0 40px; } }
.w-hero-packs::after { content: ''; position: absolute; inset: 6% 4% 10%; z-index: 0; background: radial-gradient(closest-side, rgba(140, 100, 255, .32), rgba(90, 70, 220, .1) 55%, transparent); filter: blur(8px); pointer-events: none; }
.w-hero-pack, .w-hero-hit { z-index: 2; }
.w-hero-pack-achter { z-index: 1; }
.w-hero-tip { z-index: 2; color: #c5c3e6; }
.w-hero .w-feiten { position: relative; }
@media (prefers-reduced-motion: reduce) { .w-sterren .twinkel, .w-water::after, .w-stad-dicht .raam { animation: none; } }
@media (max-width: 767px) {
  .w-hero { padding-bottom: 110px; }
  .w-stad-dicht { height: 130px; bottom: 56px; }
  .w-stad-ver { height: 180px; bottom: 58px; }
  .w-water { height: 56px; }
  .w-spiegel { height: 130px; }
  .w-avond::before { top: 4%; right: 6%; }
}
/* bijgesteld: lagere straat onder de tekst, minder ramen aan, geen maan (de packs zijn het lichtpunt) */
.w-avond::before { display: none; }
.w-hero { padding-bottom: 210px; }
.w-stad-dicht { height: 140px; bottom: 70px; }
.w-stad-ver { height: 200px; bottom: 72px; opacity: .42; }
.w-water { height: 72px; }
.w-spiegel { height: 140px; }
.w-hero.aan .w-stad-dicht .raam:nth-of-type(3n+1), .w-hero.aan .w-spiegel .raam:nth-of-type(3n+1) { opacity: .07; }
.w-hero.aan .w-stad-dicht .raam:nth-of-type(5n+1), .w-hero.aan .w-stad-dicht .raam:nth-of-type(7n+3), .w-hero.aan .w-spiegel .raam:nth-of-type(5n+1), .w-hero.aan .w-spiegel .raam:nth-of-type(7n+3) { opacity: .95; }
.w-hero-packs { margin-bottom: -40px; }
@media (max-width: 767px) { .w-hero { padding-bottom: 150px; } .w-stad-dicht { height: 100px; bottom: 54px; } .w-stad-ver { height: 140px; bottom: 56px; } .w-water { height: 54px; } .w-spiegel { height: 100px; } }
@media (min-width: 768px) { .w-hero { padding-top: 24px; } .w-hero h1 { font-size: clamp(2.8rem, 5.3vw, 4.8rem); } .w-hero-in { min-height: min(70vh, 640px); } }
/* de rest van de pagina hoort bij dezelfde avond */
:root { --grond: #090a16; --wit: #10122a; --lijn: #232744; }
/* stappen genummerd met straatnaambordjes, zoals het logo */
.w-stap-nr { display: inline-grid; place-items: center; width: 46px; height: 40px; padding: 3px; border-radius: 7px; background: var(--blauw); letter-spacing: 0; }
.w-stap-nr::before { content: ''; grid-area: 1 / 1; width: 100%; height: 100%; border: 2px solid #fff; border-radius: 5px; box-sizing: border-box; }
.w-stap-nr { font: 700 1.25rem/1 var(--font-logo, "Inter", Arial, sans-serif); color: #fff; }
/* gloed achter elk pack, in de kleur van het huis */
.w-pack-beeld::before { content: ''; position: absolute; inset: 4% -12% 0; z-index: -1; background: radial-gradient(closest-side, rgba(70, 120, 255, .3), transparent 70%); filter: blur(6px); }
.w-pack.villa .w-pack-beeld::before { background: radial-gradient(closest-side, rgba(140, 90, 255, .34), transparent 70%); }
.w-pack-beeld { isolation: isolate; }
@media (max-width: 767px) {
  .w-hero-hit p { font-size: .78rem; }
  .w-hero-hit .w-tier { white-space: nowrap; }
  .w-hero-tip { bottom: auto; top: -24px; left: 0; }
}
.w-stap-nr { position: relative; display: inline-flex; align-items: center; justify-content: center; font-family: Arial, Helvetica, sans-serif; }
.w-stap-nr::before { position: absolute; inset: 3px; width: auto; height: auto; }

/* slab op de site: dezelfde opbouw als de slab in de opening (rode labelrand, zwarte grade, kaart in een verdiept venster) */
.slab-in { background: linear-gradient(150deg, #f4f6fa, #e2e7ef 45%, #eceff4); box-shadow: inset 0 0 0 1px rgba(30, 40, 60, .3), inset 0 0 0 2.2cqw rgba(255, 255, 255, 0), inset 0 0 0 calc(2.2cqw + 1.5px) rgba(255, 255, 255, .9), 0 22px 40px -18px rgba(0, 0, 0, .7), 0 6px 14px -8px rgba(0, 0, 0, .5); }
.s-label { background: #fbfbf8; border-radius: 1px; box-shadow: inset 0 0 0 1.4cqw #fbfbf8, inset 0 0 0 2.6cqw #c3202b; padding: 6.5% 7.5% 6%; }
.s-label::before { display: none; }
.s-set, .s-var { color: #121212; font-family: var(--font-kop); font-weight: 600; font-size: 4.1cqw; text-transform: uppercase; }
.s-name { font-weight: 700; font-size: 6.2cqw; color: #121212; }
.s-cert { font-size: 3cqw; text-transform: uppercase; }
.s-grade small { color: #121212; }
.s-grade b { color: #121212; font-size: 12cqw; }
.s-win { background: #d3d9e2; border-radius: 2.6cqw; padding: 3.2cqw; box-shadow: inset 0 0 0 1px rgba(70, 80, 100, .4), 0 0 0 1.2px rgba(255, 255, 255, .9); display: grid; place-items: center; }
.s-win img { width: 100%; height: 100%; object-fit: contain; border-radius: 3cqw; filter: drop-shadow(0 1.2cqw 1.6cqw rgba(0, 0, 0, .35)); }
.s-holo { inset: 3.2cqw; border-radius: 3cqw; }

/* afrekenen: de productfoto van het pack op maat */
.pack-foto img { display: block; width: 100%; height: auto; }
.co-kop .co-pack { width: 76px; }
.co-kop h2 { font-size: 1.9rem; text-transform: uppercase; }
.co-prijs { font-size: 1.3rem; color: var(--goud); }
.sheet-panel { border: 1px solid var(--lijn); border-radius: 14px; }
.sheet-bg { background: rgba(4, 5, 14, .7); }
/* Jouw Adres: zonder kader, zoals de rest van de straat */
.adres-kop { background: none; border: 0; border-bottom: 1px solid var(--lijn); border-radius: 0; padding: 8px 0 0; }
.adres-kop h1 { text-transform: uppercase; }
.ed-rij { border-radius: 6px; background: linear-gradient(180deg, rgba(242, 193, 78, .06), transparent 60%); }
.feest-achter { background: none; border: 0; display: block; }
.feest-achter img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.feest-veil { background: radial-gradient(ellipse 45% 60% at 28% 50%, rgba(242, 193, 78, .1), transparent 70%), rgba(5, 6, 16, .965); }

/* live rij bovenaan: net gepulld door bewoners */
.w-ticker { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; height: 44px; border-bottom: 1px solid var(--lijn); background: #06070f; overflow: hidden; font-size: .84rem; }
.w-ticker-kop { display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 16px 0 max(16px, calc((100vw - 1200px) / 2)); background: #06070f; color: var(--goud); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; text-decoration: none; position: relative; z-index: 1; box-shadow: 12px 0 18px #06070f; white-space: nowrap; }
.live-stip { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: livepuls 1.8s ease-out infinite; }
@keyframes livepuls { 70% { box-shadow: 0 0 0 7px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
.w-ticker-baan { display: flex; width: max-content; animation: tikker 60s linear infinite; }
.w-ticker:hover .w-ticker-baan, .w-ticker:focus-within .w-ticker-baan { animation-play-state: paused; }
.w-ticker ul { display: flex; margin: 0; padding: 0; list-style: none; }
.w-ticker li { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; border-right: 1px solid var(--lijn); white-space: nowrap; color: var(--grijs); }
.w-ticker li img { height: 30px; width: auto; border-radius: 2px; }
.w-ticker li b { color: var(--inkt); font-weight: 600; }
.w-ticker .tk-w { color: var(--goud); }
.w-ticker .tk-t { font-size: .74rem; }
@keyframes tikker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .w-ticker-baan { animation: none; } .w-ticker { overflow-x: auto; } }
/* mobiel: het product direct in beeld (kop, dan de packs, dan de uitleg en knoppen) */
@media (max-width: 767px) {
  .w-hero-in { display: flex; flex-direction: column; gap: 0; }
  .w-hero-tekst { display: contents; }
  .w-hero .w-eyebrow { order: 1; font-size: .72rem; }
  .w-hero h1 { order: 2; font-size: clamp(2.3rem, 10.5vw, 3rem); margin-top: 10px; }
  .w-hero-packs { order: 3; height: 330px; margin: 6px auto 0; }
  .w-hero .w-lead { order: 4; margin-top: 18px; font-size: 1rem; }
  .w-hero .w-cta { order: 5; margin-top: 18px; }
  .w-hero .w-feiten { order: 6; margin-top: 22px; }
  .w-hero-tip { top: auto; bottom: -6px; left: 0; font-size: .74rem; }
  .w-hero-hit { width: 32%; right: 0; bottom: 14%; }
}
@media (max-width: 767px) {
  .w-hero .w-eyebrow { align-self: flex-start; text-align: left; margin: 0; }
  .w-hero .w-cta { width: 100%; }
  .w-hero-hit p .w-tier { display: none; }
}

/* packs: de drie duurste slabs van het huis ernaast */
.w-pack { grid-template-columns: minmax(0, 250px) minmax(0, 1fr) minmax(0, 300px); }
.w-pack-hits { align-self: center; display: grid; gap: 12px; }
.w-ph-kop { margin: 0; color: var(--grijs); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.w-ph-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.w-ph { display: grid; gap: 6px; color: inherit; text-decoration: none; font-size: .78rem; }
.w-ph .slab { transition: transform .35s var(--ease); }
.w-ph:hover .slab { transform: translateY(-4px); }
.w-ph-naam { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-ph b { color: var(--goud); font-weight: 500; }
@media (max-width: 1100px) { .w-pack { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); } .w-pack-hits { display: none; } }
@media (max-width: 767px) { .w-pack { grid-template-columns: 88px minmax(0, 1fr); } }

/* vragen: open/dicht, met lijnen */
.vragen { border-top: 1px solid var(--lijn); }
.vraag { border-bottom: 1px solid var(--lijn); }
.vraag summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-family: var(--font-kop); font-weight: 700; font-size: 1.15rem; }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after { content: '+'; font: 500 1.4rem/1 var(--font-mono); color: var(--goud); transition: transform .25s var(--ease); }
.vraag[open] summary::after { transform: rotate(45deg); }
.vraag p { margin: 0 0 20px; max-width: 72ch; color: var(--grijs); line-height: 1.6; }
.hoe-acts { display: flex; gap: 12px; flex-wrap: wrap; padding-bottom: 24px; }
.vragen { border-top: 0; }
/* De Schuur op mobiel: twee slabs naast elkaar, bod en knoppen compact */
@media (max-width: 767px) {
  .schuur { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .schuur-item .si-naam { font-size: .82rem; }
  .schuur-item .si-waarde { font-size: .74rem; }
  .si-bod { padding: 8px 9px 10px; }
  .si-bod b { font-size: 1.2rem; }
  .si-bod .knop, .schuur-item .acties .knop { min-height: 44px; font-size: .78rem; padding: 6px 8px; }
  .si-cert { font-size: .7rem; }
}
.feest-tekst .knop:not(.knop-goud) { background: #10132e; border-color: rgba(255, 255, 255, .3); }
@media (max-width: 767px) { .feest-straat { height: 14vh; opacity: .7; } }
/* bonus-tabel op mobiel: alleen kaart, beloning en kans per pack, zonder de lange uitleg */
@media (max-width: 767px) { .odds-ster .td-sub { display: none; } .odds-ster th, .odds-ster td { font-size: .8rem; } }

/* label in PSA-opbouw: dikke rode rand, wit vlak, vier regels gewone hoofdletters */
.s-label.psa { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 4cqw; row-gap: .3cqw; align-items: center; padding: 4.6cqw 5cqw 4.2cqw; border-radius: 0; background: #fdfdfb; box-shadow: inset 0 0 0 2.4cqw #d41f2b; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 400; color: #161616; font-size: 4.6cqw; line-height: 1.12; letter-spacing: .01em; }
.s-label.psa .sl-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding-left: 2.6cqw; }
.s-label.psa .sl-r { text-align: right; white-space: nowrap; padding-right: 2.6cqw; }
.s-label.psa .sl-cert { color: #8a8f99; font-size: 3.4cqw; letter-spacing: .04em; }
.s-label.psa > span:first-child { padding-top: 1.6cqw; }
.s-label.psa > span:nth-child(2) { padding-top: 1.6cqw; }
.s-label.psa > span:nth-last-child(-n+2) { padding-bottom: 1.4cqw; }
.s-label.psa { font-size: 4cqw; column-gap: 2cqw; padding: 4.4cqw 4.2cqw 4cqw; letter-spacing: 0; }
.s-label.psa .sl-l { padding-left: 2cqw; }
.s-label.psa .sl-r { padding-right: 2cqw; }
.s-label.psa .sl-cert { font-size: 3cqw; }
/* het plastic van een nagemaakte slab dichter bij de foto's van echte slabs: grijziger acryl, dikke heldere rand, lichte spiegeling */
.slab-in { background: linear-gradient(158deg, #eef1f5 0%, #d9dee5 38%, #e6e9ee 62%, #cfd5dd 100%); box-shadow: inset 0 0 0 1px rgba(20, 28, 44, .45), inset 0 0 0 3.2cqw rgba(255, 255, 255, .35), inset 0 0 0 calc(3.2cqw + 1px) rgba(120, 130, 150, .35), inset 0 2cqw 4cqw rgba(255, 255, 255, .5), 0 22px 40px -18px rgba(0, 0, 0, .75), 0 6px 14px -8px rgba(0, 0, 0, .5); padding: 6.2cqw 6.6cqw 7cqw; }
.slab:not(.is-echt) .s-glare { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 38%, transparent 46%), radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .25), transparent 40%); }

/* laden zonder verspringen: de inhoud krijgt meteen de hoogte van het scherm, zodat de footer niet eerst in beeld staat */
#view { min-height: calc(100svh - 64px); }
/* goedkopere animaties: het water schuift via transform (geen nieuwe tekening per frame), geen knipperende ramen, minder twinkelende sterren */
.w-water::after { inset: -40px 0 0; background-position: 0 0 !important; animation: golfjes2 6s linear infinite; will-change: transform; }
@keyframes golfjes2 { to { transform: translateY(40px); } }
.w-stad-dicht .raam:nth-of-type(11n+5) { animation: none; }
.w-sterren .twinkel { animation: none; }
.w-sterren .twinkel:nth-of-type(4n) { animation: twinkel 4.5s ease-in-out infinite; }

/* =====================================================================================================
   v5 "blauw uur" (25 okt): licht en warm als basis (papierwit, nachtblauw), de hero een helder blauw uur boven de gracht
   met een warme gloed aan de horizon. Eén set hoeken, schaduwen en tekstgroottes; geen kaartjes waar een lijn volstaat.
   ===================================================================================================== */
:root {
  --grond: #f7f3ed;
  --wit: #ffffff;
  --vlak-2: #f1ece4;
  --lijn: #e6dfd4;
  --lijn-2: #d6cdbf;
  --inkt: #14183F;
  --grijs: #5f6478;
  --nacht: #14183F;
  --blauw-tekst: #0B4F9C;
  --goud-tekst: #7f5a08;
  --r-vlak: 16px;
  --r-knop: 10px;
  --schaduw-1: 0 1px 2px rgba(20, 24, 63, .06), 0 10px 24px -14px rgba(20, 24, 63, .28);
  --schaduw-2: 0 2px 4px rgba(20, 24, 63, .05), 0 28px 56px -32px rgba(20, 24, 63, .45);
  --pack-schaduw: drop-shadow(0 34px 34px rgba(10, 14, 50, .42));
}
body { background: var(--grond); color: var(--inkt); }
::selection { background: rgba(242, 193, 78, .45); color: var(--inkt); }
html { scrollbar-color: #b9b0a2 var(--grond); }
:focus-visible { outline-color: var(--blauw); }

/* kop, knoppen */
.kop { background: rgba(255, 255, 255, .9); border-bottom: 1px solid var(--lijn); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.menu a { color: #4b5068; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--inkt); }
.saldo-pil { background: #fff; border-color: var(--lijn-2); color: var(--inkt); }
.hamburger { color: var(--inkt); }
.knop { border-radius: var(--r-knop); }
.knop-lijn { background: transparent; border: 1px solid var(--lijn-2); color: var(--inkt); }
.knop-lijn:hover { border-color: var(--inkt); background: rgba(20, 24, 63, .04); }
.knop-wit { background: #fff; color: var(--inkt); border: 1px solid rgba(20, 24, 63, .12); box-shadow: var(--schaduw-1); }
.knop-wit:hover { background: #fff; transform: translateY(-1px); }
.knop-goud { box-shadow: 0 12px 28px -14px rgba(160, 110, 10, .7); }

/* live rij: een donkere band, zoals een beursticker */
.w-ticker { background: var(--nacht); border-bottom: 0; color: #c9cce0; }
.w-ticker-kop { background: var(--nacht); box-shadow: 12px 0 18px var(--nacht); }
.w-ticker li b { color: #fff; }
.w-ticker li { border-color: rgba(255, 255, 255, .12); color: #a9aec7; }

/* ---------- hero: blauw uur boven de gracht ---------- */
.h-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: 64px 0 172px;
  background: linear-gradient(180deg, #0e2565 0%, #183f9b 34%, #2f56b8 60%, #6a69c2 80%, #c98f9a 92%, #f1b07a 100%); }
.h-lucht { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.h-sterren { position: absolute; left: 0; top: 0; width: 100%; height: 46%; fill: #fff; opacity: .6; }
.h-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; min-height: min(66vh, 620px); }
.h-hero h1 { margin: 0; max-width: 11ch; font-size: clamp(3rem, 5.6vw, 5.2rem); line-height: .92; text-transform: uppercase; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.h-lead { margin: 24px 0 0; max-width: 40ch; font-size: 1.15rem; line-height: 1.55; color: rgba(255, 255, 255, .9); }
.h-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.h-trust { margin: 22px 0 0; font-size: .9rem; color: rgba(255, 255, 255, .78); }
.h-pack { position: relative; display: grid; justify-items: center; gap: 20px; }
.h-podium { position: relative; width: min(100%, 460px); aspect-ratio: 460 / 560; }
.h-podium::before { content: ''; position: absolute; inset: 8% 0 0; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 140, .4), rgba(255, 190, 110, .12) 55%, transparent 75%); }
.h-echt { position: absolute; right: -2%; top: 16%; width: 40%; margin: 0; transform: rotate(9deg); z-index: 0; }
.h-echt img { display: block; width: 100%; height: auto; filter: var(--pack-schaduw); }
.h-echt figcaption { margin-top: 10px; transform: rotate(-9deg); font-size: .78rem; font-weight: 600; color: rgba(255, 255, 255, .9); text-align: center; white-space: nowrap; }
.h-etalage { position: absolute; left: 0; top: 0; width: 82%; height: 100%; cursor: pointer; outline: none; z-index: 1; }
.h-etalage:focus-visible { outline: 3px solid #fff; outline-offset: 6px; border-radius: 12px; }
.h-pack-foto { position: absolute; left: 50%; top: 50%; width: 76%; height: auto; transform: translate(-50%, -50%) rotate(-4deg); filter: var(--pack-schaduw); transition: opacity .6s; }
.etalage-doek { position: absolute; inset: -6% -16%; width: 132%; height: 112%; display: block; opacity: 0; transition: opacity .8s; filter: var(--pack-schaduw); }
.h-etalage.is-3d .etalage-doek { opacity: 1; }
.h-etalage.is-3d .h-pack-foto { opacity: 0; }
.h-huiskeuze { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: rgba(10, 18, 60, .45); }
.h-huis { display: grid; gap: 1px; padding: 8px 16px; border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; text-align: left; font: inherit; }
.h-huis b { font-family: var(--font-kop); font-size: 1rem; text-transform: uppercase; letter-spacing: .02em; }
.h-huis span { font-size: .82rem; color: rgba(255, 255, 255, .85); }
.h-huis.is-actief { background: #fff; color: var(--inkt); }
.h-huis.is-actief span { color: var(--grijs); }
.h-straat { position: absolute; left: 0; right: 0; bottom: 26px; height: 150px; z-index: -1; pointer-events: none; }
.h-straat svg { width: 100%; height: 100%; display: block; }
.h-straat .huis, .h-straat .paal { fill: #1d1a4a; }
.h-straat .balk { fill: none; stroke: #36326e; stroke-width: 1.4; }
.h-straat .raam { fill: #ffcf6e; opacity: .14; }
.h-straat .raam:nth-of-type(4n+1), .h-straat .raam:nth-of-type(6n+2) { opacity: .95; }
.h-straat .lamp { fill: #ffe2a0; }
.h-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: var(--grond); border-radius: 28px 28px 0 0; z-index: 0; }

/* ---------- secties ---------- */
.h-sectie { padding: 80px 0 16px; }
.h-kop { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.h-kop h2 { margin: 0; font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -.01em; text-transform: none; color: var(--inkt); }
.h-kop-sub { margin: 8px 0 0; max-width: 62ch; color: var(--grijs); font-size: 1rem; }
.h-meer { color: var(--inkt); font-weight: 600; text-decoration: none; white-space: nowrap; }
.h-meer::after { content: ' →'; }
.h-meer:hover { text-decoration: underline; text-underline-offset: 4px; }
.h-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(168px, 16vw, 210px); gap: 24px; overflow-x: auto; padding: 8px 2px 24px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.h-slab { display: grid; gap: 3px; align-content: start; color: inherit; text-decoration: none; scroll-snap-align: start; }
.h-slab .slab { margin-bottom: 12px; transition: transform .35s var(--ease); }
.h-slab:hover .slab { transform: translateY(-6px) rotate(-1deg); }
.h-slab-naam { font-family: var(--font-kop); font-weight: 700; font-size: 1.05rem; line-height: 1.15; }
.h-slab-sub { color: var(--grijs); font-size: .82rem; }
.h-slab-w { margin-top: 2px; font-size: 1.1rem; color: var(--inkt); }

/* vitrine: de grootste hits op een donkere band, elk met een eigen spotje */
.h-vitrine { margin-top: 80px; padding: 72px 0 56px; color: #fff; background: radial-gradient(ellipse 80% 120% at 50% 0%, #22286a, var(--nacht) 70%); }
.h-vitrine .h-kop h2, .h-vitrine .h-meer { color: #fff; }
.h-vitrine .h-kop-sub { color: rgba(255, 255, 255, .72); }
.h-vitrine .h-slab { position: relative; padding-top: 10px; }
.h-vitrine .h-slab::before { content: ''; position: absolute; left: -10%; right: -10%; top: -6px; height: 70%; z-index: -1; background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(255, 255, 255, .16), transparent 70%); pointer-events: none; }
.h-vitrine .h-slab-sub { color: rgba(255, 255, 255, .62); }
.h-vitrine .h-slab-w { color: var(--goud); }
.h-vitrine .h-rail { isolation: isolate; scrollbar-color: #3a4180 transparent; }

/* pack-kaarten */
.h-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.h-pack-kaart { display: grid; grid-template-rows: auto 1fr; background: #fff; border-radius: var(--r-vlak); overflow: hidden; box-shadow: var(--schaduw-2); }
.h-pack-vlak { position: relative; display: grid; place-items: center; height: 260px; border: 0; padding: 0; cursor: pointer; overflow: hidden; background: radial-gradient(ellipse 60% 70% at 50% 85%, #1e63c4, var(--blauw) 60%, #093f7d); }
.h-pack-kaart.villa .h-pack-vlak { background: radial-gradient(ellipse 60% 70% at 50% 85%, #3a3584, var(--nacht) 60%, #0d102c); }
.h-pack-vlak img { width: auto; height: 236px; transform: translateY(6px) rotate(-4deg); filter: var(--pack-schaduw); transition: transform .5s var(--ease); }
.h-pack-vlak:hover img { transform: translateY(0) rotate(-1deg) scale(1.03); }
.h-pack-info { display: grid; gap: 14px; align-content: start; padding: 24px 24px 26px; }
.h-pack-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.h-pack-kop h3 { margin: 0; font-size: 1.8rem; text-transform: uppercase; line-height: 1; }
.h-pack-kop h3 a { color: inherit; text-decoration: none; }
.h-prijs { font-size: 1.5rem; color: var(--inkt); white-space: nowrap; }
.h-pack-sub { margin: 0; color: var(--grijs); font-size: .95rem; }
.h-mk { margin: 0; display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; background: #fbf4e3; border: 1px solid #efdfb8; }
.h-mk span { font-size: .8rem; font-weight: 600; color: var(--goud-tekst); text-transform: uppercase; letter-spacing: .04em; }
.h-mk b { font-weight: 600; font-size: 1rem; color: var(--inkt); }
.h-mk b .mono { font-size: 1.15rem; color: var(--goud-tekst); }
.h-pack-info .w-odds li { font-size: .9rem; padding: 9px 0; }
.h-pack-acties { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.h-pack-acties .knop { width: 100%; justify-content: center; }

/* zo werkt het: één strook, geen kaartjes */
.h-stappen { list-style: none; margin: 0; padding: 24px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.h-stappen li { display: flex; gap: 14px; align-items: start; padding: 0 24px; }
.h-stappen li + li { border-left: 1px solid var(--lijn); }
.h-stappen li:first-child { padding-left: 0; }
.h-stappen div { display: grid; gap: 2px; }
.h-stappen b { font-family: var(--font-kop); font-size: 1.2rem; }
.h-stappen span:not(.w-stap-nr) { color: var(--grijs); font-size: .95rem; }
.h-stappen .w-stap-nr { flex: none; width: 40px; height: 34px; font-size: 1.05rem; }

/* editie op de homepage: alle tien vakjes in een raster, de nog niet bestaande als gestippeld silhouet */
.editie-strook .editie-rail { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; gap: 24px 20px; }
.editie-strook .ed-binnenkort { border: 2px dashed var(--lijn-2); border-radius: 10px; background: transparent; }
.editie-strook .ed-binnenkort span { color: #a39a8b; }

/* op papierwit: wat in de donkere versie wit was */
.w-feiten b, .w-slab-waarde, .w-prijs, .w-pack-sub b, .w-odds-kans { color: var(--inkt); }
.ed-rij .ed-item .beloning b, .editie-strook .ed-item .beloning b, .editie-set b { color: var(--goud-tekst); }
.etalage-item figcaption b, .etalage-item .waarde-regel b { color: var(--inkt); }
.etalage { color: var(--inkt); background: var(--vlak-2); }
.w-odds li.is-sleutel .w-odds-naam { color: var(--goud-tekst); }
.w-odds-bonus .w-odds-naam { color: #6b43c7; }
.chip { background: color-mix(in srgb, var(--tc, #8a8f99) 18%, #fff); color: color-mix(in srgb, var(--tc, #8a8f99) 55%, #14183F); }
.w-tier { color: var(--grijs); }

/* huispagina: hetzelfde 3D-pack als op de homepage, de twee slabs erachter */
.pb-etalage { position: absolute; left: 50%; top: -3%; width: min(72%, 420px); height: auto; aspect-ratio: 440 / 560; transform: translateX(-62%); z-index: 3; }
.pb-etalage .h-pack-foto { width: 78%; }

/* openingsscherm */
.rip.is-demo.has-fx[data-s="fx"]::after { opacity: 0; }
.r-done .telop { display: inline-block; color: var(--goud); font-family: var(--font-kop); font-weight: 800; }
.r-done .telop.klaar { text-shadow: 0 0 24px rgba(242, 193, 78, .7); animation: telop-pop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes telop-pop { 50% { transform: scale(1.12); } }
.feest-veil { background: radial-gradient(ellipse 45% 60% at 28% 50%, rgba(242, 193, 78, .1), transparent 70%), #05060f; }
.stempel-verkocht { visibility: visible; position: absolute; left: -4%; right: -4%; top: 40%; z-index: 4; padding: 10px 8px; border: 4px solid var(--goud); border-radius: 8px; background: rgba(8, 9, 24, .55); color: var(--goud); text-align: center; text-transform: uppercase; font: 800 clamp(1.3rem, 2.6vw, 2rem)/1 var(--font-kop); letter-spacing: .04em; transform: rotate(-12deg); pointer-events: none; animation: stempel-in .45s cubic-bezier(.2, 1.6, .4, 1) .15s both; }
.stempel-verkocht.is-verhuizen { border-color: #7fb2ff; color: #a9cbff; }
.stempel-verkocht.is-schuur { border-color: #fff; color: #fff; }
@keyframes stempel-in { from { opacity: 0; transform: rotate(-12deg) scale(2.2); } to { opacity: 1; transform: rotate(-12deg) scale(1); } }

@media (prefers-reduced-motion: reduce) { .stempel-verkocht, .r-done .telop.klaar { animation: none; } }
@media (max-width: 1000px) {
  .h-in { grid-template-columns: 1fr; min-height: 0; }
  .h-packs { grid-template-columns: 1fr; max-width: 640px; }
  .editie-strook .editie-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 899px) { .rip.na-keuze[data-s="done"] .rip-stage { width: min(64vw, 40vh); } }
@media (max-width: 767px) {
  .h-hero { padding: 28px 0 116px; }
  .h-in { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .h-tekst { display: contents; }
  .h-hero h1 { order: 1; font-size: clamp(2.3rem, 10.4vw, 3rem); line-height: .95; max-width: none; }
  .h-pack { order: 2; margin-top: 14px; gap: 14px; }
  .h-podium { width: min(78vw, 300px); }
  .h-cta { order: 3; display: grid; margin-top: 18px; }
  .h-cta .knop { width: 100%; justify-content: center; }
  .h-lead { order: 4; margin-top: 18px; font-size: 1rem; }
  .h-trust { order: 5; margin-top: 12px; font-size: .84rem; }
  .h-straat { height: 96px; }
  .h-sectie { padding-top: 56px; }
  .h-vitrine { margin-top: 56px; padding: 52px 0 40px; }
  .h-kop { flex-direction: column; align-items: start; gap: 10px; }
  .h-rail { grid-auto-columns: 42vw; gap: 16px; }
  .h-pack-vlak { height: 220px; }
  .h-pack-vlak img { height: 196px; }
  .h-pack-info .w-odds li { font-size: .84rem; }
  .h-pack-acties { grid-template-columns: 1fr; }
  .h-stappen { grid-template-columns: 1fr; gap: 18px; padding: 20px 0; }
  .h-stappen li { padding: 0; }
  .h-stappen li + li { border-left: 0; }
  .pb-etalage { width: min(78%, 330px); }
  .editie-strook .editie-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v5 tweede ronde: onderschrift van de echte slab boven het pack, koppen overal in gewone zinnen, editie zonder lege vakken */
.h-echt figcaption { position: absolute; right: 0; bottom: -30px; z-index: 3; margin: 0; transform: rotate(-9deg); padding: 4px 10px; border-radius: 999px; background: rgba(10, 18, 60, .6); }
.sectie-kop h2, .editie-kop h2, .w-kop h2 { text-transform: none; font-weight: 700; letter-spacing: -.01em; line-height: 1.05; font-size: clamp(1.9rem, 3vw, 2.5rem); }
.huis-top .mono { color: var(--goud-tekst); }
.editie-strook .ed-item.binnenkort { display: none; }
.editie-strook { padding-top: 80px; }
@media (max-width: 767px) { .h-echt figcaption { bottom: -26px; font-size: .72rem; } .editie-strook { padding-top: 56px; } }
.h-echt { right: -11%; }
.h-echt figcaption { right: auto; left: 50%; translate: -50% 0; }
.h-echt figcaption { left: auto; right: -6px; translate: none; }
@media (max-width: 767px) { .h-echt figcaption { display: none; } }

/* huispagina in de stijl van de homepage: het pack op een vlak in de kleur van het huis, er een beetje bovenuit */
.product { padding-top: 48px; gap: 56px; }
.product-beeld { background: radial-gradient(ellipse 70% 75% at 50% 80%, #1e63c4, var(--blauw) 58%, #093f7d); border-radius: var(--r-vlak); height: 560px; margin-top: 24px; box-shadow: var(--schaduw-2); }
.product.villa .product-beeld { background: radial-gradient(ellipse 70% 75% at 50% 80%, #3a3584, var(--nacht) 58%, #0d102c); }
.product-beeld::before { display: none; }
.pb-etalage { top: -6%; }
.pb-slab { filter: drop-shadow(0 20px 26px rgba(5, 10, 40, .45)); }
.product-info h1 { text-transform: uppercase; }
.koop-rij { gap: 12px 16px; }
.koop-rij .bedrag { margin-right: 6px; }
.product-info .h-mk { margin-top: 4px; }
.product-feiten { border-top: 0; padding-top: 0; display: flex; gap: 6px 22px; }
.huis-top .mono, .huis-top .ht-slab .mono { color: var(--goud-tekst); }
/* koppen in gewone zinnen, ook in de vlakken (Huisregels, Jouw Adres) */
#view .vlak h2 { text-transform: none; font-size: clamp(1.4rem, 2.2vw, 1.75rem); letter-spacing: -.005em; }
.gevel .vlak { border-top: 1px solid var(--lijn); }
@media (max-width: 767px) {
  .product { gap: 28px; padding-top: 24px; }
  .product-beeld { height: 400px; margin-top: 18px; }
  .koop-rij .knop { flex: 1 1 100%; justify-content: center; }
}
/* koopbalk op mobiel: licht, zoals de kop */
@media (max-width: 767px) { .koopbalk { background: rgba(255, 255, 255, .94); color: var(--inkt); border-top: 1px solid var(--lijn); box-shadow: 0 -10px 24px -12px rgba(20, 24, 63, .25); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); } .kb-naam small { color: var(--grijs); } .kb-prijs { color: var(--inkt); } }
/* licht thema: de browser tekent invoervelden, vinkjes en scrollbalken licht */
:root { color-scheme: light; }
.rip, .feest, .w-ticker, .h-vitrine { color-scheme: dark; }
.vink input, .kies input, .radio input, .slot-opties input { accent-color: var(--blauw); }
/* afrekenen */
.co-prijs { color: var(--goud-tekst); }
.co-kop h2 { margin-top: 2px; }
/* Jouw Adres: het saldo als duidelijk blok, uitbetalen als echte knop */
.adres-kop { align-items: center; padding-bottom: 28px; }
.adres-kop .portemonnee { padding: 18px 22px; border-radius: var(--r-vlak); background: #fff; box-shadow: var(--schaduw-1); }
.portemonnee .knop:disabled { opacity: 1; color: #8b8f9f; background: var(--vlak-2); border-color: var(--lijn); }
/* editie in je Schuur: de kaarten die je nog niet hebt als lichte silhouetten in plaats van zwarte vlakken */
.ed-leeg .ed-slab.silhouet img { filter: grayscale(1) brightness(1.6) contrast(.35); opacity: .5; }
.ed-vraag { color: rgba(20, 24, 63, .35); }
.ed-leeg.ster-3 .ed-vraag { color: var(--goud-tekst); }
.ed-rij { background: #fffaf0; border-color: #efdfb8; }
@media (max-width: 767px) { .adres-kop .portemonnee { padding: 14px 16px; } }
.co-na { list-style: none; margin: 0; padding: 12px 14px; display: grid; gap: 4px; border-radius: 10px; background: var(--grond); font-size: .88rem; color: var(--grijs); }
.co-na b { color: var(--inkt); font-weight: 600; }
.w-stappen h3 { text-transform: none; }
.odds-ster th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
.odds-ster th.r { min-width: 7.5rem; padding-left: 14px; }
/* demo: de keuzes staan er echt, alleen niet klikbaar; ze zien er niet kapot uit */
.rip.is-demo .keuzes-v2 .knop:disabled { opacity: 1; cursor: default; }
.rip.is-demo .mk-vlak .knop-goud:disabled { background: var(--goud); color: var(--nacht); filter: saturate(.75); }
.rip.is-demo .keuze-rij .knop:disabled { color: rgba(255, 255, 255, .85); }
.rip.is-demo .keuzes-v2 { position: relative; }
.rip.is-demo .keuzes-v2::before { content: "Voorbeeld: in een echt pack kies je hier"; display: block; justify-self: start; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(242, 193, 78, .16); color: #f6dfa4; font-size: .75rem; font-weight: 700; letter-spacing: .04em; }

/* footer: de straat 's avonds, met kolommen links, 18+ en Het Huisslot zichtbaar, betaalmethoden */
.voet { background: var(--nacht); color: #c9cce0; padding: 0 0 32px; margin-top: 96px; color-scheme: dark; }
.voet-skyline { background: var(--grond); height: 110px; margin-bottom: 0; }
.voet-skyline .huis, .voet-skyline .paal { fill: var(--nacht); }
.voet-in { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 48px; align-items: start; }
.voet-merk { display: grid; gap: 14px; max-width: 38ch; }
.voet-merk p { margin: 0; line-height: 1.55; }
.voet-veilig { display: flex; gap: 12px; align-items: start; font-size: .9rem; color: #a9aec7; }
.voet-veilig a { color: #fff; }
.voet-18 { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 2px solid #e8574a; color: #fff; font: 700 .85rem/1 var(--font-mono); }
.voet-kol { display: grid; gap: 10px; align-content: start; }
.voet-kol h2 { margin: 0 0 4px; font: 600 .78rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #8d93b4; }
.voet-kol a { color: #fff; text-decoration: none; font-size: .95rem; }
.voet-kol a:hover { text-decoration: underline; text-underline-offset: 4px; }
.voet-onder { width: min(100% - 48px, 1200px); margin: 40px auto 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.voet-onder p { margin: 0; }
.voet-betaal { display: flex; gap: 8px; }
.voet-betaal span { padding: 5px 10px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: #fff; font-size: .8rem; font-weight: 600; }
.voet-onder .klein { color: #8d93b4; font-size: .82rem; }
.voet-fijn { width: min(100% - 48px, 1200px); margin: 16px auto 0; color: #6f7598; font-size: .76rem; line-height: 1.6; }
@media (max-width: 900px) { .voet-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } .voet-merk { grid-column: 1 / -1; } }
@media (max-width: 767px) { .voet { margin-top: 64px; } .voet-in { width: min(100% - 32px, 1200px); gap: 26px 16px; } .voet-onder, .voet-fijn { width: min(100% - 32px, 1200px); } .voet-skyline { height: 80px; } }
.voet-18 { white-space: nowrap; font-size: .78rem; letter-spacing: -.02em; }
.voet-veilig p { margin: 0; }
.voet { border-top: 0; }
.voet-skyline { border: 0; box-shadow: none; }
/* meldingen op papierwit: donkere tekst op een licht goud vlak */
.concept, .melding { background: #fbf4e3; border-color: #efdfb8; color: #5c4306; }
.etalage-kop p, .etalage-item figcaption, .w-meestal { color: var(--grijs); }
.lever { background: #e3f5ec; color: #11633f; border-color: #b9e3cc; }
.voet-fijn { color: #9aa0c0; }
.ed-rij-kop > .mono { color: var(--goud-tekst); }
.chip { color: color-mix(in srgb, var(--tc, #8a8f99) 45%, #14183F); }
.h-hero :focus-visible, .h-vitrine :focus-visible, .voet :focus-visible, .w-ticker :focus-visible, .rip :focus-visible, .feest :focus-visible { outline-color: #fff; }
/* lange lijsten met slabs: wat nog niet in beeld is, tekent de browser pas als je erheen scrolt */
.verd { content-visibility: auto; contain-intrinsic-size: auto 560px; }
.h-rail .h-slab, .schuur-item { content-visibility: auto; contain-intrinsic-size: auto 380px; }
/* meldingen in formulieren: leesbaar op wit */
.msg { color: #b42318; }
.msg.ok { color: #11633f; }
.msg:not(:empty) { padding: 10px 12px; border-radius: 8px; background: #fdecea; }
.msg.ok:not(:empty) { background: #e3f5ec; }
.sheet-panel .stap-regel { font-family: var(--font); font-weight: 600; font-size: .8rem; letter-spacing: .02em; text-transform: none; color: var(--grijs); }
/* mobiel: rijen laten zien dat er meer is (de volgende kaart half in beeld), editie als veegbare rij */
@media (max-width: 767px) {
  .h-rail { grid-auto-columns: 38vw; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .editie-strook .editie-rail { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 46vw; overflow-x: auto; margin-inline: -16px; padding: 4px 16px 16px; scroll-snap-type: x mandatory; }
  .editie-strook .ed-item { scroll-snap-align: start; }
}
.h-straat { bottom: 0; }
.voet-18 { display: inline-flex; align-items: center; justify-content: center; }
.h-hero::after { display: none; }
.h-hero { padding-bottom: 150px; }
@media (max-width: 767px) { .h-hero { padding-bottom: 100px; } }
/* paginawissel: de inhoud schuift zacht omhoog in, kop en footer blijven staan */
#view { view-transition-name: inhoud; }
.kop { view-transition-name: kop; }
::view-transition-old(inhoud) { animation: 160ms ease-in both vt-uit; }
::view-transition-new(inhoud) { animation: 320ms cubic-bezier(.2, .8, .2, 1) both vt-in; }
@keyframes vt-uit { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
/* de bouwplaats: een gestippelde kavel met een bouwbord */
.bouwplaats { display: flex; gap: 20px; align-items: center; padding: 26px 28px; border: 2px dashed var(--lijn-2); border-radius: var(--r-vlak); background: transparent; }
.bouwplaats h3 { margin: 0 0 4px; font-size: 1.3rem; }
.bouwplaats p { margin: 0; color: var(--grijs); }
.bp-bord { flex: none; padding: 10px 14px; border-radius: 6px; background: repeating-linear-gradient(135deg, #f2c14e 0 12px, #14183F 12px 24px); color: #fff; font: 800 .85rem/1 var(--font-kop); text-transform: uppercase; letter-spacing: .06em; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
@media (max-width: 767px) { .bouwplaats { flex-direction: column; align-items: start; } }
.bp-bord { border: 5px solid transparent; background: linear-gradient(#14183F, #14183F) padding-box, repeating-linear-gradient(135deg, #f2c14e 0 8px, #14183F 8px 16px) border-box; color: #f2c14e; text-shadow: none; }
/* opening: de uitleg als rustig label onder het pack, het demo-label op één regel */
.pk-hint { padding: 9px 16px; border-radius: 999px; background: rgba(8, 9, 24, .55); border: 1px solid rgba(255, 255, 255, .18); }
.pk-hint span { font-size: .78rem; }
.rip.is-demo::after { white-space: nowrap; }
@media (max-width: 767px) { .rip.is-demo::after { font-size: .68rem; padding: 5px 12px; top: calc(28px + env(safe-area-inset-top, 0px)); } }
/* mobiel menu: over de volle breedte, grote tikvlakken, Jouw Adres erin, en een knop om een huis te openen */
@media (max-width: 767px) {
  .menu { left: 0; right: 0; top: 64px; padding: 8px 16px 20px; border-radius: 0 0 16px 16px; background: #fff; border-bottom: 1px solid var(--lijn); box-shadow: var(--schaduw-2); gap: 0; }
  .menu a { padding: 16px 4px; border-radius: 0; border-bottom: 1px solid var(--lijn); font-family: var(--font-kop); font-weight: 700; font-size: 1.25rem; color: var(--inkt); box-shadow: none; }
  .menu a[aria-current="page"] { color: var(--blauw); box-shadow: none; }
  .menu .mob-adres { display: block; }
  .menu .mob-cta { display: flex; margin-top: 16px; border: 0; justify-content: center; font-family: var(--font); font-size: 1rem; color: var(--nacht); }
}
.menu .mob-cta { display: none; }
@media (max-width: 767px) { .menu .mob-cta { display: flex; } }
.hamburger i { transition: transform .25s var(--ease), opacity .2s; transform-origin: center; }
.hamburger[aria-expanded="true"] i:nth-of-type(1) { transform: translateY(var(--hb-stap, 7px)) rotate(45deg); }
.hamburger[aria-expanded="true"] i:nth-of-type(2) { opacity: 0; }
.hamburger[aria-expanded="true"] i:nth-of-type(3) { transform: translateY(calc(-1 * var(--hb-stap, 7px))) rotate(-45deg); }
.hamburger { --hb-stap: 9px; }
/* slab-venster: op desktop breed, slab links groot, gegevens rechts */
.sheet-panel.is-breed { width: min(100%, 920px); }
.slabkaart { gap: 18px; }
.sk-links { display: grid; gap: 10px; align-content: start; }
.sk-rechts { display: grid; gap: 14px; align-content: start; }
@media (min-width: 900px) { .sheet-panel.is-breed .slabkaart { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; } .sheet-panel.is-breed .sk-beeld { width: 100%; } }
.psa-fotos img { background: var(--vlak-2); }
/* huiskaarten reageren op de muis: iets omhoog, schaduw dieper */
@media (hover: hover) { .h-pack-kaart { transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .h-pack-kaart:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(20, 24, 63, .06), 0 40px 70px -34px rgba(20, 24, 63, .55); } }
@media (prefers-reduced-motion: reduce) { .h-pack-kaart:hover { transform: none; } }
/* glans pas tonen als het plaatje er is (geen losse regenboogvlek tijdens het laden) */
.ed-slab { background: var(--vlak-2); border-radius: 6%; }
@media (max-width: 767px) {
  .odds-ster th:nth-child(2), .odds-ster td:nth-child(2) { display: none; }
  .odds-ster th.r { min-width: 0; padding-left: 8px; font-size: .72rem; }
  .odds-ster td { padding-left: 8px; }
}

/* bewijs van een trekking */
.bewijs { display: grid; gap: 28px; max-width: 860px; padding-top: 24px; }
.bw-feiten { max-width: 520px; }
.bw-stap { display: grid; gap: 14px; padding-top: 24px; border-top: 1px solid var(--lijn); }
.bw-stap h2 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 1.5rem; }
.bw-stap p { margin: 0; color: var(--grijs); max-width: 70ch; }
.bw-balk { position: relative; display: flex; height: 26px; margin: 34px 0 6px; border-radius: 6px; overflow: visible; }
.bw-deel { background: color-mix(in srgb, var(--tc) 35%, #fff); border-right: 2px solid var(--grond); min-width: 4px; }
.bw-deel:first-child { border-radius: 6px 0 0 6px; } .bw-deel:last-child { border-radius: 0 6px 6px 0; border-right: 0; }
.bw-deel.is-raak { background: var(--tc); }
.bw-pijl { position: absolute; top: -8px; bottom: -8px; width: 3px; margin-left: -1.5px; background: var(--inkt); border-radius: 2px; }
.bw-pijl b { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; padding: 3px 8px; border-radius: 6px; background: var(--inkt); color: #fff; font-size: .82rem; white-space: nowrap; }
.bw-delen, .bw-pool { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.bw-delen li, .bw-pool li { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 170px); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--lijn); font-size: .92rem; }
.bw-delen li > :not(:first-child), .bw-pool li > .mono:last-child { text-align: right; }
.bw-pool li { grid-template-columns: 34px minmax(0, 1fr) auto; }
.bw-delen li.is-raak, .bw-pool li.is-raak { background: #fbf4e3; box-shadow: inset 3px 0 0 var(--goud); padding-left: 10px; font-weight: 600; }
.bw-uitkomst { color: var(--inkt) !important; font-size: 1.05rem; }
.r-bewijs { margin: 6px 0 0; font-size: .88rem; }
.r-bewijs .link { color: #c9d4ff; }
@media (max-width: 767px) { .bw-delen li { grid-template-columns: minmax(0, 1fr) 48px auto; font-size: .84rem; } }
.r-bewijs .link-knop { color: #c9d4ff; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
/* tijdens de bonus is de kop donker: menu licht */
html.straat-feest .kop { border-bottom-color: rgba(255, 255, 255, .12); }
html.straat-feest .menu a { color: #d9dcef; }
html.straat-feest .menu a[aria-current="page"] { color: #fff; }
html.straat-feest .hamburger { background: transparent; border-color: rgba(255, 255, 255, .3); }
html.straat-feest .hamburger i { background: #fff; }
.lege-schuur { margin-bottom: 28px; }
.lege-acties { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lege-acties .link { margin-left: 4px; font-weight: 600; }

/* =====================================================================================================
   v6 "avond op de gracht" (26 okt): de koele grond uit de huisstijl in plaats van crème; de hero is de gracht die ook
   op het pack staat, onderaan afgesneden door een rij gevels; zo werkt het als drie huizen met een huisnummerbordje.
   ===================================================================================================== */
:root { --grond: #EEF1F5; --vlak-2: #e4e9f0; --lijn: #d9dfe8; --lijn-2: #c3cbd8; --grijs: #4f566b; }
html { scrollbar-color: #b4bccb var(--grond); }
.editie-strook .ed-binnenkort span { color: #8e97a8; }

/* hero: de foto, links donker voor de tekst, onderaan de gevels in de kleur van de pagina */
.h-hero { background: #0c1233; padding: 76px 0 156px; }
.h-lucht { overflow: hidden; }
.h-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.h-lucht::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(9, 13, 40, .92) 0%, rgba(9, 13, 40, .74) 30%, rgba(9, 13, 40, .2) 58%, rgba(9, 13, 40, .12) 100%),
  linear-gradient(180deg, rgba(9, 13, 40, .6) 0%, rgba(9, 13, 40, 0) 24%, rgba(9, 13, 40, 0) 66%, rgba(9, 13, 40, .4) 100%); }
.h-boven { margin: 0 0 20px; color: var(--goud); font: 600 .8rem/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.h-hero h1 { text-shadow: 0 2px 32px rgba(5, 8, 30, .5); }
.h-lead, .h-trust { text-shadow: 0 1px 12px rgba(5, 8, 30, .6); }
.h-straat { height: 118px; bottom: -1px; z-index: 0; }
.h-straat .huis, .h-straat .paal, .h-straat .lamp { fill: var(--grond); }
.h-straat .raam, .h-straat .balk { display: none; }
.h-straat::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--grond); }
.h-in { position: relative; z-index: 1; }
.h-podium::before { inset: 14% -6% 0; background: radial-gradient(closest-side, rgba(255, 196, 110, .32), rgba(255, 170, 90, .1) 55%, transparent 75%); }
.h-huiskeuze { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); }
.h-echt figcaption { background: rgba(9, 13, 40, .66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* rijen met slabs: rechts zacht uitlopen, zodat je ziet dat er meer is */
@media (min-width: 768px) {
  .h-rail { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent); padding-right: 80px; }
}

/* de grootste hits: de Amstel bij nacht achter de vitrine */
.h-vitrine { position: relative; isolation: isolate; overflow: hidden; background: #0b0f2c; }
.h-vitrine-foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; opacity: .6; }
.h-vitrine::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 15, 44, .94) 0%, rgba(11, 15, 44, .62) 48%, rgba(11, 15, 44, .9) 100%); }

/* huiskaarten: het pack steekt boven de kaart uit, met een straatje in de kleur van het huis eronder */
.h-packs { padding-top: 48px; gap: 28px; }
.h-pack-kaart { overflow: visible; }
.h-pack-vlak { overflow: visible; height: 236px; align-items: end; border-radius: var(--r-vlak) var(--r-vlak) 0 0; }
.h-pack-vlak img { position: relative; z-index: 1; height: 300px; margin-top: -76px; transform: translateY(-10px) rotate(-4deg); }
.h-pack-vlak:hover img { transform: translateY(-18px) rotate(-1.5deg) scale(1.02); }
.h-pack-straat { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; overflow: hidden; pointer-events: none; }
.h-pack-straat svg { width: 100%; height: 100%; display: block; }
.h-pack-straat .huis, .h-pack-straat .paal { fill: rgba(4, 8, 34, .42); }
.h-pack-straat .balk { display: none; }
.h-pack-straat .raam { fill: #ffcf6e; opacity: .08; }
.h-pack-straat .raam:nth-of-type(5n+2) { opacity: .7; }
.h-pack-straat .lamp { fill: #ffe2a0; }
.h-pack-demo { position: absolute; right: 14px; top: 14px; z-index: 2; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); color: #fff; font-size: .78rem; font-weight: 600; transition: background .2s; }
.h-pack-vlak:hover .h-pack-demo { background: rgba(255, 255, 255, .26); }

/* zo werkt het: drie huizen (trapgevel, halsgevel, trapgevel) met een geëmailleerd huisnummerbordje */
.h-stappen.hs { list-style: none; margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.h-stappen.hs li { display: block; padding: 0; border: 0; }
.h-stappen.hs h3 { margin: 20px 0 6px; font-size: 1.4rem; line-height: 1.1; text-transform: none; }
.h-stappen.hs p { margin: 0; max-width: 36ch; color: var(--grijs); font-size: .98rem; }
.hs-gevel { position: relative; height: 300px; overflow: hidden; background: radial-gradient(ellipse 75% 62% at 50% 100%, #3d3b8e, var(--nacht) 72%);
  clip-path: polygon(0 100%, 0 26%, 10% 26%, 10% 19%, 20% 19%, 20% 12%, 30% 12%, 30% 5%, 40% 5%, 40% 0, 60% 0, 60% 5%, 70% 5%, 70% 12%, 80% 12%, 80% 19%, 90% 19%, 90% 26%, 100% 26%, 100% 100%); }
.hs li:nth-child(2) .hs-gevel { background: radial-gradient(ellipse 75% 62% at 50% 100%, #1f63c2, var(--blauw) 55%, #08386F);
  clip-path: polygon(0 100%, 0 30%, 16% 30%, 22% 17%, 30% 17%, 30% 3%, 70% 3%, 70% 17%, 78% 17%, 84% 30%, 100% 30%, 100% 100%); }
.hs-nr { position: absolute; left: 50%; top: 9%; z-index: 3; transform: translateX(-50%); display: grid; place-items: center; min-width: 38px; padding: 3px; border-radius: 7px; background: var(--blauw); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6); font: 700 1.15rem/1.55 var(--font-logo, "Inter", Arial, sans-serif); color: #fff; }
.hs-nr::before { content: ''; position: absolute; inset: 3px; border: 2px solid #fff; border-radius: 5px; }
.hs li:nth-child(2) .hs-nr { background: var(--nacht); }
.hs-gevel img { position: absolute; height: auto; filter: drop-shadow(0 18px 20px rgba(3, 6, 28, .55)); }
.hs-a { width: 40%; left: 12%; bottom: -16%; transform: rotate(-9deg); }
.hs-b { width: 40%; right: 12%; bottom: -12%; transform: rotate(7deg); }
.hs-open { width: 46%; left: 27%; bottom: -30%; transform: rotate(-3deg);
  clip-path: polygon(0 13%, 6% 11%, 12% 13.5%, 18% 11%, 24% 13%, 30% 10.5%, 36% 13%, 42% 11%, 48% 13.5%, 54% 11%, 60% 13%, 66% 10.5%, 72% 13%, 78% 11%, 84% 13.5%, 90% 11%, 96% 13%, 100% 11.5%, 100% 100%, 0 100%); }
.hs-uit { width: 34%; left: 33%; bottom: 26%; transform: rotate(4deg); }
.hs-gevel .hs-slab:not(.hs-uit) { width: 42%; left: 18%; bottom: -10%; transform: rotate(-4deg); }
.hs-bod { position: absolute; right: 7%; bottom: 30%; z-index: 2; display: grid; gap: 1px; padding: 9px 13px; border-radius: 10px; background: var(--goud); color: var(--nacht); transform: rotate(3deg); box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .7); }
.hs-bod small { font-size: .72rem; font-weight: 600; }
.hs-bod b { font-size: 1.2rem; }
@media (hover: hover) {
  .hs-gevel img, .hs-bod { transition: transform .5s var(--ease); }
  .hs li:hover .hs-a { transform: rotate(-12deg) translateY(-6px); }
  .hs li:hover .hs-b { transform: rotate(10deg) translateY(-6px); }
  .hs li:hover .hs-uit { transform: rotate(2deg) translateY(-12px); }
  .hs li:hover .hs-bod { transform: rotate(0deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .hs li:hover .hs-gevel img, .hs li:hover .hs-bod { transform: none; } }

@media (max-width: 1000px) {
  .h-lucht::after { background: linear-gradient(180deg, rgba(9, 13, 40, .78) 0%, rgba(9, 13, 40, .42) 38%, rgba(9, 13, 40, .5) 62%, rgba(9, 13, 40, .82) 100%); }
  .h-foto { object-position: 46% 60%; }
}
@media (max-width: 767px) {
  .h-hero { padding: 30px 0 96px; }
  .h-boven { margin-bottom: 12px; font-size: .7rem; }
  .h-straat { height: 80px; }
  .h-packs { padding-top: 40px; gap: 56px; }
  .h-pack-vlak { height: 200px; }
  .h-pack-vlak img { height: 250px; margin-top: -60px; }
  .h-stappen.hs { grid-template-columns: 1fr; gap: 36px; }
  .hs-gevel { height: 270px; }
}
/* v6 bijwerk: de gevels onder de hero recht en zonder kieren, het huisnummerbordje leesbaar, de slab binnen de gevel */
.h-straat g { transform: none; }
.h-straat .huis { stroke: var(--grond); stroke-width: 3; }
.h-straat .paal, .h-straat .lamp { display: none; }
.h-stappen.hs .hs-nr { top: 11%; min-width: 46px; padding: 4px 6px; color: #fff; font: 700 1.3rem/1.5 var(--font-logo, "Inter", Arial, sans-serif); }
.h-stappen.hs .hs-bod { color: var(--nacht); font-size: 1rem; }
.h-stappen.hs .hs-bod small { color: var(--nacht); }
.hs-uit { width: 28%; left: 36%; bottom: 32%; }
@media (max-width: 767px) {
  .hs-gevel { height: 236px; }
  .hs-a, .hs-b { width: 31%; }
  .hs-a { left: 17%; } .hs-b { right: 17%; }
  .hs-open { width: 34%; left: 33%; bottom: -26%; }
  .hs-uit { width: 22%; left: 39%; bottom: 34%; }
  .hs-gevel .hs-slab:not(.hs-uit) { width: 30%; left: 24%; }
  .hs-bod { right: 12%; }
}
.hs-uit { bottom: 21%; }
/* huizenpagina: ruimte boven de packs die boven hun kaart uitsteken */
.h-packs-pagina { padding-top: 96px; }
/* huispagina: de gracht van het pack achter het pack, in de kleur van het huis */
.product.grachtenpand .product-beeld { background: linear-gradient(180deg, rgba(11, 79, 156, .5) 0%, rgba(8, 56, 111, .9) 75%), url(img/sfeer/papiermolensluis-800.webp) 50% 58% / cover; }
.product.villa .product-beeld { background: linear-gradient(180deg, rgba(20, 24, 63, .45) 0%, rgba(13, 16, 44, .93) 75%), url(img/sfeer/papiermolensluis-800.webp) 50% 58% / cover; }

/* =====================================================================================================
   v7 "de slabwand" (26 okt): de hero is een wand van echte slabs die langzaam langs elkaar schuiven (zoals een
   etalage vol slabs), het pack ervoor in een warme gloed; de packs staan direct onder de hero, met hun duurste
   slabs als waaier erachter.
   ===================================================================================================== */
.h-hero { background: radial-gradient(ellipse 55% 75% at 72% 42%, #262d78 0%, #141a4a 52%, #0a0d27 100%); padding: 84px 0 164px; }
.h-lucht { overflow: hidden; }
.h-lucht::after { background:
  linear-gradient(90deg, #0b0e2b 0%, rgba(11, 14, 43, .96) 30%, rgba(11, 14, 43, .55) 48%, rgba(11, 14, 43, 0) 66%),
  radial-gradient(ellipse 26% 40% at 70% 50%, rgba(11, 14, 43, .7), transparent 70%),
  linear-gradient(180deg, rgba(11, 14, 43, .7) 0%, transparent 18%, transparent 74%, rgba(11, 14, 43, .8) 100%); }
.h-muur { position: absolute; top: -34%; bottom: -34%; right: -4%; width: 66%; display: flex; gap: 22px; transform: rotate(-13deg); transform-origin: 60% 50%; }
.hm-kol { flex: 0 0 168px; overflow: hidden; }
.hm-baan { display: grid; gap: 22px; padding-bottom: 22px; animation: hm-loop var(--hm-t, 70s) linear infinite; will-change: transform; }
.hm-kol:nth-child(even) .hm-baan { animation-direction: reverse; }
.hm-baan img { display: block; width: 100%; height: auto; border-radius: 6px; opacity: .92; }
@keyframes hm-loop { to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .hm-baan { animation: none; } }

/* het pack: los van de wand door een warme gloed en een donkere schaduw eronder */
.h-podium::before { inset: 4% -14% -4%; background: radial-gradient(closest-side, rgba(255, 196, 110, .38), rgba(255, 160, 80, .14) 50%, transparent 74%); }
.h-pack-foto, .etalage-doek { filter: drop-shadow(0 40px 40px rgba(3, 5, 22, .75)); }
.h-hero h1 { font-size: clamp(3.2rem, 6vw, 5.8rem); }
.h-boven { display: inline-flex; align-items: center; gap: 10px; }
.h-boven::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--goud); box-shadow: 0 0 0 4px rgba(242, 193, 78, .18); }

/* huiskaarten direct onder de hero: minder ruimte boven, de waaier met de duurste slabs achter het pack */
#packs { padding-top: 56px; }
.h-pack-hits { position: absolute; left: 50%; bottom: 34px; width: 0; height: 0; z-index: 0; }
.h-pack-hits img { position: absolute; bottom: 0; width: 112px; height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 14px 16px rgba(3, 6, 28, .5)); transition: transform .5s var(--ease); }
.h-pack-hits img:nth-child(1) { transform: translateX(-178px) rotate(-14deg); }
.h-pack-hits img:nth-child(2) { transform: translateX(62px) rotate(13deg); }
.h-pack-hits img:nth-child(3) { transform: translateX(-138px) translateY(-26px) rotate(-5deg) scale(.86); z-index: -1; }
.h-pack-vlak:hover .h-pack-hits img:nth-child(1) { transform: translateX(-196px) rotate(-18deg); }
.h-pack-vlak:hover .h-pack-hits img:nth-child(2) { transform: translateX(80px) rotate(17deg); }
.h-pack-vlak img.h-pack-hits, .h-pack-vlak > img { z-index: 1; }
.h-pack-vlak .h-pack-hits img { height: auto; margin: 0; }

@media (max-width: 1000px) {
  .h-muur { width: 130%; right: -40%; opacity: .5; }
  .h-lucht::after { background: linear-gradient(180deg, rgba(11, 14, 43, .9) 0%, rgba(11, 14, 43, .55) 30%, rgba(11, 14, 43, .55) 60%, rgba(11, 14, 43, .92) 100%); }
}
@media (max-width: 767px) {
  .h-hero { padding: 30px 0 100px; }
  .h-muur { top: -10%; bottom: -10%; width: 170%; right: -55%; gap: 14px; }
  .hm-kol { flex-basis: 112px; }
  .hm-baan { gap: 14px; padding-bottom: 14px; }
  .h-hero h1 { font-size: clamp(2.4rem, 10.6vw, 3.1rem); }
  #packs { padding-top: 40px; }
  .h-pack-hits { bottom: 26px; }
  .h-pack-hits img { width: 86px; }
  .h-pack-hits img:nth-child(1) { transform: translateX(-138px) rotate(-14deg); }
  .h-pack-hits img:nth-child(2) { transform: translateX(52px) rotate(13deg); }
  .h-pack-hits img:nth-child(3) { transform: translateX(-108px) translateY(-20px) rotate(-5deg) scale(.86); }
}
.h-pack-vlak .h-pack-hits img { max-width: none; }

/* v7: "Probeer gratis" links, zodat het niet over een slab uit de waaier valt */
.h-pack-demo { right: auto; left: 14px; }

/* elke pagina begint in de avondstraat: een donkere band over de volle breedte met onderaan een rij gevels */
html, body { overflow-x: clip; }
.pagina-kop { position: relative; isolation: isolate; max-width: none; padding: 56px 0 104px; margin-bottom: 8px; color: #fff; }
.pagina-kop > * { max-width: 62ch; }
.pagina-kop::before { content: ''; position: absolute; z-index: -2; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: radial-gradient(ellipse 50% 130% at 82% 0%, #2a3180 0%, #161c4e 50%, #0a0d27 100%); }
.pagina-kop::after { content: ''; position: absolute; z-index: -1; left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: -1px; height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 44'%3E%3Cpath fill='%23EEF1F5' d='M0 44V24h8v-6h8v-6h8v-6h12v6h8v6h8v6h8v20zM60 44V18l26-12 26 12v26zM112 44V26h12l6-8h6V8h14v10h6l6 8h12v18zM174 44V16q32-16 64 0v28zM238 44V22h10v-6h10v-6h14v6h10v6h18v22z'/%3E%3C/svg%3E") repeat-x left bottom / 300px 44px; }
.pagina-kop h1 { color: #fff; }
.pagina-kop p { color: rgba(255, 255, 255, .8); }
.pagina-kop a { color: #fff; }
@media (max-width: 767px) { .pagina-kop { padding: 36px 0 84px; } .pagina-kop::after { height: 34px; background-size: 232px 34px; } }
/* Wijkagent: formulier en de vaakste vragen naast elkaar */
.twee-kol { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.kol-zij h2 { margin: 4px 0 10px; font-size: 1.45rem; text-transform: none; }
.kol-zij .vragen { margin-bottom: 14px; }
/* Echtheid: het formulier links, rechts een waaier van de editie met de plek van de code */
.sectie.echtheid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: start; }
.echtheid > .echt-form, .echtheid > .echt-uitslag { grid-column: 1; }
.echt-voorbeeld { grid-column: 2; grid-row: 1 / span 2; position: relative; margin: 0; height: 330px; }
.echt-voorbeeld .ed-slab { position: absolute; left: 50%; top: 10px; width: 150px; transform-origin: 50% 110%; filter: drop-shadow(0 16px 20px rgba(20, 24, 63, .3)); }
.echt-voorbeeld .ed-slab:nth-child(1) { transform: translateX(-50%) rotate(-24deg); }
.echt-voorbeeld .ed-slab:nth-child(2) { transform: translateX(-50%) rotate(-12deg); }
.echt-voorbeeld .ed-slab:nth-child(3) { transform: translateX(-50%) rotate(0deg); }
.echt-voorbeeld .ed-slab:nth-child(4) { transform: translateX(-50%) rotate(12deg); }
.echt-voorbeeld .ed-slab:nth-child(5) { transform: translateX(-50%) rotate(24deg); }
.echt-voorbeeld .ed-slab:nth-child(1) { z-index: 5; } .echt-voorbeeld .ed-slab:nth-child(2) { z-index: 4; } .echt-voorbeeld .ed-slab:nth-child(3) { z-index: 3; }
.echt-voorbeeld .ed-slab { background: none; }
.echt-voorbeeld figcaption { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; color: var(--grijs); font-size: .9rem; }
/* 404: een huisnummerbordje dat niet bestaat */
.nr-404 { position: relative; display: inline-grid; place-items: center; padding: 8px 26px; border-radius: 14px; background: var(--blauw); color: #fff; font: 700 clamp(3.2rem, 8vw, 5rem)/1.1 var(--font-logo, "Inter", Arial, sans-serif); transform: rotate(-6deg); box-shadow: 0 24px 40px -20px rgba(11, 79, 156, .7); margin-bottom: 18px; }
.nr-404::before { content: ''; position: absolute; inset: 6px; border: 3px solid #fff; border-radius: 9px; }
.nr-404::after { content: ''; position: absolute; top: 50%; left: -10%; right: -10%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--steen); transform: rotate(-14deg); }
@media (max-width: 900px) {
  .twee-kol, .sectie.echtheid { grid-template-columns: 1fr; }
  .echt-voorbeeld { grid-column: 1; grid-row: auto; height: 290px; }
  .echt-voorbeeld .ed-slab { width: 124px; }
}
.pagina-kop { padding-bottom: 116px; }
.pagina-kop::after { height: 62px; background-size: 423px 62px; }
@media (max-width: 767px) { .pagina-kop { padding-bottom: 88px; } .pagina-kop::after { height: 42px; background-size: 286px 42px; } }
@media (max-width: 1000px) {
  .h-muur { opacity: .75; }
  .h-lucht::after { background: linear-gradient(180deg, rgba(11, 14, 43, .9) 0%, rgba(11, 14, 43, .4) 26%, rgba(11, 14, 43, .4) 56%, rgba(11, 14, 43, .94) 80%); }
}
@media (max-width: 767px) { .h-pack-demo { display: none; } }
/* de wand loopt door tot de rechterrand, ook op brede schermen (9 kolommen; wat buiten beeld valt, wordt afgesneden) */
.h-muur { left: 36%; right: auto; width: auto; justify-content: flex-start; }
.h-straat svg { height: 118px; }
@media (max-width: 1000px) { .h-muur { left: -30%; right: auto; width: auto; } }
@media (max-width: 767px) { .h-muur { left: -40%; } .h-straat svg { height: 80px; } }
/* gevels onder de hero: groter getekend, zodat het op brede schermen een straat blijft en geen kartelrand */
.h-straat { height: 150px; }
.h-straat svg { height: 150px; }
.h-hero { padding-bottom: 190px; }
@media (max-width: 767px) { .h-straat, .h-straat svg { height: 84px; } .h-hero { padding-bottom: 104px; } }

/* vragen op de homepage: kop links, de vragen rechts */
.h-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.h-faq-kop h2 { margin: 0; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.05; text-transform: none; }
/* afsluiter: beide packs in het donker, net boven de gevels van de footer */
.h-slot { position: relative; isolation: isolate; overflow: hidden; margin-top: 96px; padding: 72px 0 64px; color: #fff; background: radial-gradient(ellipse 60% 90% at 70% 60%, #2a3180 0%, #151a4b 55%, #0b0e2b 100%); }
.h-slot-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.h-slot h2 { margin: 0; color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: .98; text-transform: uppercase; max-width: 12ch; }
.h-slot-tekst p { margin: 18px 0 0; max-width: 42ch; color: rgba(255, 255, 255, .8); font-size: 1.08rem; }
.h-slot-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.h-slot-pack { display: grid; justify-items: center; gap: 6px; text-align: center; }
.h-slot-pack b { font-family: var(--font-kop); font-size: 1.35rem; text-transform: uppercase; margin-top: 8px; }
.h-slot-pack .mono { color: var(--goud); font-size: 1.1rem; margin-bottom: 10px; }
.h-slot-beeld { border: 0; padding: 0; background: none; cursor: pointer; }
.h-slot-beeld img { display: block; width: min(100%, 210px); height: auto; filter: drop-shadow(0 30px 30px rgba(2, 4, 20, .7)); transform: rotate(-4deg); transition: transform .45s var(--ease); }
.h-slot-pack:nth-child(2) .h-slot-beeld img { transform: rotate(4deg); }
.h-slot-beeld:hover img, .h-slot-beeld:focus-visible img { transform: rotate(0) translateY(-8px) scale(1.03); }
.h-slot { background: linear-gradient(180deg, transparent 55%, #0b0e2b 100%), radial-gradient(ellipse 60% 90% at 70% 55%, #2a3180 0%, #151a4b 55%, #0b0e2b 100%); }
/* de afsluiter loopt over in de avondstraat van de footer: geen lichte strook ertussen */
body:has(.h-slot) .voet { margin-top: 0; }
#view:has(> .h-slot) { padding-bottom: 0; }
/* het saldovak blijft donkere tekst op wit, ook in de donkere kop */
.adres-kop .portemonnee { color: var(--inkt); }
/* gevelrand: alleen hele schaalstappen (1,5x en 1x), anders ontstaan er naadjes tussen de tegels */
.pagina-kop::after, .adres-kop::after { height: 66px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 44'%3E%3Cpath fill='%23EEF1F5' d='M0 44V24h8v-6h8v-6h8v-6h12v6h8v6h8v6h8v20zM60 44V18l26-12 26 12v26zM112 44V26h12l6-8h6V8h14v10h6l6 8h12v18zM174 44V16q32-16 64 0v28zM238 44V22h10v-6h10v-6h14v6h10v6h18v22z'/%3E%3C/svg%3E") repeat-x left bottom / 450px 66px,
    linear-gradient(var(--grond), var(--grond)) left bottom / 100% 30px no-repeat; }
@media (max-width: 767px) { .pagina-kop::after, .adres-kop::after { height: 44px; background-size: 300px 44px, 100% 20px; } }
body:has(.h-slot) .voet-skyline { background: #0b0e2b; }
@media (max-width: 900px) { .h-faq, .h-slot-in { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 767px) { .h-slot { margin-top: 64px; padding: 52px 0 44px; } .h-slot-beeld img { width: min(100%, 150px); } .h-slot-pack .knop { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .h-slot-beeld:hover img { transform: none; } }

/* Jouw Adres: je eigen huis staat in de avondstraat, net als de kop van elke andere pagina */
.adres-kop { position: relative; isolation: isolate; overflow: visible; margin-top: 0; padding: 48px 0 112px; border: 0; color: #fff; }
.adres-kop::before { content: ''; position: absolute; z-index: -2; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: radial-gradient(ellipse 50% 130% at 82% 0%, #2a3180 0%, #161c4e 50%, #0a0d27 100%); }
.adres-kop::after { content: ''; position: absolute; z-index: -1; left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: -1px; height: 62px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 44'%3E%3Cpath fill='%23EEF1F5' d='M0 44V24h8v-6h8v-6h8v-6h12v6h8v6h8v6h8v20zM60 44V18l26-12 26 12v26zM112 44V26h12l6-8h6V8h14v10h6l6 8h12v18zM174 44V16q32-16 64 0v28zM238 44V22h10v-6h10v-6h14v6h10v6h18v22z'/%3E%3C/svg%3E") repeat-x left bottom / 423px 62px; }
.adres-kop h1 { color: #fff; }
.adres-sub, .adres-sub span { color: rgba(255, 255, 255, .82); }
.adres-huis svg { filter: drop-shadow(0 0 28px rgba(242, 193, 78, .35)) drop-shadow(0 0 2px rgba(255, 255, 255, .5)); }
@media (max-width: 900px) { .adres-kop .portemonnee { border-top: 0; } }
@media (max-width: 767px) { .adres-kop { padding: 28px 0 84px; } .adres-kop::after { height: 42px; background-size: 286px 42px; } }

/* pijlen bij de rijen met slabs */
.h-kop-rechts { display: flex; align-items: center; gap: 20px; }
.rail-pijlen { display: flex; gap: 8px; }
.rail-pijl { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--lijn-2); background: #fff; color: var(--inkt); cursor: pointer; transition: transform .2s var(--ease), border-color .2s, background .2s; }
.rail-pijl:hover { border-color: var(--inkt); transform: translateY(-1px); }
.h-vitrine .rail-pijl { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
.h-vitrine .rail-pijl:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
@media (max-width: 767px), (hover: none) { .rail-pijlen { display: none; } }
/* huispagina: het pack, de kansen en de koopknop in dezelfde avondband als de homepage, onderaan de gevels */
.product { position: relative; isolation: isolate; padding: 52px 0 128px; color: #fff; }
.product::before { content: ''; position: absolute; z-index: -2; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: radial-gradient(ellipse 55% 90% at 28% 45%, #2a3180 0%, #161c4e 50%, #0a0d27 100%); }
.product.grachtenpand::before { background: radial-gradient(ellipse 55% 90% at 28% 45%, #1d5cb4 0%, #0f3a78 48%, #0a1a3e 100%); }
.product::after { content: ''; position: absolute; z-index: -1; left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: -1px; height: 66px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 44'%3E%3Cpath fill='%23EEF1F5' d='M0 44V24h8v-6h8v-6h8v-6h12v6h8v6h8v6h8v20zM60 44V18l26-12 26 12v26zM112 44V26h12l6-8h6V8h14v10h6l6 8h12v18zM174 44V16q32-16 64 0v28zM238 44V22h10v-6h10v-6h14v6h10v6h18v22z'/%3E%3C/svg%3E") repeat-x left bottom / 450px 66px,
    linear-gradient(var(--grond), var(--grond)) left bottom / 100% 30px no-repeat; }
.product-beeld { margin-top: 0; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.product-info h1 { color: #fff; }
.product-tekst { color: rgba(255, 255, 255, .78); }
.product .huis-top { color: rgba(255, 255, 255, .78); }
.product .huis-top b { color: #fff; }
.product .huis-top .mono, .product .huis-top .ht-slab .mono { color: var(--goud); }
.product .w-odds, .product .w-odds li { border-color: rgba(255, 255, 255, .14); }
.product .w-odds-naam, .product .w-odds-kans { color: #fff; }
.product .w-odds-waarde { color: rgba(255, 255, 255, .7); }
.product .w-odds li.is-sleutel .w-odds-naam { color: var(--goud); }
.product .w-odds-bonus .w-odds-naam { color: #d9c7ff; }
.product .koop-rij .bedrag { color: #fff; }
.product .knop-lijn { color: #fff; border-color: rgba(255, 255, 255, .35); }
.product .knop-lijn:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.product .product-feiten { color: rgba(255, 255, 255, .72); }
.product .product-feiten b { color: #fff; }
.product :focus-visible { outline-color: #fff; }
.product + * , .product ~ .sectie:first-of-type { margin-top: 0; }
@media (max-width: 767px) { .product { padding: 28px 0 96px; } .product::after { height: 44px; background-size: 300px 44px, 100% 20px; } }
@media (max-width: 767px) {
  .h-slot-packs { gap: 14px; }
  .h-slot-pack .knop { white-space: normal; min-height: 48px; padding: 8px 10px; font-size: .9rem; line-height: 1.2; text-align: center; }
  .h-slot-pack b { font-size: 1.1rem; }
}
/* Buurtapp: slabs als duimpje in de lijst, rechts de duurste pull groot */
.buurt-lijst .duim.is-slab { width: 40px; height: 67px; object-fit: contain; border-radius: 3px; box-shadow: none; filter: drop-shadow(0 4px 6px rgba(20, 24, 63, .3)); }
.buurt-lijst li { padding-block: 12px; }
.buurt-zij { display: grid; gap: 20px; align-content: start; }
.buurt-top { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 18px; align-items: center; padding: 22px; border-radius: var(--r-vlak); color: #fff; background: radial-gradient(ellipse 80% 90% at 85% 40%, #2a3180, #141a4a 60%, #0a0d27); box-shadow: var(--schaduw-2); }
.buurt-top figcaption { display: grid; gap: 4px; }
.buurt-top small { color: var(--goud); font-weight: 600; font-size: .78rem; letter-spacing: .04em; }
.buurt-top b { font-family: var(--font-kop); font-size: 1.35rem; line-height: 1.1; }
.buurt-top span { color: rgba(255, 255, 255, .72); font-size: .88rem; }
.buurt-top .mono { margin-top: 6px; color: #fff; font-size: 1.5rem; }
.buurt-top .slab { transform: rotate(4deg); filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .5)); }
.buurt-leeg { display: flex; gap: 22px; align-items: center; padding: 26px 28px; }
.buurt-leeg .leeg { margin: 0 0 14px; color: var(--grijs); max-width: 46ch; }
.buurt-leeg .leeg b { color: var(--inkt); }
.buurt-leeg .lege-acties { margin: 0; }
.bl-lantaarn { flex: none; }
/* afrekenen: de kop van het venster in de kleur van het huis, met het pack erin */
.co-kop { margin: -24px -24px 18px; padding: 22px 72px 22px 24px; color: #fff; border-radius: 13px 13px 0 0; background: radial-gradient(ellipse 70% 120% at 15% 70%, #3a3584, var(--nacht) 62%, #0d102c); }
.co-kop.grachtenpand { background: radial-gradient(ellipse 70% 120% at 15% 70%, #1e63c4, var(--blauw) 58%, #08386F); }
.co-kop h2 { color: #fff; }
.co-kop .co-prijs { color: var(--goud); }
.co-kop .stap-regel { color: rgba(255, 255, 255, .75); }
.co-kop .co-pack { width: 84px; transform: rotate(-5deg); filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .55)); }
@media (max-width: 767px) { .co-kop { margin: -20px -16px 16px; padding: 20px 64px 18px 16px; border-radius: 17px 17px 0 0; } .co-kop .co-pack { width: 70px; } }
/* de Slabstraat-editie op de homepage: onze eigen kaarten op een warme gouden band */
.editie-strook { margin-top: 96px; padding: 72px 0 64px; background: radial-gradient(ellipse 60% 80% at 80% 0%, rgba(242, 193, 78, .28), transparent 70%), linear-gradient(180deg, #fbf6e9, #f5ecd6); border-top: 1px solid #efdfb8; border-bottom: 1px solid #efdfb8; }
.editie-strook .editie-kop { border-bottom-color: #e6d3a6; }
.editie-strook .editie-kop p, .editie-strook .editie-set { color: #5c5040; }
.editie-strook .ed-item figcaption small { color: #6b5f4c; }
.editie-strook .verzamelaars .mono, .editie-strook .editie-set b, .verzamelaars li .mono { color: var(--goud-tekst); }
.editie-strook .verzamelaars li::before { color: #6b5f4c; }
@media (max-width: 767px) { .editie-strook { margin-top: 64px; padding: 52px 0 44px; } }
@media (min-width: 768px) and (max-width: 1000px) { .editie-strook .editie-rail { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 12px; } }
/* lage telefoons (iPhone SE e.d.): pack kleiner zodat de koopknop in het eerste scherm staat */
@media (max-width: 767px) and (max-height: 760px) {
  .h-hero { padding-top: 22px; }
  .h-podium { width: min(54vw, 210px); }
  .h-pack { margin-top: 6px; gap: 10px; }
  .h-huis { padding: 6px 12px; }
  .h-cta { margin-top: 12px; }
}
/* live-balk bovenin de hero, over de wand heen */
.h-hero > .w-ticker { position: absolute; top: 0; left: 0; right: 0; z-index: 3; background: rgba(8, 10, 32, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.h-hero > .w-ticker .w-ticker-kop { background: rgba(8, 10, 32, .92); box-shadow: 12px 0 18px rgba(8, 10, 32, .92); }
/* op een telefoon is de ruimte boven de kop te krap; daar staan de pulls in "Net uit de packs" */
@media (max-width: 767px) { .h-hero > .w-ticker { display: none; } }
/* statische hero in index.html (eerste weergave vóór app.js), alleen op de homepage */
html:not(.thuis) .h-voor { display: none; }
html.thuis #view > .laad { display: none; }
.h-voor .h-cta { min-height: 52px; }
/* plek voor de huiskeuze onder het pack, die pas met app.js komt */
.h-voor .h-pack::after { content: ''; display: block; height: 58px; }
@media (max-width: 767px) { .h-voor .h-cta { min-height: 118px; } }
/* Gevel van Roem: een donkere gevel met een gouden lijst, de beste pulls erop als ingelijste stukken */
#view .gevel .vlak { position: relative; padding: 34px 32px 30px; border: 0; border-radius: var(--r-vlak); color: #fff; background: radial-gradient(ellipse 70% 90% at 50% 0%, #2a3180, #141a4a 58%, #0a0d27); box-shadow: inset 0 0 0 1px rgba(242, 193, 78, .35), inset 0 0 0 6px rgba(10, 13, 39, .9), inset 0 0 0 7px rgba(242, 193, 78, .5), var(--schaduw-2); }
#view .gevel h2 { color: var(--goud); text-align: center; letter-spacing: .02em; margin-bottom: 18px; }
.gevel .slabs { display: flex; flex-wrap: wrap; justify-content: center; align-items: end; gap: 28px 36px; }
.gevel .slab-kaart { width: 156px; }
.gevel .slab-kaart .slab { height: 250px; display: flex; align-items: end; justify-content: center; }
.gevel .slab-kaart .slab img { max-height: 250px; width: auto; max-width: 100%; }
.gevel .slab-kaart p { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 10px 0 2px; }
/* huispagina op de telefoon: per verdieping een veegbare rij in plaats van een lange lijst onder elkaar */
@media (max-width: 767px) {
  .verd-raster { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42vw; overflow-x: auto; margin-inline: -16px; padding: 4px 16px 12px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .verd-raster > * { scroll-snap-align: start; }
  .verd { contain-intrinsic-size: auto 520px; }
}
.gevel .slab-kaart p, .gevel .slab-kaart .nw { color: #fff; }
.gevel .slab-kaart b { color: var(--goud); }
.gevel .slab-kaart .st, .gevel .noot { color: rgba(255, 255, 255, .7); }
.gevel .eerste-bewoners { color: rgba(255, 255, 255, .75); text-align: center; }
.gevel .eerste-bewoners b { color: var(--goud); }
/* slabvenster: alleen de achterkant als duimpje (de voorkant staat er groot boven) */
.psa-fotos.is-een { grid-template-columns: minmax(0, 120px); }
.psa-fotos img { background: transparent; border: 0; }
/* Jouw Adres zonder account: rechts wat je krijgt, met een huisje dat nog op een nummer wacht */
.welkom-zij { display: grid; gap: 14px; align-content: start; padding: 28px; border-radius: var(--r-vlak); color: #fff; background: radial-gradient(ellipse 80% 70% at 85% 0%, #2a3180, #141a4a 60%, #0a0d27); box-shadow: var(--schaduw-2); }
.welkom-huis svg { display: block; width: 84px; height: auto; filter: drop-shadow(0 0 22px rgba(242, 193, 78, .35)); }
.welkom-zij h2 { margin: 0; color: #fff; font-size: 1.5rem; text-transform: none; }
.welkom-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.welkom-lijst li { display: grid; gap: 2px; padding-left: 18px; position: relative; }
.welkom-lijst li::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 2px; background: var(--goud); }
.welkom-lijst b { font-family: var(--font-kop); font-size: 1.1rem; }
.welkom-lijst span { color: rgba(255, 255, 255, .78); font-size: .95rem; }
/* snelkoppelingen op lange pagina's (Huisregels) */
.spring-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 4px; }
.spring { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--lijn-2); background: #fff; color: var(--inkt); font: 600 .88rem/1.2 var(--font); cursor: pointer; transition: border-color .2s, transform .2s var(--ease); }
.spring:hover { border-color: var(--inkt); transform: translateY(-1px); }
[id^="hr-"] { scroll-margin-top: 84px; }
@media (max-width: 767px) { .spring-nav { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; } .spring { flex: none; } }
/* net uit de packs: wie, wanneer, wat */
.h-pull-wie { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 2px; color: var(--grijs); font-size: .78rem; font-weight: 600; }
.h-pull-wie time { font-family: var(--font-mono); font-weight: 500; }
/* de wand verschijnt zacht zodra hij gevuld is */
.hm-kol { transition: opacity .9s ease-out; }
.h-muur:not(.aan) .hm-kol { opacity: 0; }
/* buiten beeld (weggescrold) of tab op de achtergrond: de wand staat stil, dat spaart de batterij */
.h-muur.stil .hm-baan { animation-play-state: paused; }
/* ligt nu bij ons: de echte foto van elk exemplaar, met een label dat het een foto is */
.h-foto-echt { position: relative; display: block; margin-bottom: 12px; transition: transform .35s var(--ease); }
.h-foto-echt img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 18px rgba(20, 24, 63, .28)); }
.h-slab-echt:hover .h-foto-echt { transform: translateY(-6px) rotate(-1deg); }
.h-foto-label { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--inkt); font-size: .7rem; font-weight: 600; box-shadow: 0 4px 10px -4px rgba(20, 24, 63, .4); }
.h-foto-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #1f9d5c; }
@media (prefers-reduced-motion: reduce) { .h-slab-echt:hover .h-foto-echt { transform: none; } }
/* diepte in de hero: de wand schuift tegen de muis in, het pack iets mee */
.h-muur { translate: calc(var(--mx, 0) * -26px) calc(var(--my, 0) * -18px); transition: translate .5s cubic-bezier(.2, .8, .2, 1); }
.h-podium { translate: calc(var(--mx, 0) * 10px) calc(var(--my, 0) * 8px); transition: translate .5s cubic-bezier(.2, .8, .2, 1); }

/* =====================================================================================================
   v9 "premium nacht" (26 okt): de homepage helemaal in de avond (gebruiker: "veels te wit"). Alleen op de homepage
   (html.thuis, gezet door het script in index.html): diepe nachtblauwe grond, donkere glazen kaarten met fijne
   randen, goud als accent, en de straat met brandende ramen tussen de hero en de rest.
   ===================================================================================================== */
html.thuis { --thuis-bg: #080b22; --thuis-bg-2: #0c1030; --thuis-vlak: rgba(255, 255, 255, .045); --thuis-lijn: rgba(255, 255, 255, .1); --thuis-tekst-2: rgba(232, 236, 248, .72); color-scheme: dark; }
html.thuis body { background: var(--thuis-bg); color: #eef0f8; }
html.thuis #view { background: var(--thuis-bg); }

/* kop: donker glas boven de nacht */
html.thuis .kop { background: rgba(8, 11, 34, .82); border-bottom-color: rgba(255, 255, 255, .08); }
html.thuis .menu a { color: rgba(232, 236, 248, .78); }
html.thuis .menu a:hover, html.thuis .menu a[aria-current="page"] { color: #fff; }
html.thuis .saldo-pil { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #fff; }
html.thuis .saldo-pil span { color: rgba(232, 236, 248, .7); }
html.thuis .hamburger { background: transparent; border-color: rgba(255, 255, 255, .25); color: #fff; }
html.thuis .hamburger i { background: #fff; }
html.thuis :focus-visible { outline-color: #fff; }
.h-foto-label { white-space: nowrap; }
@media (max-width: 767px) { .h-foto-label { font-size: .62rem; padding: 2px 7px 2px 6px; left: 4px; bottom: 4px; } }
@media (max-width: 767px) {
  html.thuis .menu { background: #0c1030; border-bottom-color: rgba(255, 255, 255, .1); }
  html.thuis .menu a { color: #fff; border-bottom-color: rgba(255, 255, 255, .1); }
}

/* hero: de straat onderaan met brandende ramen, in de kleur van de nacht eronder */
html.thuis .h-hero { background: radial-gradient(ellipse 55% 75% at 72% 42%, #262d78 0%, #141a4a 52%, #0a0d27 100%); }
html.thuis .h-straat .huis { fill: #10153d; stroke: #10153d; }
html.thuis .h-straat .raam { display: block; fill: #ffcf6e; opacity: .1; }
html.thuis .h-straat .raam:nth-of-type(4n+1), html.thuis .h-straat .raam:nth-of-type(7n+3) { opacity: .9; }
html.thuis .h-straat .paal { display: none; }
html.thuis .h-straat::after { background: var(--thuis-bg); }

/* koppen en teksten op donker */
html.thuis .h-kop h2, html.thuis .h-faq-kop h2, html.thuis .editie-kop h2 { color: #fff; }
html.thuis .h-kop-sub { color: var(--thuis-tekst-2); }
html.thuis .h-meer { color: #fff; }
html.thuis .h-slab-naam { color: #fff; }
html.thuis .h-slab-sub, html.thuis .h-pull-wie { color: var(--thuis-tekst-2); }
html.thuis .h-slab-w { color: var(--goud); }
html.thuis .link { color: #ffd986; }
html.thuis .rail-pijl { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); color: #fff; }
html.thuis .rail-pijl:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
html.thuis .h-rail { scrollbar-color: #2c3370 transparent; }
html.thuis .h-foto-echt img { filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .6)); }

/* huiskaarten: donker glas met een gouden randje als je erover gaat */
html.thuis .h-pack-kaart { background: linear-gradient(180deg, #121848 0%, #0d1134 100%); box-shadow: 0 0 0 1px var(--thuis-lijn), 0 40px 80px -40px rgba(0, 0, 0, .9); }
@media (hover: hover) { html.thuis .h-pack-kaart:hover { box-shadow: 0 0 0 1px rgba(242, 193, 78, .45), 0 40px 90px -40px rgba(0, 0, 0, .95), 0 0 60px -20px rgba(242, 193, 78, .25); } }
html.thuis .h-pack-kop h3, html.thuis .h-pack-kop h3 a, html.thuis .h-prijs { color: #fff; }
html.thuis .h-pack-sub { color: var(--thuis-tekst-2); }
html.thuis .h-mk { background: rgba(242, 193, 78, .08); border-color: rgba(242, 193, 78, .3); }
html.thuis .h-mk span { color: var(--goud); }
html.thuis .h-mk b { color: #fff; }
html.thuis .h-mk b .mono { color: var(--goud); }
html.thuis .w-odds, html.thuis .w-odds li { border-color: var(--thuis-lijn); }
html.thuis .w-odds-naam, html.thuis .w-odds-kans { color: #fff; }
html.thuis .w-odds-waarde { color: var(--thuis-tekst-2); }
html.thuis .w-odds li.is-sleutel .w-odds-naam { color: var(--goud); }
html.thuis .w-odds-bonus .w-odds-naam { color: #d9c7ff; }
html.thuis .knop-lijn { color: #fff; border-color: rgba(255, 255, 255, .28); }
html.thuis .knop-lijn:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }

/* de vitrine en de afsluiter een tint dieper, zodat de secties van elkaar loskomen */
html.thuis .h-vitrine { background: #05071a; border-block: 1px solid rgba(255, 255, 255, .05); }

/* zo werkt het: de geveltjes lichten op tegen de nacht */
html.thuis .h-stappen.hs h3 { color: #fff; }
html.thuis .h-stappen.hs p { color: var(--thuis-tekst-2); }
html.thuis .hs-gevel { background: radial-gradient(ellipse 75% 62% at 50% 100%, #4a48a8, #1c2258 72%); }
html.thuis .hs li:nth-child(2) .hs-gevel { background: radial-gradient(ellipse 75% 62% at 50% 100%, #2a74d8, #0e4a9a 55%, #0a2f66); }

/* de Slabstraat-editie: een gouden gloed in de nacht */
html.thuis .editie-strook { background: radial-gradient(ellipse 60% 90% at 80% 0%, rgba(242, 193, 78, .16), transparent 70%), linear-gradient(180deg, #100f22, #0b0b1a); border-color: rgba(242, 193, 78, .22); }
html.thuis .editie-strook .editie-kop { border-bottom-color: rgba(242, 193, 78, .2); }
html.thuis .editie-strook .editie-kop p, html.thuis .editie-strook .editie-set { color: var(--thuis-tekst-2); }
html.thuis .editie-strook .ed-item figcaption b { color: #fff; }
html.thuis .editie-strook .ed-item figcaption small { color: var(--thuis-tekst-2); }
html.thuis .editie-strook .ed-item .beloning b, html.thuis .editie-strook .editie-set b, html.thuis .editie-strook .verzamelaars .mono { color: var(--goud); }
html.thuis .editie-strook .verzamelaars, html.thuis .editie-strook .verzamelaars h3 { color: #fff; }
html.thuis .editie-strook .verzamelaars li::before { color: var(--thuis-tekst-2); }
html.thuis .editie-strook .ed-item .chip { background: rgba(255, 255, 255, .08); color: #fff; }

/* vragen */
html.thuis .vraag { border-color: var(--thuis-lijn); }
html.thuis .vraag summary { color: #fff; }
html.thuis .vraag p { color: var(--thuis-tekst-2); }

/* footer: de straat loopt door in dezelfde nacht */
html.thuis .voet-skyline { background: var(--thuis-bg); }
html.thuis .voet { background: #0c1030; }

/* =====================================================================================================
   v10 "premium nacht overal" (26 okt): de hele site in de avond, zoals de homepage (gebruiker: "veels te wit").
   De kleurtokens worden nacht; lichte eilanden (witte knoppen, het slablabel, de actieve huisknop) krijgen hun
   eigen donkere teksttokens terug. Wat in v9 alleen voor de homepage gold (html.thuis), geldt nu overal.
   ===================================================================================================== */
:root {
  --grond: #080b22; --wit: #10153a; --vlak-2: #161c48; --lijn: rgba(255, 255, 255, .1); --lijn-2: rgba(255, 255, 255, .2);
  --inkt: #eef0f8; --grijs: #aab1c9; --goud-tekst: #F2C14E; --blauw-tekst: #9cc2ff;
  --thuis-bg: #080b22; --thuis-vlak: rgba(255, 255, 255, .045); --thuis-lijn: rgba(255, 255, 255, .1); --thuis-tekst-2: rgba(232, 236, 248, .72);
  --schaduw-1: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 24px -14px rgba(0, 0, 0, .7);
  --schaduw-2: 0 0 0 1px rgba(255, 255, 255, .06), 0 28px 56px -32px rgba(0, 0, 0, .9);
  color-scheme: dark;
}
.rip, .feest, .w-ticker, .h-vitrine { color-scheme: dark; }
html { scrollbar-color: #2c3370 var(--grond); }
::selection { background: rgba(242, 193, 78, .4); color: #fff; }
/* lichte eilanden: donkere tekst */
.knop-wit, .h-huis.is-actief, .slab, .s-label, .keuze .knop, .fb-paneel { --inkt: #14183F; --grijs: #4f566b; --lijn: #d9dfe8; --wit: #fff; }
.knop-wit { color: #14183F; }

/* kop: donker glas, op elke pagina */
.kop { background: rgba(8, 11, 34, .85); border-bottom-color: rgba(255, 255, 255, .08); }
.menu a { color: rgba(232, 236, 248, .78); }
.menu a:hover, .menu a[aria-current="page"] { color: #fff; }
.saldo-pil { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #fff; }
.saldo-pil span { color: rgba(232, 236, 248, .7); }
.hamburger { background: transparent; border-color: rgba(255, 255, 255, .25); color: #fff; }
.hamburger i { background: #fff; }
:focus-visible { outline-color: #fff; }
@media (max-width: 767px) {
  .menu { background: #0c1030; border-bottom-color: rgba(255, 255, 255, .1); }
  .menu a { color: #fff; border-bottom-color: rgba(255, 255, 255, .1); }
  .menu a[aria-current="page"] { color: var(--goud); }
  .koopbalk { background: rgba(12, 16, 48, .94); color: #fff; border-top-color: rgba(255, 255, 255, .1); }
  .kb-naam small { color: var(--grijs); } .kb-prijs { color: #fff; }
}

/* de gevels onder de donkere koppen: in de kleur van de nacht eronder */
.pagina-kop::after, .adres-kop::after, .product::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 44'%3E%3Cpath fill='%23080b22' d='M0 44V24h8v-6h8v-6h8v-6h12v6h8v6h8v6h8v20zM60 44V18l26-12 26 12v26zM112 44V26h12l6-8h6V8h14v10h6l6 8h12v18zM174 44V16q32-16 64 0v28zM238 44V22h10v-6h10v-6h14v6h10v6h18v22z'/%3E%3C/svg%3E") repeat-x left bottom / 450px 66px,
    linear-gradient(var(--grond), var(--grond)) left bottom / 100% 30px no-repeat;
}
@media (max-width: 767px) { .pagina-kop::after, .adres-kop::after, .product::after { background-size: 300px 44px, 100% 20px; } }
.h-straat .huis { fill: #10153d; stroke: #10153d; }
.h-straat .raam { display: block; fill: #ffcf6e; opacity: .1; }
.h-straat .raam:nth-of-type(4n+1), .h-straat .raam:nth-of-type(7n+3) { opacity: .9; }
.h-straat .paal { display: none; }
.voet { background: #0c1030; }

/* vlakken, velden, lijsten */
.vlak, .verd, .buurt-lijst, .bouwplaats { background: var(--thuis-vlak); }
#view .vlak { background: transparent; }
.veld, select.veld, textarea.veld { background: rgba(255, 255, 255, .05); border-color: var(--lijn-2); color: #fff; }
.veld::placeholder { color: rgba(232, 236, 248, .45); }
.slot-opties label { background: rgba(255, 255, 255, .04); }
.link { color: #ffd986; }
.chip { background: color-mix(in srgb, var(--tc, #8a8f99) 24%, transparent); color: color-mix(in srgb, var(--tc, #8a8f99) 35%, #fff); }
.concept, .melding { background: rgba(242, 193, 78, .09); border-color: rgba(242, 193, 78, .32); color: #f6dfa4; }
.lever { background: rgba(31, 157, 92, .16); color: #8ce6b6; border-color: rgba(140, 230, 182, .35); }
.msg { color: #ffb4a8; }
.msg.ok { color: #8ce6b6; }
.msg:not(:empty) { background: rgba(232, 87, 74, .12); }
.msg.ok:not(:empty) { background: rgba(31, 157, 92, .14); }
.ed-rij { background: rgba(242, 193, 78, .06); border-color: rgba(242, 193, 78, .25); }
.bw-delen li.is-raak, .bw-pool li.is-raak { background: rgba(242, 193, 78, .1); }
.bw-pijl, .bw-pijl b { background: #fff; }
.bw-pijl b { color: #14183F; }
.adres-kop .portemonnee { background: var(--wit); box-shadow: 0 0 0 1px var(--lijn), var(--schaduw-1); color: var(--inkt); }
.portemonnee .knop:disabled { color: rgba(232, 236, 248, .5); background: rgba(255, 255, 255, .05); border-color: var(--lijn); }
.spring { background: rgba(255, 255, 255, .06); color: #fff; }
.spring:hover { border-color: #fff; }
.psa-fotos a { color: var(--grijs); }
.sheet-panel { border-color: var(--lijn); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.sheet-x { background: rgba(255, 255, 255, .06); color: #fff; border-color: var(--lijn-2); }
.co-na { background: rgba(255, 255, 255, .04); }
.ed-leeg .ed-slab.silhouet img { filter: grayscale(1) brightness(.7) contrast(.6); opacity: .5; }
.ed-vraag { color: rgba(255, 255, 255, .35); }
.editie-strook .ed-binnenkort, .ed-binnenkort { border-color: rgba(255, 255, 255, .18); }

/* alles wat in v9 alleen op de homepage donker was, nu overal */
.h-kop h2, .h-faq-kop h2, .editie-kop h2 { color: #fff; }
.h-kop-sub { color: var(--thuis-tekst-2); }
.h-meer { color: #fff; }
.h-slab-naam { color: #fff; }
.h-slab-sub, .h-pull-wie { color: var(--thuis-tekst-2); }
.h-slab-w { color: var(--goud); }
.rail-pijl { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); color: #fff; }
.rail-pijl:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.h-pack-kaart { background: linear-gradient(180deg, #121848 0%, #0d1134 100%); box-shadow: 0 0 0 1px var(--thuis-lijn), 0 40px 80px -40px rgba(0, 0, 0, .9); }
@media (hover: hover) { .h-pack-kaart:hover { box-shadow: 0 0 0 1px rgba(242, 193, 78, .45), 0 40px 90px -40px rgba(0, 0, 0, .95), 0 0 60px -20px rgba(242, 193, 78, .25); } }
.h-pack-kop h3, .h-pack-kop h3 a, .h-prijs { color: #fff; }
.h-pack-sub { color: var(--thuis-tekst-2); }
.h-mk { background: rgba(242, 193, 78, .08); border-color: rgba(242, 193, 78, .3); }
.h-mk span { color: var(--goud); }
.h-mk b { color: #fff; }
.h-mk b .mono { color: var(--goud); }
.w-odds, .w-odds li { border-color: var(--thuis-lijn); }
.w-odds-naam, .w-odds-kans { color: #fff; }
.w-odds-waarde { color: var(--thuis-tekst-2); }
.w-odds li.is-sleutel .w-odds-naam { color: var(--goud); }
.w-odds-bonus .w-odds-naam { color: #d9c7ff; }
.knop-lijn { color: #fff; border-color: rgba(255, 255, 255, .28); }
.knop-lijn:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.knop-rand { background: rgba(255, 255, 255, .05); color: #fff; border-color: var(--lijn-2); }
.h-stappen.hs h3 { color: #fff; }
.h-stappen.hs p { color: var(--thuis-tekst-2); }
.hs-gevel { background: radial-gradient(ellipse 75% 62% at 50% 100%, #4a48a8, #1c2258 72%); }
.hs li:nth-child(2) .hs-gevel { background: radial-gradient(ellipse 75% 62% at 50% 100%, #2a74d8, #0e4a9a 55%, #0a2f66); }
.editie-strook { background: radial-gradient(ellipse 60% 90% at 80% 0%, rgba(242, 193, 78, .16), transparent 70%), linear-gradient(180deg, #100f22, #0b0b1a); border-color: rgba(242, 193, 78, .22); }
.editie-strook .editie-kop { border-bottom-color: rgba(242, 193, 78, .2); }
.editie-strook .editie-kop p, .editie-strook .editie-set { color: var(--thuis-tekst-2); }
.editie-strook .ed-item figcaption b { color: #fff; }
.editie-strook .ed-item figcaption small { color: var(--thuis-tekst-2); }
.ed-item .beloning b, .editie-set b, .verzamelaars .mono, .verzamelaars li .mono { color: var(--goud); }
.vraag { border-color: var(--thuis-lijn); }
.vraag summary { color: #fff; }
.vraag p { color: var(--thuis-tekst-2); }
.h-foto-echt img { filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .6)); }
.h-vitrine { background: #05071a; border-block: 1px solid rgba(255, 255, 255, .05); }
/* v10: het witte fotolabel blijft een licht eiland */
.h-foto-label { --inkt: #14183F; color: #14183F; }
/* net uit de packs: wie en wanneer op één regel, ook in een smalle kolom */
.h-pull-wie { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.h-pull-wie .live-stip { flex: none; }
@media (max-width: 767px) { .h-pull-wie { font-size: .72rem; gap: 5px; } }
/* "Binnenkort"-vakjes in de editie-rij: het nummer leesbaar op donker */
.ed-binnenkort span { color: rgba(232, 236, 248, .62); }
/* huispagina op de telefoon: het packbeeld lager, zodat titel en kansen eerder in beeld zijn */
@media (max-width: 767px) { .product-beeld { height: 320px; } .pb-etalage { width: min(66%, 260px); } }
/* laadscherm op donker: een lichte paal, de lamp gloeit */
.lantaarn::before { background: #3a4180; }
.lantaarn i { box-shadow: 0 0 22px 6px rgba(242, 193, 78, .35); }
.laad p { color: var(--grijs); }
.lantaarn i { background: #3a4180; }
/* de Slabstraat-editie in de slabwand: dezelfde maat als de PSA-slabs, met een zachte gouden gloed */
.hm-baan img.hm-editie { aspect-ratio: 260 / 437; object-fit: contain; opacity: 1; filter: drop-shadow(0 0 14px rgba(242, 193, 78, .45)); }
/* hoe zeldzaam een editiekaart is */
.ed-kans { margin: 2px 0 0; font-size: .74rem; color: var(--grijs); }
/* Gevel van Roem zonder pulls: drie lege lijstjes die op een slab wachten */
.gevel-leeg { display: grid; justify-items: center; gap: 14px; text-align: center; }
.gl-lijsten { display: flex; gap: 22px; }
.gl-lijsten span { width: 92px; aspect-ratio: 260 / 437; border: 2px dashed rgba(242, 193, 78, .45); border-radius: 10px; background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(242, 193, 78, .1), transparent 75%); }
.gl-lijsten span:nth-child(2) { width: 108px; border-color: rgba(242, 193, 78, .7); }
.gevel-leeg .noot { margin: 0; max-width: 46ch; }
@media (max-width: 767px) { .gl-lijsten span { width: 66px; } .gl-lijsten span:nth-child(2) { width: 78px; } }
/* gratis demo al gebruikt: de knoppen "Probeer gratis" weg (de pack-afbeeldingen leggen het uit als je erop tikt) */
html.demo-op .knop[data-demo] { display: none; }
/* voorbeelden in een lege Gevel van Roem (alleen demo) */
.gevel .gevel-vb { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px dashed rgba(242, 193, 78, .6); color: var(--goud); font-size: .74rem; font-weight: 600; }
.gevel .gevel-vb-noot { margin: 16px 0 0; text-align: center; }
/* De Villa voor nu uitverkocht (config: uitverkocht): lint op de kaart, rustiger pack, nette melding */
.h-pack-lint { position: absolute; left: 14px; top: 14px; z-index: 3; padding: 6px 12px; border-radius: 8px; background: #F2C14E; color: #14183F; font: 800 .82rem/1 var(--font-kop); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7); }
.h-pack-kaart.is-uitverkocht .h-pack-vlak img { filter: saturate(.6) brightness(.85) drop-shadow(0 30px 30px rgba(2, 4, 20, .6)); }
.uitverkocht { display: block; padding: 12px 14px; border-radius: var(--r-knop); border: 1px dashed rgba(242, 193, 78, .45); color: #f6dfa4; font-weight: 600; text-align: center; }
.h-pack-acties .uitverkocht { grid-column: 1; }
.h-uitverkocht { margin: 12px 0 0; color: #f6dfa4; font-weight: 600; }

/* =====================================================================================================
   Slab verkopen (27 okt): je eigen PSA-slabs aanbieden aan De Makelaar. Formulier in drie stappen; de fotovakken
   hebben de vorm van een slab, zodat meteen duidelijk is wat er op de foto moet (voorkant, achterkant, label).
   ===================================================================================================== */
.vk-vlak { padding: 28px; }
.vk-stappen { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vk-stappen li { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 3px solid var(--lijn-2); color: var(--grijs); font-size: .9rem; font-weight: 500; min-width: 0; }
.vk-stappen li span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vk-nr { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; border: 1.5px solid currentColor; font: 700 .85rem/1 var(--font-kop); }
.vk-stappen li[aria-current="step"] { border-top-color: var(--goud); color: #fff; }
.vk-stappen li[aria-current="step"] .vk-nr { background: var(--goud); border-color: var(--goud); color: #14183F; }
.vk-stappen li.is-klaar { border-top-color: rgba(242, 193, 78, .45); color: var(--inkt); }
.vk-stap { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
.vk-stap[hidden] { display: none; }
.vk-stap legend { padding: 0; margin-bottom: 6px; font: 700 1.5rem/1.15 var(--font-kop); color: #fff; }
.vk-optie { color: rgba(232, 236, 248, .6); font-weight: 400; }
.vk-aantal { max-width: 120px; }
.vk-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.vk-knoppen .knop-goud { flex: 1 1 auto; }
.vk-slabs { display: grid; gap: 12px; }
.vk-slab { display: grid; gap: 8px; padding: 16px; border-radius: 12px; border: 1px solid var(--lijn); background: rgba(255, 255, 255, .03); }
.vk-slab label { font-size: .88rem; color: var(--grijs); font-weight: 500; }
.vk-slab-nr { margin: 0; font: 700 .95rem/1 var(--font-kop); color: var(--goud); }
.vk-uitleg { margin: 0; color: var(--grijs); max-width: 60ch; }

/* de fotovakken: slabvormig (staand, met een labelstrook bovenin), zodat je ziet wat er op de foto hoort */
.vk-drop { border-radius: 14px; padding: 4px; outline: 2px dashed transparent; outline-offset: 4px; transition: outline-color .15s, background .15s; }
.vk-drop.is-sleep { outline-color: var(--goud); background: rgba(242, 193, 78, .06); }
.vk-duimen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.vk-duim { position: relative; aspect-ratio: 3 / 5; border-radius: 10px; overflow: hidden; }
.vk-duim.is-hint, .vk-duim.is-bezig { display: grid; place-items: end center; padding: 0 8px 12px; border: 1.5px dashed rgba(255, 255, 255, .22); color: rgba(232, 236, 248, .66); font-size: .78rem; text-align: center; line-height: 1.25;
  background: linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .07)) 50% 8% / 80% 16% no-repeat, linear-gradient(rgba(255, 255, 255, .035), rgba(255, 255, 255, .035)) 50% 62% / 80% 52% no-repeat; }
.vk-duim.is-bezig span { animation: vkPuls 1.2s ease-in-out infinite; }
@keyframes vkPuls { 50% { opacity: .35; } }
.vk-duim.is-erbij button { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; border-radius: 10px; border: 1.5px solid rgba(242, 193, 78, .55); background: rgba(242, 193, 78, .08); color: #f6dfa4; font: 600 .88rem/1.2 inherit; font-family: inherit; cursor: pointer; padding: 8px; }
.vk-duim.is-erbij button:hover { background: rgba(242, 193, 78, .14); border-color: var(--goud); }
.vk-duim.is-erbij svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.vk-duim.is-foto img { width: 100%; height: 100%; object-fit: cover; display: block; background: #0c1030; }
.vk-duim.is-foto { box-shadow: 0 0 0 1px var(--lijn-2); }
.vk-weg { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(8, 11, 34, .82); color: #fff; cursor: pointer; }
.vk-weg:hover { background: #b42318; }
.vk-weg svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.vk-teller { margin: 0; }
.vk-overzicht:empty { display: none; }
.vk-overzicht { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--lijn); background: rgba(255, 255, 255, .03); }
.vk-overzicht h3 { margin: 0 0 10px; font-size: 1.05rem; text-transform: none; }
.vk-overzicht dl { margin: 0; display: grid; gap: 8px; }
.vk-overzicht dl > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; }
.vk-overzicht dt { color: var(--grijs); font-size: .88rem; }
.vk-overzicht dd { margin: 0; overflow-wrap: anywhere; }
.vk-overzicht ul { margin: 0; padding-left: 18px; }

/* zijkant: hoeveel, en hoe het gaat */
.vk-zij { display: grid; gap: 16px; align-content: start; }
.vk-tot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 22px; border-radius: var(--r-vlak); background: radial-gradient(ellipse 80% 90% at 0% 0%, rgba(242, 193, 78, .2), transparent 70%), rgba(255, 255, 255, .04); border: 1px solid rgba(242, 193, 78, .3); }
.vk-tot-getal { font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 1; color: var(--goud); letter-spacing: -.02em; }
.vk-tot p { margin: 0; color: var(--grijs); font-size: .92rem; }
.vk-tot p b { display: block; color: #fff; font-size: 1.05rem; margin-bottom: 4px; }
.vk-zo { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: zo; }
.vk-zo li { counter-increment: zo; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; }
.vk-zo li::before { content: counter(zo); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; background: #fff; color: #14183F; font: 800 1rem/1 var(--font-kop); }
.vk-zo b { font-family: var(--font-kop); font-size: 1.1rem; }
.vk-zo span { color: var(--grijs); font-size: .93rem; }
.vk-zij .noot { margin: 0; }

/* bevestiging */
.vk-klaar { display: grid; gap: 10px; justify-items: start; padding: 8px 0; outline: none; }
.vk-klaar h2 { margin: 6px 0 0; font-size: 1.9rem; }
.vk-klaar p { margin: 0; color: var(--grijs); max-width: 52ch; }
.vk-klaar p b { color: #fff; }
.vk-klaar-vink { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--goud); }
.vk-klaar-vink svg { width: 30px; height: 30px; fill: none; stroke: #14183F; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vk-ref { padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid var(--lijn); }
.vk-ref b { color: var(--goud) !important; letter-spacing: .04em; }

@media (max-width: 767px) {
  .vk-vlak { padding: 18px; }
  .vk-stappen li { font-size: .8rem; gap: 6px; }
  .vk-stappen li:not([aria-current]) span:last-child { display: none; }
  .vk-duimen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .vk-knoppen .knop { flex: 1 1 100%; }
  .vk-tot { grid-template-columns: 1fr; gap: 8px; }
}

/* homepage: band "Heb je zelf PSA-slabs?" */
.hv-vlak { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 32px; align-items: center; padding: 44px 48px; border-radius: 22px; border: 1px solid rgba(242, 193, 78, .22);
  background: radial-gradient(ellipse 60% 120% at 100% 50%, rgba(242, 193, 78, .14), transparent 60%), linear-gradient(135deg, #12173f, #0b0e2b); }
.hv-tekst h2 { margin: 0 0 12px; color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1; text-transform: uppercase; }
.hv-tekst p { margin: 0 0 22px; color: rgba(232, 236, 248, .8); font-size: 1.05rem; max-width: 46ch; }
.hv-beeld { position: relative; height: 260px; }
.hv-slab { position: absolute; top: 8px; width: 140px; height: auto; border-radius: 8px; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .9); }
.hv-0 { left: 50%; transform: translateX(-130%) rotate(-10deg); }
.hv-1 { left: 50%; transform: translateX(-50%) translateY(-6px); z-index: 2; }
.hv-2 { left: 50%; transform: translateX(30%) rotate(9deg); }
.hv-bod { position: absolute; z-index: 3; right: 6%; bottom: 0; display: grid; gap: 1px; padding: 10px 14px; border-radius: 10px; background: var(--goud); color: #14183F; transform: rotate(3deg); box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .8); }
.hv-bod small { font-size: .72rem; font-weight: 600; }
.hv-bod b { font-size: 1.6rem; line-height: 1.05; }
@media (max-width: 767px) {
  .hv-vlak { grid-template-columns: 1fr; padding: 28px 22px; }
  .hv-beeld { height: 210px; order: -1; }
  .hv-slab { width: 112px; }
  .hv-bod { right: 2%; }
}

/* beheer: aangeboden slabs */
.bh-ik { display: grid; gap: 12px; }
.bh-ik-a { display: grid; gap: 8px; }
.bh-ik-a p { margin: 0; }
.bh-ik-a header { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--grijs); font-size: .88rem; }
.bh-ik-a.is-nieuw { border-color: rgba(242, 193, 78, .45); }
.bh-ik-fotos { display: flex; flex-wrap: wrap; gap: 8px; }
.bh-ik-fotos img { width: 96px; height: 128px; object-fit: cover; border-radius: 8px; border: 1px solid var(--lijn); background: #0c1030; display: block; }
.bh-ik-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }

/* =====================================================================================================
   De Wijkagent (chat, wijkagent.js): zelfde opzet als de assistent van Mikofy, in de nacht van de straat.
   Knop rechtsonder (lantaarn), venster erboven; op een telefoon een vel van onderen.
   ===================================================================================================== */
.wa-launch { position: fixed; right: 24px; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 70; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 14px; border: 1px solid rgba(242, 193, 78, .55); border-radius: 999px; background: #14183F; color: #fff; font: 600 .95rem/1 inherit; font-family: inherit; cursor: pointer; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .8), 0 0 0 4px rgba(242, 193, 78, .06); transition: transform .2s, background .2s; }
.wa-launch:hover { background: #1d2360; }
.wa-launch svg { width: 26px; height: 26px; color: var(--goud); flex: none; }
.wa.is-open .wa-launch { background: #232a6e; }
.wa-panel { position: fixed; right: 24px; bottom: calc(max(24px, env(safe-area-inset-bottom)) + 64px); z-index: 71; width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100vh - 150px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .12); background: #0d1133; color: #eef0f8; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9); }
.wa-panel[hidden] { display: none; }
.wa-kop { display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 14px; background: linear-gradient(135deg, #1a2160, #10153a); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.wa-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--goud); color: #14183F; flex: none; }
.wa-av svg { width: 24px; height: 24px; }
.wa-id { display: grid; gap: 2px; flex: 1; min-width: 0; }
.wa-id b { font: 700 1.1rem/1.1 var(--font-kop); }
.wa-id small { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: rgba(232, 236, 248, .72); }
.wa-id small i { width: 7px; height: 7px; border-radius: 50%; background: #5fd3a7; flex: none; }
.wa-x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; }
.wa-x:hover { background: rgba(255, 255, 255, .08); }
.wa-x svg { width: 20px; height: 20px; }
.wa-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; }
.wa-msg { max-width: 90%; padding: 11px 14px; border-radius: 16px; font-size: .93rem; line-height: 1.5; overflow-wrap: anywhere; }
.wa-bot { align-self: flex-start; background: rgba(255, 255, 255, .07); border-bottom-left-radius: 6px; }
.wa-ik { align-self: flex-end; background: var(--goud); color: #14183F; font-weight: 500; border-bottom-right-radius: 6px; }
.wa-msg b { color: #fff; }
.wa-ik b { color: inherit; }
.wa-msg small { color: rgba(232, 236, 248, .7); }
.wa-lijst { margin: 8px 0; padding-left: 18px; display: grid; gap: 6px; }
.wa-tabel { width: 100%; margin: 10px 0; border-collapse: collapse; font-size: .86rem; }
.wa-tabel caption { text-align: left; font: 700 .95rem/1.2 var(--font-kop); color: #fff; padding-bottom: 4px; }
.wa-tabel td { padding: 5px 6px 5px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.wa-tabel td:nth-child(2) { color: var(--goud); white-space: nowrap; }
.wa-tabel td:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.wa-tabel .wa-bonus td { color: rgba(232, 236, 248, .72); }
.wa-uit { display: inline-block; padding: 1px 7px; border-radius: 6px; background: rgba(242, 193, 78, .16); color: #f6dfa4; font-size: .75rem; font-weight: 600; }
.wa-typt { display: inline-flex; gap: 4px; padding: 4px 0; }
.wa-typt i { width: 6px; height: 6px; border-radius: 50%; background: rgba(232, 236, 248, .6); animation: waTypt 1s infinite ease-in-out; }
.wa-typt i:nth-child(2) { animation-delay: .15s; } .wa-typt i:nth-child(3) { animation-delay: .3s; }
@keyframes waTypt { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.wa-knoppen { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 2px; }
.wa-knop { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: transparent; color: #fff; font: 500 .86rem/1.2 inherit; font-family: inherit; text-decoration: none; cursor: pointer; text-align: left; }
.wa-knop:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.wa-knop.is-hoofd { background: var(--goud); border-color: var(--goud); color: #14183F; font-weight: 600; }
.wa-knop.is-hoofd:hover { background: #ffd56a; }
.wa-form { display: flex; gap: 8px; padding: 10px 12px 8px; border-top: 1px solid rgba(255, 255, 255, .08); }
.wa-in { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; background: rgba(255, 255, 255, .05); color: #fff; font: 400 1rem inherit; font-family: inherit; }
.wa-in::placeholder { color: rgba(232, 236, 248, .5); }
.wa-in:focus { outline: 2px solid var(--goud); outline-offset: 1px; }
.wa-send { display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 12px; background: var(--goud); color: #14183F; cursor: pointer; flex: none; }
.wa-send svg { width: 20px; height: 20px; }
.wa-voet { margin: 0; padding: 0 14px 12px; font-size: .76rem; color: rgba(232, 236, 248, .66); }
.wa-voet a { color: #ffd986; }
/* niet in de weg tijdens openen, afrekenen, de bonus of het feedbackvenster */
body:has(#rip:not([hidden])) .wa, body:has(#sheet:not([hidden])) .wa, body:has(.feest) .wa { display: none; }
@media (max-width: 767px) {
  .wa-launch { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); width: 52px; padding: 0; justify-content: center; }
  .wa-launch-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body:has(.koopbalk.aan) .wa-launch { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .wa-panel { inset: auto 0 0 0; width: 100%; height: calc(100dvh - 56px); border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  html.wa-open { overflow: hidden; }
  html.wa-open .wa-launch { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wa-typt i { animation: none; } .wa-launch { transition: none; } }

/* terug van de betaalpagina (Mollie) */
.betaal-terug { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 96px 0 120px; max-width: 560px; margin: 0 auto; }
.betaal-terug h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0; }
.betaal-terug .noot { margin: 0; font-size: 1rem; }
.betaal-terug .rij { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.betaal-terug .lantaarn::before, .betaal-terug .lantaarn i { background: #2a3170; }

/* beheer: betalen (Mollie) */
.bh-betalen { display: grid; gap: 12px; }
.bh-betalen p { margin: 0; }
.bh-betaal-stand { display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--lijn-2); }
.bh-betaal-stand span { color: var(--grijs); font-size: .9rem; }
.bh-betaal-stand.is-test { border-color: rgba(156, 194, 255, .5); background: rgba(156, 194, 255, .08); }
.bh-betaal-stand.is-live { border-color: rgba(140, 230, 182, .5); background: rgba(31, 157, 92, .12); }
.bh-betaal-stand.is-uit { border-style: dashed; }
.bh-uitleg summary { cursor: pointer; font-weight: 600; }
.bh-stappen { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--grijs); }
.bh-stappen b { color: var(--inkt); }

/* ---------- De Boodschappentas (8 losse kaarten) ---------- */
/* een losse kaart: foto, of een getekende kaart in de tierkleur (zonder figuren of logo's) */
.lk { --tk: #6B7280; position: relative; aspect-ratio: 63 / 88; border-radius: 4.5% / 3.2%; overflow: hidden; background: #1b1f45; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08); container-type: inline-size; }
.lk img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lk-teken, .lk-buurt { position: absolute; inset: 0; display: grid; padding: 6cqw; background: linear-gradient(160deg, var(--tk), color-mix(in srgb, var(--tk) 55%, #0b0d26)); color: #fff; }
.lk-teken { grid-template-rows: auto 1fr auto; gap: 4cqw; border: 2.4cqw solid color-mix(in srgb, var(--tc) 70%, #fff); border-radius: inherit; }
.lk-kop b { display: block; font: 800 11cqw/1 var(--font-kop); text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.lk-vak { position: relative; border-radius: 3cqw; overflow: hidden; background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .45), transparent 34%), repeating-linear-gradient(115deg, rgba(255, 255, 255, .1) 0 4cqw, transparent 4cqw 9cqw), linear-gradient(180deg, color-mix(in srgb, var(--tc) 85%, #fff), color-mix(in srgb, var(--tk) 70%, #000)); box-shadow: inset 0 0 0 1.4cqw rgba(255, 255, 255, .25); }
.lk-vak i { position: absolute; left: 50%; bottom: 14%; width: 42%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .55), transparent 70%); }
.lk-voet { display: grid; gap: 1cqw; font-size: 6.4cqw; line-height: 1.2; }
.lk-voet .mono { font-size: 7.4cqw; color: #fff; }
.lk-voet span:not(.mono) { opacity: .92; }
.lk-voet small { font-size: 5.6cqw; opacity: .78; }
.lk-buurt { place-content: center; justify-items: center; text-align: center; gap: 3cqw; background: linear-gradient(160deg, #e9edf3, #c5ccd8); color: #14183F; border: 2.4cqw solid #f7f8fb; border-radius: inherit; }
.lk-buurt svg { width: 62cqw; color: #14183F; }
.lk-buurt b { font: 800 12cqw/1 var(--font-kop); text-transform: uppercase; }
.lk-buurt small { font-size: 6cqw; color: #4B5563; }
.lk-holo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .28) 38%, color-mix(in srgb, var(--tc) 40%, transparent) 50%, transparent 66%); mix-blend-mode: soft-light; opacity: .8; }
.lk.lk-t-gouden_sleutel { box-shadow: 0 0 0 1px rgba(242, 193, 78, .7), 0 14px 30px -14px rgba(242, 193, 78, .55); }   /* alleen de kaart: .tr-kaart in de stapel draagt dezelfde klasse en mag niets verraden */

/* brede kaart onder de huizen */
.h-tas-kaart { margin-top: 28px; display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); border-radius: var(--r-vlak); background: linear-gradient(180deg, #121848 0%, #0d1134 100%); box-shadow: 0 0 0 1px var(--thuis-lijn, rgba(255, 255, 255, .1)), 0 40px 80px -40px rgba(0, 0, 0, .9); color: #fff; overflow: hidden; }
.h-tas-beeld { position: relative; display: grid; place-items: end center; min-height: 360px; padding-top: 28px; background: radial-gradient(ellipse 70% 70% at 50% 85%, #6b4a22, #3a2a1a 55%, #140f12); overflow: hidden; }
.h-tas-foto { position: relative; z-index: 2; width: min(62%, 250px); height: auto; margin-bottom: 18px; filter: drop-shadow(0 26px 26px rgba(0, 0, 0, .55)); transition: transform .35s var(--ease); }
.h-tas-hits { position: absolute; z-index: 1; left: 50%; top: 22px; width: 76%; height: 62%; transform: translateX(-50%); }
.h-tas-hits .lk { position: absolute; top: 0; width: 34%; }
.h-tas-hits .lk:nth-child(1) { left: 33%; top: -4%; z-index: 2; }
.h-tas-hits .lk:nth-child(2) { left: 6%; transform: rotate(-12deg); top: 8%; }
.h-tas-hits .lk:nth-child(3) { right: 6%; transform: rotate(12deg); top: 8%; }
.h-tas-info { display: grid; gap: 14px; align-content: start; padding: 26px 28px 28px; }
.h-tas-nieuw { margin: 0; color: var(--goud); font: 700 .8rem/1 var(--font-kop); letter-spacing: .1em; text-transform: uppercase; }
.h-tas-info .h-pack-sub { margin: 0; color: var(--thuis-tekst-2, #c7cbe0); }
.h-tas-info .h-pack-sub b { color: #fff; }
.h-tas-info .w-odds li { font-size: .9rem; padding: 9px 0; }
.h-tas-kans { margin: 0; color: var(--thuis-tekst-2, #c7cbe0); font-size: .9rem; }
.h-tas-kans b { color: #fff; }
.h-tas-kaart .h-pack-acties { display: flex; flex-wrap: wrap; gap: 10px; }
.h-tas-kaart.is-uitverkocht .h-tas-foto { filter: saturate(.6) brightness(.8) drop-shadow(0 26px 26px rgba(0, 0, 0, .55)); }
@media (hover: hover) { .h-tas-kaart:hover .h-tas-foto { transform: translateY(-6px) rotate(-1.5deg); } }
.h-packs-pagina + .h-tas-kaart { margin-top: 40px; }
@media (max-width: 860px) { .h-tas-kaart { grid-template-columns: 1fr; max-width: 640px; } .h-tas-beeld { min-height: 300px; } }

/* productpagina */
.tas-product .product-beeld.tas-pb { background: radial-gradient(ellipse 70% 75% at 50% 82%, #7a5428, #3d2b19 58%, #171015); display: grid; place-items: end center; }
.tas-pb-foto { position: relative; z-index: 3; width: min(66%, 330px); height: auto; margin-bottom: 30px; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .6)); }
.tas-pb-kaart { position: absolute; z-index: 2; top: 40px; width: min(34%, 170px); }
.tas-pb-1 { left: 12%; transform: rotate(-10deg); }
.tas-pb-2 { right: 12%; transform: rotate(9deg); top: 60px; }
.tas-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 4px; }
.tas-twee > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.tas-twee b { font-size: 1.6rem; color: var(--goud); line-height: 1.1; }
.tas-twee span { color: var(--thuis-tekst-2, #c7cbe0); font-size: .86rem; line-height: 1.35; }
.tas-plekken { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.tas-plekken li { display: grid; gap: 2px; align-content: start; padding: 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); min-width: 0; }
.tas-plekken li.is-hit { border-color: rgba(242, 193, 78, .5); background: rgba(242, 193, 78, .07); }
.tas-plekken .mono { color: var(--thuis-tekst-2, #c7cbe0); font-size: .78rem; }
.tas-plekken b { font: 700 .95rem/1.15 var(--font-kop); }
.tas-plekken small { color: var(--thuis-tekst-2, #c7cbe0); font-size: .74rem; line-height: 1.3; }
@media (max-width: 860px) { .tas-plekken { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tas-odds-vlak .tbl { margin-bottom: 6px; }
.tas-tabel .verdieping small { display: block; font-weight: 400; font-size: .78rem; color: var(--thuis-tekst-2, #c7cbe0); }
@media (min-width: 768px) { .tas-raster { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } }
.tk-kaart .sk-sub b { color: var(--goud); }

/* in De Schuur en De Buurtapp */
.lk-rij { margin-top: 30px; }
.schuur-kaarten { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.schuur-kaart .lk { width: 78%; justify-self: center; }
.lk-duim { width: 40px; flex: none; }
.lk-duim .lk { width: 40px; border-radius: 3px; }
.lk-duim .lk-teken, .lk-duim .lk-buurt { padding: 3px; border-width: 2px; }
.lk-duim .lk-voet, .lk-duim .lk-buurt small, .lk-duim .lk-buurt b { display: none; }
.co-tas img { filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .45)); }
.bw-plekken { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.bw-plekken li { display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--lijn); font-size: .92rem; }
.bw-plekken li:not(.is-buurt) { box-shadow: inset 3px 0 0 var(--tc); padding-left: 10px; }
.bw-plekken .noot { margin: 0; }
@media (max-width: 640px) { .bw-plekken li { grid-template-columns: 28px minmax(0, 1fr); } .bw-plekken li > :last-child { grid-column: 2; } }

/* ---------- openingsscherm De Boodschappentas ---------- */
.tas-rip { position: fixed; inset: 0; z-index: 200; color: #fff; --rc: var(--goud); overflow: hidden; }
.tas-rip[hidden] { display: none; }
.tas-rip .rip-straat { z-index: 1; }
.tr-flood { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rc) 70%, white) 0%, color-mix(in srgb, var(--rc) 35%, transparent) 18%, transparent 55%); transition: opacity .45s var(--ease); }
.tas-rip.lichten .tr-flood { opacity: .55; }
.tas-rip.flits .tr-flood { opacity: .9; }
.tr-scroll { position: relative; z-index: 3; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; }
.tr-podium { position: relative; width: 100%; display: grid; place-items: center; min-height: 0; }
.tr-ui { width: min(100% - 32px, 900px); padding: 10px 0 calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; justify-items: center; text-align: center; min-height: 150px; align-content: start; }
.tas-rip .tr-ui { text-shadow: 0 1px 10px rgba(4, 6, 24, .9); }
.tas-rip .tr-ui::before { content: ''; position: absolute; left: 50%; bottom: 0; width: min(120%, 980px); height: 100%; translate: -50% 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 55% 85% at 50% 55%, rgba(8, 10, 34, .94), rgba(8, 10, 34, .6) 55%, transparent 80%); }
.tas-rip.lichten .rip-straat { opacity: .6; }
.tas-rip .tr-ui { position: relative; isolation: isolate; }
.tas-rip .tr-ui .knop-licht { background: rgba(10, 12, 34, .55); }
.tas-tabel .tas-buurt-rij .verdieping i { background: #b9c1cf; }
.tr-hint { margin: 4px 0 2px; color: var(--goud); font-weight: 600; }
/* 1. de tas: de echte kraftpapieren tas (productfoto, brand/tas/foto/) valt op de stoep, onder het licht van een lantaarn.
   Lagen: .tr-grond (schaduw en lichtplas), .tr-tasbeeld (dicht + open, met het zegel), de stapel, .tr-tas-voor (voorkant open tas) */
.tr-tas { position: relative; width: min(80vw, 46vh, 380px); aspect-ratio: 900 / 1230; }
.tr-laag { position: absolute; inset: 0; transform-origin: 50% 96%; }
.tr-tasbeeld { z-index: 1; animation: tas-binnen .95s ease-out both, tas-wiebel 3.2s ease-in-out 1.8s infinite; }
/* de hele tas is vast te pakken (niet alleen het kleine zegel); tijdens het trekken pauzeert het wiebelen,
   zonder de animatie weg te halen: anders start het binnenvallen opnieuw zodra je loslaat */
.tas-rip[data-fase="dicht"] .tr-tasbeeld { touch-action: none; cursor: grab; }
.tr-tasbeeld.spant { animation-play-state: paused; cursor: grabbing; transition: rotate .12s; }
.tr-tasbeeld > img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 26px 24px rgba(0, 0, 0, .55)); }
.tr-tas-voor { z-index: 3; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.tr-grond { position: absolute; z-index: 0; left: 50%; bottom: 2.5%; width: 118%; height: 12%; translate: -50% 50%; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .6), rgba(0, 0, 0, .28) 45%, transparent 70%); animation: grond-binnen .95s ease-out both; }
.tr-grond::before { content: ''; position: absolute; left: 50%; bottom: 10%; width: 240%; aspect-ratio: 1.5; translate: -50% 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 72%, rgba(255, 214, 140, .2), rgba(255, 200, 120, .07) 40%, transparent 68%); }
@keyframes tas-binnen { 0% { transform: translateY(-75%) rotate(-7deg); opacity: 0; } 40% { opacity: 1; } 60% { transform: translateY(0) scale(1.05, .93) rotate(1deg); } 76% { transform: translateY(-4%) scale(.98, 1.03) rotate(-.6deg); } 90% { transform: translateY(0) scale(1.01, .99); } 100% { transform: none; } }
@keyframes grond-binnen { 0% { opacity: 0; scale: .35; } 60% { opacity: 1; scale: 1.08 1; } 100% { scale: 1; } }
@keyframes tas-wiebel { 0%, 72%, 100% { transform: rotate(0); } 76% { transform: rotate(-2.2deg); } 82% { transform: rotate(1.8deg); } 88% { transform: rotate(-1deg); } 94% { transform: rotate(.5deg); } }
/* het zegel (uitgesneden uit dezelfde foto, plek uit brand/tas/foto/foto.json): een folieglans die eroverheen trekt en een ring als hint */
.tr-zegel { position: absolute; left: 37.09%; top: 7.92%; width: 15.7%; aspect-ratio: 240 / 263; padding: 0; border: 0; border-radius: 50%; background: none; cursor: grab; touch-action: none; z-index: 2; }
.tr-zegel img { display: block; width: 100%; height: 100%; border-radius: 50%; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); }
.tr-zegel::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 252, 230, .85) 50%, transparent 62%) no-repeat; background-size: 300% 100%; background-position: 130% 0; mix-blend-mode: screen; animation: zegel-glans 3.2s ease-in-out 1.2s infinite; }
.tr-zegel::before { content: ''; position: absolute; inset: -14%; border-radius: 50%; border: 2px solid rgba(242, 193, 78, .9); opacity: 0; pointer-events: none; animation: zegel-ring 2.2s ease-out 1.5s infinite; }
@keyframes zegel-glans { 0%, 55% { background-position: 130% 0; } 85%, 100% { background-position: -30% 0; } }
@keyframes zegel-ring { 0% { opacity: .9; scale: .85; } 70%, 100% { opacity: 0; scale: 1.35; } }
.toets .tr-zegel:focus-visible { outline: 3px solid var(--goud); outline-offset: 4px; }
.tr-zegel.vast { cursor: grabbing; }
.tr-zegel.vast::before, .tr-zegel.vast::after, .tr-zegel.weg::before, .tr-zegel.weg::after { animation: none; opacity: 0; }
.tr-zegel.weg { transition: transform .75s cubic-bezier(.2, .7, .2, 1), opacity .75s; transform: translate(var(--wx, 30vw), var(--wy, -50vh)) rotate(540deg) scale(1.4) !important; opacity: 0; pointer-events: none; }
/* open: de tas veert open, het licht komt uit de opening. De voorkant verschijnt pas als het zegel weg is (anders valt het erachter) */
.tr-tas-open { opacity: 0; }
.tr-tas.is-open .tr-tasbeeld, .tr-tas.is-open .tr-tas-voor { animation: tas-hup .65s ease-out both; }
.tr-tas.is-open .tr-tas-dicht { opacity: 0; transition: opacity .16s .05s; }
.tr-tas.is-open .tr-tas-open { opacity: 1; transition: opacity .16s .05s; }
.tr-tas.is-open .tr-tas-voor { opacity: 1; transition: opacity 0s .55s; }
@keyframes tas-hup { 0% { transform: none; } 28% { transform: scale(1.045, .95); } 58% { transform: translateY(-2%) scale(.985, 1.035); } 80% { transform: scale(1.005, .995); } 100% { transform: none; } }
.tr-licht { position: absolute; left: 6%; right: 12%; top: -46%; height: 58%; pointer-events: none; opacity: 0; transform-origin: 50% 100%; background: radial-gradient(ellipse 46% 80% at 50% 100%, rgba(255, 236, 180, .95), rgba(242, 193, 78, .38) 45%, transparent 74%); filter: blur(6px); mix-blend-mode: screen; }
.tr-tas.is-open .tr-licht { animation: licht-op 1.4s ease-out forwards; }
@keyframes licht-op { 0% { opacity: 0; transform: scaleY(.2); } 30% { opacity: 1; transform: scaleY(1.12); } 100% { opacity: .75; transform: none; } }
/* 2. de kaarten: de stapel zit in de tas (achter de voorkant), schuift er omhoog uit en komt in het midden; daarna zakt de tas weg.
   Maten in % van de tas: de stapel is 85% van de tasbreedte (dus 87% van de tashoogte) */
.tr-stapel { position: absolute; left: 50%; top: 0; z-index: 2; width: 85%; aspect-ratio: 63 / 88; transform-origin: 50% 0; transform: translate(-50%, 18%) scale(.74); cursor: pointer; touch-action: pan-y; outline: none; transition: transform 1s cubic-bezier(.22, 1, .3, 1); }
.tr-stapel.uit-tas { transform: translate(-50%, -26%) scale(.9); }
.tr-stapel.boven { z-index: 4; transform: translate(-50%, 7.5%); transition-duration: .8s; }
.tas-rip.tas-weg .tr-laag { animation: tas-zak .7s cubic-bezier(.5, 0, .75, 0) forwards; }
.tas-rip.tas-weg .tr-grond { opacity: 0; transition: opacity .5s; }
@keyframes tas-zak { from { transform: none; opacity: 1; } to { transform: translateY(55%) scale(.85); opacity: 0; } }
/* de focusrand alleen voor wie met het toetsenbord werkt (html.toets), anders staat er een gouden kader om de stapel */
.tr-stapel:focus-visible, .tr-zegel:focus-visible { outline: none; }
.toets .tr-stapel:focus-visible { outline: 3px solid var(--goud); outline-offset: 10px; border-radius: 12px; }
.tr-kaart { position: absolute; inset: 0; z-index: var(--z); perspective: 1200px; transform: translate(calc(var(--i) * -1.5px), calc(var(--i) * -2px)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.tr-tilt, .tr-flip { position: absolute; inset: 0; transform-style: preserve-3d; }
.tr-tilt { transition: transform .2s ease-out; }
.tr-achter, .tr-voor { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 4.5% / 3.2%; overflow: hidden; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .9); }
.tr-achter img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tr-voor { transform: rotateY(180deg); }
.tr-voor .lk { position: absolute; inset: 0; border-radius: inherit; }
/* omdraaien: de kaart komt een stukje naar je toe, draait iets te ver door en valt terug; hits langzamer, De Schat van de Straat het langzaamst */
.tr-kaart.om { z-index: 40; transform: translateY(-1%) scale(1.02); }
.tr-kaart.om .tr-flip { transform: rotateY(180deg); animation: kaart-om .45s cubic-bezier(.3, .6, .3, 1) both; }
.tr-kaart.is-hit.om .tr-flip { animation-duration: .85s; }
.tr-kaart.lk-t-schat.om .tr-flip { animation-duration: 1.5s; }
@keyframes kaart-om { 0% { transform: translateZ(0) rotateY(0); } 55% { transform: translateZ(90px) rotateY(205deg); } 78% { transform: translateZ(30px) rotateY(172deg); } 100% { transform: rotateY(180deg); } }
/* de open kaart kantelt mee (--tx/--ty op de stapel, uit muis of gyroscoop), met een glans; hits krijgen een holo-veeg */
.tr-kaart.om .tr-tilt { transform: rotateX(calc(var(--ty, 0) * -9deg)) rotateY(calc(var(--tx, 0) * 12deg)); }
.tr-glans { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .4s; background: radial-gradient(circle at calc(50% + var(--tx, 0) * 45%) calc(35% + var(--ty, 0) * 45%), rgba(255, 255, 255, .42), rgba(255, 255, 255, .08) 32%, transparent 55%); mix-blend-mode: soft-light; }
.tr-kaart.om .tr-glans { opacity: 1; }
.tr-kaart.is-hit.om .tr-glans::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 30%, rgba(255, 240, 170, .55) 42%, rgba(150, 220, 255, .45) 50%, rgba(255, 150, 220, .45) 58%, transparent 70%) no-repeat; background-size: 280% 100%; background-position: 140% 0; mix-blend-mode: color-dodge; animation: holo-veeg 1.3s ease-out .55s both; }
.tr-kaart.is-hit.om:is(.lk-t-gouden_sleutel, .lk-t-schat) .tr-glans::after { animation: holo-veeg 1.3s ease-out .55s both, holo-veeg 3.5s ease-in-out 2.2s infinite; }
@keyframes holo-veeg { from { background-position: 140% 0; } to { background-position: -40% 0; } }
/* het spanningsmoment van een hit: de kaart trilt en er lopen vonken langs de rand, sneller en feller naarmate de tier hoger is */
.tr-kaart.laadt { animation: kaart-laad calc(.28s - var(--kracht, 1) * .035s) ease-in-out infinite alternate; }
.tr-kaart.laadt .tr-achter { box-shadow: 0 0 0 calc(2px + var(--kracht, 1) * 1px) var(--tc), 0 0 calc(20px + var(--kracht, 1) * 14px) calc(var(--kracht, 1) * 3px) color-mix(in srgb, var(--tc) 75%, transparent); }
@keyframes kaart-laad { from { transform: translate(-1px, 0) rotate(-.6deg); } to { transform: translate(1px, -2px) rotate(.6deg); } }
@property --hoek { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.tr-achter::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 3px; opacity: 0; pointer-events: none; background: conic-gradient(from var(--hoek), transparent 0 68%, var(--tc) 84%, #fff 90%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.tr-kaart.laadt .tr-achter::after { opacity: 1; animation: rand-vonk calc(1.1s - var(--kracht, 1) * .14s) linear infinite; }
@keyframes rand-vonk { to { --hoek: 360deg; } }
/* en dan: een ring die uitdijt, vonken (JS) en bij Pronkstuk en hoger de tiernaam als stempel */
.tr-ring { position: absolute; left: 50%; top: 50%; z-index: -1; width: 70%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 3px solid var(--tc); opacity: 0; pointer-events: none; box-shadow: 0 0 24px var(--tc), inset 0 0 24px var(--tc); }
.tr-kaart.straalt .tr-ring { animation: ring-uit .9s cubic-bezier(.2, .7, .3, 1) .25s both; }
@keyframes ring-uit { 0% { opacity: .95; scale: .3; } 100% { opacity: 0; scale: 3.2; } }
.tr-stempel { position: absolute; left: 50%; top: -9%; z-index: 50; margin: 0; padding: 6px 16px; translate: -50% 0; white-space: nowrap; border: 3px solid var(--tc); border-radius: 10px; color: #fff; background: color-mix(in srgb, var(--tc) 78%, #0a0c22); font: 800 clamp(1rem, 3.6vw, 1.5rem)/1 var(--font-kop); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 0 30px -4px var(--tc), 0 10px 24px -10px rgba(0, 0, 0, .8); pointer-events: none; animation: stempel .55s cubic-bezier(.2, 1.6, .4, 1) .35s both; }
.tr-stempel.is-groot { padding: 8px 20px; font-size: clamp(1.2rem, 5vw, 2rem); }
@keyframes stempel { 0% { opacity: 0; transform: scale(2.4) rotate(-14deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(-4deg); } }
.tr-deeltje { position: absolute; z-index: 60; display: block; pointer-events: none; }
.tr-deeltje.is-snipper { background: linear-gradient(160deg, #d8b27a, #a87d45); border-radius: 1px; box-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.tr-deeltje.is-glim, .tr-deeltje.is-vonk, .tr-deeltje.is-stof { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px var(--dk), 0 0 14px 4px color-mix(in srgb, var(--dk) 60%, transparent); }
.tr-deeltje.is-vonk, .tr-deeltje.is-stof { width: 4px; height: 4px; }
.tr-deeltje.is-stof { background: var(--dk); }
/* "Nu de hits": het licht gaat even omlaag */
.tas-rip .rip-bg { transition: filter .6s; }
.tas-rip.hits .rip-bg { filter: brightness(.6) saturate(1.1); }
.tas-rip.hits:not(.lichten) .rip-straat { opacity: .45; transition: opacity .6s; }
.tr-nu { color: var(--goud); font: 800 clamp(1.4rem, 5vw, 2rem)/1 var(--font-kop); letter-spacing: .06em; text-transform: uppercase; animation: nu-hits .7s ease-out both; }
@keyframes nu-hits { 0% { opacity: 0; letter-spacing: .4em; } 100% { opacity: 1; letter-spacing: .06em; } }
/* de rij onderin: 8 vakjes, de omgedraaide kaarten vliegen erin */
.tr-rij { position: absolute; left: 50%; bottom: 6px; z-index: 3; display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; translate: -50% 0; opacity: 0; transition: opacity .4s .6s; }
.tas-rip[data-fase="kaarten"] .tr-rij { opacity: 1; }
.tr-rij li { position: relative; width: clamp(26px, 6.4vw, 44px); aspect-ratio: 63 / 88; border-radius: 4px; border: 1.5px dashed rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .03); }
.tr-rij li.is-hit { border-color: rgba(242, 193, 78, .5); }
.tr-rij li .lk { position: absolute; inset: 0; opacity: 0; }
.tr-rij li.vol { border-color: transparent; }
.tr-rij li.vol .lk { opacity: 1; animation: vak-plof .3s ease-out; }
.tr-rij li.vol.is-hit { box-shadow: 0 0 0 2px var(--tc), 0 0 14px -2px var(--tc); }
@keyframes vak-plof { 0% { scale: 1.25; } 100% { scale: 1; } }
.tr-kaart.vliegt { z-index: 45; }
.tr-straal { position: absolute; left: 50%; top: 50%; width: 260%; aspect-ratio: 1; translate: -50% -50%; scale: .4; pointer-events: none; opacity: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tc) 70%, transparent) 0deg 7deg, transparent 7deg 22deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%); z-index: -1; }
.tr-kaart.straalt .tr-straal { animation: straal 1.6s ease-out forwards, draai 12s linear infinite; }
.tr-kaart.weg .tr-straal { opacity: 0 !important; animation: none; }
@keyframes straal { 0% { opacity: 0; scale: .3; } 30% { opacity: 1; } 100% { opacity: .75; scale: 1; } }
@keyframes draai { to { rotate: 360deg; } }
.tr-kaart.weg { visibility: hidden; }
.tr-teller { display: grid; gap: 8px; justify-items: center; }
.tr-tel { margin: 0; color: var(--goud); font-size: .95rem; letter-spacing: .04em; }
.tr-wat { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; font-size: 1.15rem; min-height: 32px; }
.tr-wat b { font: 800 1.45rem/1.1 var(--font-kop); }
.tr-wat .r-rar, .tr-ov-naam .r-rar { --rc: var(--tc); }
/* 3. het overzicht (scrollt als het niet past) */
.tas-rip[data-fase="overzicht"] .tr-scroll { overflow-y: auto; overscroll-behavior: contain; grid-template-rows: auto auto; align-content: start; }
.tas-rip[data-fase="overzicht"] .tr-podium { padding: 64px 16px 8px; }
.tr-ov { width: min(100%, 980px); display: grid; gap: 16px; }
.tr-ov-kop { font-size: clamp(1.6rem, 4vw, 2.2rem); text-align: center; outline: none; }
.tr-ov ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tr-ov-hits { grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: center; }
.tr-ov-buurt { grid-template-columns: repeat(5, minmax(0, 120px)); justify-content: center; }
.tr-ov-kaart { display: grid; gap: 6px; align-content: start; text-align: center; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.tr-ov-kaart.is-groot { border-color: color-mix(in srgb, var(--tc) 60%, transparent); background: color-mix(in srgb, var(--tc) 10%, transparent); }
.tr-ov-kaart.is-gekozen { opacity: .55; }
.tr-ov-naam { margin: 0; display: grid; gap: 4px; justify-items: center; }
.tr-ov-naam .r-rar { font-size: .7rem; padding: 3px 9px; }
.tr-ov-naam b { font: 700 1rem/1.15 var(--font-kop); }
.tr-ov-buurt .tr-ov-naam b { font-size: .86rem; }
.tr-ov-naam small { color: #c7cbe0; font-size: .76rem; }
.tr-ov-buurt .tr-ov-naam small, .tr-ov-buurt .tr-ov-naam .r-rar { display: none; }
.tr-ov-w { margin: 0; display: grid; gap: 2px; }
.tr-ov-w > .mono { font-size: 1.05rem; }
.tr-ov-w small { color: #c7cbe0; font-size: .76rem; }
.tr-ov-w small b { color: var(--goud); }
.tr-ov-menu { display: grid; gap: 6px; }
.knop-klein { min-height: 36px; padding: 0 10px; font-size: .82rem; }
.tr-ov-buurt .knop-klein { min-height: 34px; padding: 0 6px; font-size: .74rem; }
.tr-ov-kz { margin: 0; font-size: .8rem; color: var(--goud); font-weight: 600; }
.tas-rip[data-fase="overzicht"] .tr-ui { padding-top: 12px; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
.tr-keuzes .mk-bod small { grid-column: 1 / -1; }
@media (min-width: 1100px) {
  .tas-rip[data-fase="overzicht"] .tr-scroll { grid-template-columns: minmax(0, 1fr) 460px; grid-template-rows: auto; align-items: start; column-gap: 28px; padding: 0 40px; }
  .tas-rip[data-fase="overzicht"] .tr-ui { position: sticky; top: 0; padding-top: 64px; width: 100%; }
}
@media (max-width: 640px) {
  .tr-ov-hits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tr-ov-buurt { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .tr-ov-kaart { padding: 6px; }
  .tr-ov-hits .tr-ov-naam small { display: none; }
  .tr-ov-buurt .tr-ov-w small, .tr-ov-buurt .tr-ov-naam { display: none; }
  .tr-ov-buurt .knop-klein { font-size: .66rem; min-height: 32px; }
  .tas-twee { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-tasbeeld, .tr-tas.is-open .tr-tasbeeld, .tr-tas.is-open .tr-tas-voor, .tr-grond, .tr-tas.is-open .tr-licht, .tr-zegel::before, .tr-zegel::after, .tr-kaart.laadt, .tr-kaart.laadt .tr-achter::after, .tr-kaart.straalt .tr-straal, .tr-kaart.straalt .tr-ring, .tr-kaart.om .tr-flip, .tr-kaart.is-hit.om .tr-glans::after, .tr-stempel, .tr-nu, .tr-rij li.vol .lk { animation: none !important; }
  .tr-flip, .tr-kaart, .tr-stapel, .tr-zegel.weg, .tr-tilt { transition: opacity .2s !important; }
  .tr-tas.is-open .tr-licht { opacity: .75; }
  .tas-rip.tas-weg .tr-laag { animation: none; opacity: 0; transition: opacity .3s; }
  .tr-stapel, .tr-stapel.uit-tas, .tr-stapel.boven { transform: translate(-50%, 7.5%); }
}
.tas-rip[data-fase="overzicht"] .rip-straat { opacity: .35; }
.tr-ov-kaart { background: rgba(14, 17, 50, .94); }
.tr-ov-kaart.is-groot { background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 16%, #0e1132), #0e1132 70%); }
.tas-rip[data-fase="overzicht"] .tr-podium { min-height: auto; place-items: start center; }
.tas-rip[data-fase="overzicht"] .tr-scroll { align-items: start; }
.tr-ov-kaart, .tr-ov-menu { min-width: 0; }
.tr-ov-menu .knop-klein { white-space: normal; line-height: 1.15; }
@media (max-width: 640px) { .tr-ov-buurt .tr-ov-menu .knop-klein { padding: 0 2px; font-size: .62rem; } .tr-ov-w > .mono { font-size: .9rem; } .tr-ov-buurt .tr-ov-w > .mono { font-size: .74rem; } }
.bh-cijfers > div.bh-let-op { box-shadow: inset 0 3px 0 #e0614a; }
.bh-cijfers > div.bh-let-op span { color: #ff9a85; }
/* buurtkaart: de kaartachterkant met "Buurtkaart" erop (tot er eigen foto's zijn) */
.lk-buurt { padding: 0; border: 0; place-content: stretch; background: #1b1f45; }
.lk-buurt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lk-buurt b { position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 3cqw 6cqw; border-radius: 99px; border: .8cqw solid #fff; background: rgba(11, 79, 156, .94); color: #fff; font: 800 9cqw/1 var(--font-kop); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, .45); }
.lk.is-foto { background: transparent; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .9); }
.lk.is-foto img { object-fit: contain; }
.bh-weinig td:first-child { box-shadow: inset 3px 0 0 #e0a84a; }

/* ---------- De Boodschappentas, feedbackronde 1 (29-10) ---------- */
/* De Schat van de Straat: goud met holo */
.lk.lk-t-schat { box-shadow: 0 0 0 2px #F2C14E, 0 0 28px -4px rgba(242, 193, 78, .8), 0 18px 34px -16px rgba(0, 0, 0, .8); }
.lk-holo.is-schat { mix-blend-mode: color-dodge; opacity: .5; background: linear-gradient(115deg, transparent 18%, rgba(255, 236, 160, .65) 34%, rgba(160, 220, 255, .45) 46%, rgba(255, 160, 220, .45) 56%, transparent 72%); background-size: 260% 260%; animation: schat-holo 4.5s ease-in-out infinite; }
@keyframes schat-holo { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 100%; } }
.lk-label { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .02em; background: rgba(46, 160, 96, .18); color: #8fe3b0; border: 1px solid rgba(143, 227, 176, .35); white-space: nowrap; }
.lk-label.is-bestel { background: rgba(255, 255, 255, .06); color: var(--thuis-tekst-2, #c7cbe0); border-color: rgba(255, 255, 255, .14); font-weight: 600; }
.verd-schat { box-shadow: inset 0 0 0 1px rgba(242, 193, 78, .5); background: linear-gradient(180deg, rgba(242, 193, 78, .08), transparent 60%); }
.tas-twee.is-drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tas-twee .is-schat { border-color: rgba(242, 193, 78, .55); background: linear-gradient(180deg, rgba(242, 193, 78, .12), rgba(255, 255, 255, .03)); }
@media (max-width: 640px) { .tas-twee.is-drie { grid-template-columns: 1fr; } }
/* productpagina: drie kaarten boven de tas, de duurste (De Schat van de Straat) groot in het midden */
.tas-pb-kaart { top: 34px; width: min(30%, 150px); }
.tas-pb-1 { left: 50%; top: 14px; width: min(40%, 200px); transform: translateX(-50%) rotate(-2deg); z-index: 2; }
.tas-pb-2 { left: 8%; right: auto; top: 58px; transform: rotate(-12deg); z-index: 1; }
.tas-pb-3 { right: 8%; left: auto; top: 58px; transform: rotate(11deg); z-index: 1; }
.tas-pb-kaart.is-schat .lk { box-shadow: 0 0 0 2px #F2C14E, 0 0 48px -6px rgba(242, 193, 78, .9), 0 26px 40px -18px rgba(0, 0, 0, .8); }
.h-tas-hits .lk:nth-child(1) { left: 30%; width: 40%; top: -8%; }
/* openingsscherm: glimlichtje bij het losscheuren van de zegel */
.tr-tas::after { content: ''; position: absolute; left: 45%; top: 14%; width: 60%; aspect-ratio: 1; translate: -50% -50%; scale: .2; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255, 250, 220, 1), rgba(242, 193, 78, .6) 30%, transparent 65%); z-index: 5; }
.tas-rip.scheur .tr-tas::after { animation: zegel-glimlicht .7s ease-out forwards; }
@keyframes zegel-glimlicht { 0% { opacity: 0; scale: .2; } 25% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.6; } }
/* schudden van het hele scherm (De Gouden Sleutel), sterker bij De Schat van de Straat */
.tas-rip.schud .tr-scroll { animation: tas-schud .55s cubic-bezier(.36, .07, .19, .97); }
.tas-rip.schud-groot .tr-scroll { animation: tas-schud-groot .85s cubic-bezier(.36, .07, .19, .97); }
@keyframes tas-schud { 10%, 90% { translate: -2px 0; } 20%, 80% { translate: 4px 1px; } 30%, 50%, 70% { translate: -6px -1px; } 40%, 60% { translate: 6px 1px; } }
@keyframes tas-schud-groot { 10%, 90% { translate: -3px 1px; } 20%, 80% { translate: 7px -2px; } 30%, 50%, 70% { translate: -11px 2px; } 40%, 60% { translate: 11px -2px; } }
.tas-rip.schat .tr-flood { opacity: .75; background: radial-gradient(circle at 50% 42%, #fff4c8 0%, rgba(242, 193, 78, .7) 22%, rgba(242, 193, 78, .15) 48%, transparent 70%); }
.tas-rip .feest-confetti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .tas-rip.scheur .tr-tas::after, .tas-rip.schud .tr-scroll, .tas-rip.schud-groot .tr-scroll, .lk-holo.is-schat { animation: none !important; }
}
/* productkaart: de open tas met de kaarten die eruit steken (tussen achter- en voorkant), licht uit de tas */
.tas-uitsteek { position: relative; z-index: 2; display: block; width: min(68%, 270px); aspect-ratio: 900 / 1230; margin: 30% auto 16px; }
.tas-uitsteek.is-groot { width: min(62%, 300px); margin: 0 auto 26px; }   /* productpagina: het vak lijnt onderaan uit; boven de tas blijft ruimte voor de kaarten */
.tas-uitsteek > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tu-achter { z-index: 1; filter: drop-shadow(0 26px 26px rgba(0, 0, 0, .55)); }
/* de opening van de foto loopt van ± 7% tot 87% van de breedte; de voorrand ligt op ± 9–12% van de hoogte */
.tu-licht { position: absolute; z-index: 2; left: 8%; right: 14%; top: -18%; height: 34%; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 50% 88%, rgba(255, 228, 150, .95), rgba(242, 193, 78, .45) 38%, transparent 72%); filter: blur(6px); }
.tu-kaarten { position: absolute; z-index: 3; inset: 0; }
.tu-kaart { position: absolute; top: -14%; width: 38%; transform-origin: 50% 100%; }
.tu-kaart:nth-child(1) { left: 9%; transform: rotate(-13deg); }
.tu-kaart:nth-child(3) { left: 46%; transform: rotate(11deg); }
.tu-kaart.is-midden { left: 26%; top: -28%; width: 44%; z-index: 2; transform: rotate(-2deg); }
.tu-kaart .lk { box-shadow: 0 -6px 26px -6px rgba(255, 220, 140, .55), 0 12px 24px -12px rgba(0, 0, 0, .8); }
.tu-kaart.is-schat .lk { box-shadow: 0 0 0 2px #F2C14E, 0 -10px 42px -4px rgba(255, 222, 130, .9), 0 14px 26px -12px rgba(0, 0, 0, .8); }
.tu-voor { z-index: 4; filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, .25)); }
.tu-gloed { position: absolute; z-index: 5; left: 8%; right: 14%; top: 6%; height: 9%; pointer-events: none; background: radial-gradient(ellipse 50% 50% at 50% 30%, rgba(255, 236, 180, .55), transparent 70%); mix-blend-mode: screen; }
.h-tas-beeld .tas-uitsteek { margin-bottom: 18px; }
.h-tas-beeld { padding-top: 0; }
.tas-product .product-beeld.tas-pb { display: grid; place-items: end center; }
@media (hover: hover) { .h-tas-kaart:hover .tu-kaart { transition: transform .4s var(--ease); } .h-tas-kaart:hover .tu-kaart.is-midden { transform: rotate(-2deg) translateY(-6%); } }
/* content-visibility: alleen een geschatte hoogte; "auto 520px" gold ook voor de breedte en maakte de pagina op mobiel 520 px breed */
.verd { contain-intrinsic-width: none; contain-intrinsic-height: auto 560px; }
@media (max-width: 767px) { .verd { contain-intrinsic-height: auto 520px; } }

/* feedback 29-10: de hoogste verdieping uitgelicht op de huiskaart (Het Penthouse), met de kans erbij */
.h-pack-uitgelicht { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: -4px 0 14px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--tc) 12%, transparent); font-size: .9rem; color: #e9e4ff; }
.h-pack-uitgelicht-v { font-weight: 700; color: var(--tc); }
.h-pack-uitgelicht b { color: #fff; }
.h-pack-uitgelicht small { color: #b9b3d6; font-family: "IBM Plex Mono", monospace; }

/* partnerpagina (#/partner/<token>) */
.pp-links { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.pp-links > div { display: grid; gap: 2px; min-width: 0; }
.pp-links .mono { word-break: break-all; }
.pp-code { font-size: 1.6rem; letter-spacing: .04em; }
.pp-grafiek { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: end; height: 160px; }
.pp-grafiek > div { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 4px; text-align: center; }
.pp-grafiek i { align-self: end; display: block; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--goud); }
.pp-grafiek small { color: var(--grijs); font-size: .72rem; }
.pp-cijfers { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; background: none; border: 0; }
.pp-cijfers > div { border: 1px solid var(--lijn); border-radius: 10px; }

/* ---------- Tas-opening v3 (31-10): een avond op de stoep ----------
   Decor: een stoep met klinkers, de gevels op de horizon achter de tas, en een lantaarn aan een spandraad boven de straat
   (zoals in de Amsterdamse grachtenstraatjes). De lantaarn flikkert aan, dan valt de tas in het licht.
   De klep van de tas vouwt in 3D open (--open 0..1), lichtstralen komen uit de opening, en de 8 kaarten waaieren boven de tas
   open voor ze als stapel naar voren komen. Plaats van het decor: --bx/--bw/--bb/--lt, gezet door tasMaat() in app.js. */
@property --open { syntax: '<number>'; inherits: true; initial-value: 0; }
.tas-rip { --bx: 50vw; --bw: 300px; --bb: 70vh; --lt: 8px; }
.tas-rip .rip-bg { background: radial-gradient(ellipse 80% 55% at 50% 28%, #2b2d6e 0%, #171a4a 45%, #090b20 100%); }
.tas-rip .rip-straat { top: auto; bottom: calc(100% - var(--bb) + 20px); height: min(28vh, 240px); opacity: .95; }
.tr-decor { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; transition: opacity .6s; }
.tas-rip[data-fase="overzicht"] .tr-decor { opacity: 0; }

/* de stoep: klinkers in perspectief, die naar voren in het donker verdwijnen */
.tr-stoep { position: absolute; left: -60%; right: -60%; top: calc(var(--bb) - 26px); height: 110vh; transform-origin: 50% 0; transform: perspective(380px) rotateX(66deg);
  background: #11132e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Crect width='56' height='56' fill='%230a0b1f'/%3E%3Cg fill='%23222548'%3E%3Crect x='1.5' y='1.5' width='53' height='25' rx='4'/%3E%3Crect x='-26.5' y='29.5' width='53' height='25' rx='4'/%3E%3Crect x='29.5' y='29.5' width='53' height='25' rx='4'/%3E%3C/g%3E%3C/svg%3E") 50% 0 / 56px 56px;
  -webkit-mask-image: linear-gradient(#000 0, #000 22%, transparent 62%); mask-image: linear-gradient(#000 0, #000 22%, transparent 62%); }
.tr-stoep::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: linear-gradient(#2c2f58, #15173a); }   /* de stoeprand */
.tr-plas { position: absolute; left: var(--bx); top: var(--bb); width: calc(var(--bw) * 2.3); height: calc(var(--bw) * .55); translate: -50% -50%; border-radius: 50%; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(ellipse at center, rgba(255, 214, 140, .5), rgba(255, 190, 110, .16) 42%, transparent 70%); }

/* de lantaarn aan de spandraad, en zijn lichtkegel (een zachte wig, dus zonder harde randen) met stofjes erin */
.tr-draad { position: absolute; left: 0; width: 100%; height: 20px; top: calc(var(--lt) - 17px); overflow: visible; }
.tr-draad path { fill: none; stroke: #05061a; stroke-width: 1.6; }
.tr-lamp { position: absolute; left: var(--bx); top: var(--lt); width: 46px; height: auto; translate: -50% 0; overflow: visible; }
.tr-glas { fill: #2c2a48; }
.tr-kegel { position: absolute; left: var(--bx); top: calc(var(--lt) + 52px); width: calc(var(--bw) * 2.2); height: calc(var(--bb) - var(--lt) - 40px); translate: -50% 0; opacity: 0; }
.tr-kegel i { position: absolute; inset: 0; mix-blend-mode: screen;
  background: conic-gradient(from 154deg at 50% 0, transparent 0deg, rgba(255, 224, 160, .34) 14deg, rgba(255, 230, 175, .42) 26deg, rgba(255, 224, 160, .34) 38deg, transparent 52deg, transparent 360deg);
  -webkit-mask-image: linear-gradient(#000, rgba(0, 0, 0, .6) 65%, rgba(0, 0, 0, .25)); mask-image: linear-gradient(#000, rgba(0, 0, 0, .6) 65%, rgba(0, 0, 0, .25)); }
.tr-kegel b { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff1c9; box-shadow: 0 0 6px 1px rgba(255, 220, 150, .8); opacity: 0; animation: stofje 6.5s linear infinite; }
.tr-kegel b:nth-of-type(1) { left: 45%; top: 34%; animation-delay: .6s; }
.tr-kegel b:nth-of-type(2) { left: 56%; top: 52%; animation-delay: 2.1s; animation-duration: 7.5s; }
.tr-kegel b:nth-of-type(3) { left: 39%; top: 68%; animation-delay: 3.4s; }
.tr-kegel b:nth-of-type(4) { left: 61%; top: 78%; animation-delay: 1.2s; animation-duration: 8s; }
.tr-kegel b:nth-of-type(5) { left: 50%; top: 22%; animation-delay: 4.6s; animation-duration: 5.5s; }
.tr-kegel b:nth-of-type(6) { left: 35%; top: 86%; animation-delay: 5.3s; }
.tr-kegel b:nth-of-type(7) { left: 64%; top: 42%; animation-delay: 2.8s; animation-duration: 7s; }
@keyframes stofje { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .9; } 75% { opacity: .55; } 100% { opacity: 0; transform: translate(16px, -70px); } }
/* aangaan: flikkeren, dan blijft hij branden (en ademt een beetje) */
.tas-rip.lamp-aan .tr-glas { animation: glas-aan .9s steps(1, end) .05s both; }
.tas-rip.lamp-aan :is(.tr-kegel, .tr-plas) { animation: kegel-aan .9s steps(1, end) .05s both, kegel-adem 5s ease-in-out 1.4s infinite alternate; }
@keyframes glas-aan {
  0% { fill: #2c2a48; filter: none; }
  15% { fill: #ffe7a8; filter: drop-shadow(0 0 8px #ffd27a) drop-shadow(0 0 22px rgba(255, 196, 100, .8)); }
  22% { fill: #4a4256; filter: none; }
  34% { fill: #ffe7a8; filter: drop-shadow(0 0 8px #ffd27a) drop-shadow(0 0 22px rgba(255, 196, 100, .8)); }
  40% { fill: #7a6a5a; filter: none; }
  52%, 100% { fill: #ffe7a8; filter: drop-shadow(0 0 8px #ffd27a) drop-shadow(0 0 26px rgba(255, 196, 100, .85)); }
}
@keyframes kegel-aan { 0% { opacity: 0; } 15% { opacity: .85; } 22% { opacity: .1; } 34% { opacity: 1; } 40% { opacity: .3; } 52%, 100% { opacity: 1; } }
@keyframes kegel-adem { from { opacity: 1; } to { opacity: .8; } }
/* de hits: het licht gaat omlaag; bij De Gouden Sleutel gaat alles aan */
.tas-rip.hits :is(.tr-kegel, .tr-plas) { opacity: .28 !important; transition: opacity .6s; }
.tas-rip.hits .tr-glas { fill: #8a7a62 !important; filter: none !important; }
.tas-rip.lichten :is(.tr-kegel, .tr-plas) { opacity: 1 !important; }
.tas-rip.lichten .tr-glas { fill: #fff3cf !important; filter: drop-shadow(0 0 10px #ffd27a) drop-shadow(0 0 34px rgba(255, 196, 100, .95)) !important; }

/* de tas valt in het licht: versnellen, plof (plat), terugveren; de schaduw groeit mee */
.tr-tasbeeld { animation: tas-val 1s .5s both, tas-wiebel 3.2s ease-in-out 2.7s infinite; }
.tr-grond { animation: grond-val 1s .5s both; }
@keyframes tas-val {
  0% { transform: translateY(-115vh) scale(.97, 1.07) rotate(-5deg); animation-timing-function: cubic-bezier(.55, 0, 1, .5); }
  52% { transform: translateY(0) scale(1.07, .9) rotate(.8deg); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  67% { transform: translateY(-4.5%) scale(.97, 1.04) rotate(-.7deg); animation-timing-function: cubic-bezier(.5, 0, .7, 1); }
  80% { transform: translateY(0) scale(1.025, .975) rotate(.2deg); }
  91% { transform: translateY(-.8%) scale(.995, 1.005); }
  100% { transform: none; }
}
@keyframes grond-val { 0% { opacity: 0; scale: .3; } 52% { opacity: 1; scale: 1.12 1; } 67% { scale: .92; } 100% { opacity: 1; scale: 1; } }
.tr-deeltje.is-wolk { border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--dk) 80%, white), transparent 70%); filter: blur(2px); }

/* de klep: de bovenrand van de dichte tas (vouw op ± 5,4%, onderrand op ± 16,5%) vouwt omhoog open; de open tas eronder
   komt van onder naar boven tevoorschijn. Tijdens het trekken aan de zegel komt hij al een kiertje los. */
.tr-tas { transition: --open .14s ease-out; }
.tr-tas.is-open { --open: 1; transition: --open .8s cubic-bezier(.3, .9, .35, 1.04); }
.tr-tas-open { opacity: 1; clip-path: inset(calc((1 - var(--open)) * 16.5%) -40px -70px -40px); }   /* negatieve randen: de slagschaduw mag buiten het beeld vallen */
.tr-tas-dicht { clip-path: inset(16.4% -40px -70px -40px); }
.tr-tas.is-open .tr-tas-dicht { opacity: 0; transition: opacity .3s .12s; }
.tr-klep { position: absolute; inset: 0; z-index: 1; pointer-events: none; clip-path: inset(4.6% 0 83.4% 0); transform-origin: 50% 5.4%;
  transform: perspective(760px) rotateX(calc(var(--open) * 172deg)); opacity: clamp(0, calc((.72 - var(--open)) * 6), 1); filter: brightness(calc(1 - var(--open) * .55)); }
.tr-klep img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* lichtstralen uit de opening */
.tr-stralen { position: absolute; left: 50%; bottom: 83%; width: 160%; aspect-ratio: 1.15; translate: -50% 0; transform-origin: 50% 100%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg at 50% 100%, rgba(255, 232, 175, .55) 0deg 2.6deg, transparent 2.6deg 9deg);
  -webkit-mask-image: radial-gradient(ellipse 46% 100% at 50% 100%, #000 8%, rgba(0, 0, 0, .5) 40%, transparent 72%); mask-image: radial-gradient(ellipse 46% 100% at 50% 100%, #000 8%, rgba(0, 0, 0, .5) 40%, transparent 72%); }
.tr-tas.is-open .tr-stralen { animation: stralen-op 1.1s cubic-bezier(.2, .8, .3, 1) .2s forwards, stralen-zwaai 5s ease-in-out 1.3s infinite alternate; }
@keyframes stralen-op { 0% { opacity: 0; scale: .5 .05; } 35% { opacity: 1; scale: 1.05 1.08; } 100% { opacity: .75; scale: 1; } }
@keyframes stralen-zwaai { from { rotate: -3deg; } to { rotate: 3deg; } }

/* de wijzer: een gouden pijl die laat zien welke kant je de zegel op trekt */
.tr-trek { position: absolute; left: 50%; top: -9%; width: 30%; z-index: 3; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .2s; }
.tr-trek path { fill: none; stroke: var(--goud); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 4px rgba(242, 193, 78, .8)); }
.tas-rip[data-fase="dicht"] .tr-trek { opacity: 1; }
.tas-rip[data-fase="dicht"] .tr-trek path { animation: trek-teken 2.6s ease-in-out 2.2s infinite; }
.tas-rip[data-fase="dicht"] .tr-trek path + path { animation-name: trek-punt; }
.tr-tasbeeld.spant .tr-trek { opacity: 0; }
@keyframes trek-teken { 0% { stroke-dashoffset: 100; opacity: 0; } 8% { opacity: 1; } 45%, 72% { stroke-dashoffset: 0; opacity: 1; } 92%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes trek-punt { 0%, 38% { stroke-dashoffset: 100; opacity: 0; } 40% { opacity: 1; } 55%, 72% { stroke-dashoffset: 0; opacity: 1; } 92%, 100% { stroke-dashoffset: 0; opacity: 0; } }

/* de kaarten komen uit de tas en waaieren open (de onderkant blijft achter de voorkant van de tas) */
.tr-stapel.uit-tas { transform: translate(-50%, -13%) scale(.8); }
.tr-stapel .tr-kaart { transform-origin: 50% 118%; }
.tr-stapel.waaier .tr-kaart { transform: translateY(-3%) rotate(calc((3.5 - var(--i)) * 6.5deg)); transition: transform .55s cubic-bezier(.2, 1.25, .4, 1) calc(var(--i) * 30ms); }
.tr-stapel.waaier .tr-achter { box-shadow: 0 0 22px -6px rgba(255, 220, 150, .7), 0 20px 40px -18px rgba(0, 0, 0, .9); }
.tr-stapel.boven { transition-duration: .7s; }

/* een omgedraaide kaart vliegt als platte kopie naar zijn vakje */
.tr-vlieg { position: fixed; z-index: 45; pointer-events: none; transform-origin: 50% 50%; border-radius: 4.5% / 3.2%; box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .9); }
.tr-vlieg .lk { position: absolute; inset: 0; border-radius: inherit; }

@media (prefers-reduced-motion: reduce) {
  .tas-rip.lamp-aan .tr-glas { animation: none; fill: #ffe7a8; }
  .tas-rip.lamp-aan :is(.tr-kegel, .tr-plas) { animation: none; opacity: 1; }
  .tr-kegel b, .tr-tasbeeld, .tr-grond, .tas-rip[data-fase="dicht"] .tr-trek path, .tr-tas.is-open .tr-stralen { animation: none !important; }
  .tr-tas, .tr-tas.is-open, .tr-stapel.waaier .tr-kaart { transition: none; }
  .tr-tas.is-open .tr-stralen { opacity: .6; }
  .tr-trek path { stroke-dashoffset: 0; }
}
/* geen blauwe tik-markering van de telefoon over de kaarten en de tas (Chrome op Android kleurde elke tik blauw) */
.tas-rip, .tas-rip *, .rip, .rip * { -webkit-tap-highlight-color: transparent; }
/* de stapel ligt net onder de lantaarn, niet ervoor */
.tr-stapel.boven { transform: translate(-50%, 15%) scale(.94); }
.tr-lamp { width: 52px; }
@media (prefers-reduced-motion: reduce) { .tr-stapel, .tr-stapel.uit-tas, .tr-stapel.boven { transform: translate(-50%, 15%) scale(.94); } }

/* ---------- juridische pagina's (voorwaarden, privacy, cookies, herroepen) en de cookiemelding ---------- */
.jur-tekst { max-width: 780px; line-height: 1.65; }
.jur-tekst h2 { font-size: 1.25rem; margin: 30px 0 8px; scroll-margin-top: 90px; }
.jur-tekst p, .jur-tekst li { color: color-mix(in srgb, var(--inkt) 88%, transparent); }
.jur-tekst .lijst { display: grid; gap: 8px; }
.jur-versie { margin: 0 0 14px; font: 500 .85rem/1.3 "IBM Plex Mono", monospace; color: var(--grijs); }
.jur-inhoud { margin: 0 0 18px; padding: 14px 18px; border: 1px solid var(--lijn); border-radius: 12px; }
.jur-inhoud ol { margin: 0; padding-left: 0; list-style: none; columns: 2 220px; column-gap: 24px; }
.jur-inhoud li { break-inside: avoid; padding: 3px 0; }
.jur-inhoud button { font: inherit; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.jur-bedrijf { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 24px; margin: 12px 0 8px; padding: 16px 18px; border: 1px solid var(--lijn); border-radius: 12px; }
.jur-bedrijf div { display: grid; gap: 2px; min-width: 0; }
.jur-bedrijf dt { font-size: .8rem; color: var(--grijs); }
.jur-bedrijf dd { margin: 0; overflow-wrap: anywhere; }
.jur-leeg { color: var(--grijs); font-style: italic; }
.jur-tabel { width: 100%; border-collapse: collapse; font-size: .92rem; }
.jur-tabel th, .jur-tabel td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--lijn); }
.jur-tabel th { font-size: .8rem; color: var(--grijs); font-weight: 600; }
.jur-formulier { margin-top: 14px; padding: 18px 20px; border: 1px dashed var(--lijn); border-radius: 12px; font-family: "IBM Plex Mono", monospace; font-size: .9rem; }
.jur-formulier p { margin: 0 0 12px; }
.co-recht a { color: inherit; }
.cookie-melding { position: fixed; left: 16px; bottom: 16px; z-index: 150; display: flex; align-items: center; gap: 14px; max-width: min(560px, calc(100vw - 32px)); padding: 12px 14px 12px 18px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(12, 15, 44, .96); color: #e8eaf6; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8); font-size: .92rem; }
.cookie-melding p { margin: 0; }
.cookie-melding b { color: #fff; }
.cookie-melding .link { color: var(--goud); }
.cookie-melding .knop { flex: none; min-height: 40px; padding: 0 18px; }
@media (max-width: 560px) { .cookie-melding { left: 12px; right: 12px; bottom: 12px; max-width: none; } }

/* ---------- Tas-opening in 3D (fx/pocket/tas.mjs) ----------
   Het doek ligt boven het DOM-decor en onder de knoppen en teksten; de DOM-tas en de kaarten blijven op hun plek (voor
   slepen en tikken), maar onzichtbaar. De stempel, de rij onderin, de flits en het schudden blijven DOM.
   drie-zacht: het 3D-doek kwam pas na de val van de DOM-tas; dan vloeien ze zacht in elkaar over. */
.tr3-doek { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; display: block; transition: opacity .5s; }
.tas-rip.tas-3d .tr-flood { z-index: 3; mix-blend-mode: screen; }
.tas-rip[data-fase="overzicht"] .tr3-doek { opacity: 0; pointer-events: none; }
.tas-rip.tas-3d :is(.tr-tasbeeld > img, .tr-klep, .tr-stralen, .tr-licht, .tr-tas-voor, .tr-grond, .tr-zegel img, .tr-kaart, .tr-deeltje),
.tas-rip.tas-3d :is(.tr-zegel::before, .tr-zegel::after, .tr-tas::after) { opacity: 0 !important; }
.tas-rip.tas-3d-zacht :is(.tr-tasbeeld > img, .tr-zegel img, .tr-grond) { transition: opacity .5s !important; }
.tas-rip.tas-3d .tr-zegel::before, .tas-rip.tas-3d .tr-zegel::after { animation: none; }
.tas-rip.tas-3d .tr-tasbeeld { animation: none; }