/* Leukeposters.nl huisstijl
   Serieus goede posters. Niet té serieus.
   Fraunces (met WONK en SOFT voor de knipoog) + Instrument Sans. Papier, inkt en tomaat. */

@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --papier: #F6F1E8;
  --papier-2: #EEE6D8;
  --papier-3: #E4D9C6;
  --wit: #FFFDF9;
  --inkt: #1E1B2E;
  --inkt-2: #55516A;
  --tomaat: #FF4F2E;
  --tomaat-donker: #D93A1B;
  --zon: #FFC94A;
  --blush: #F7D3C8;
  --salie: #CBD5BF;
  --lijn: rgba(30, 27, 46, .13);
  --schaduw: 0 1px 2px rgba(30, 27, 46, .06), 0 10px 30px -12px rgba(30, 27, 46, .28);
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --tekst: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 14px;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Grid- en flexkinderen mogen smaller worden dan hun beeld, anders loopt mobiel buiten het scherm */
.held__in > *, .merkblok > *, .planner-teaser > *, .lijstkop__in > *, .product > *, .info > *, .afrekenen > *, .planner > *, .voet__in > *, .raster > *, .ruimtes > * { min-width: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--inkt); font: 400 17px/1.6 var(--tekst); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -.015em; margin: 0 0 .5em; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 96; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5.2vw, 4.1rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: 1.2rem; font-variation-settings: "SOFT" 100, "opsz" 24; }
em, i { font-style: italic; }
h1 em, h2 em { color: var(--tomaat); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 96; font-weight: 500; }
p { margin: 0 0 1em; }
.lead { font-size: 1.15rem; color: var(--inkt-2); max-width: 62ch; }
.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tomaat-donker); margin-bottom: .8em; }
.klein { font-size: .85rem; color: var(--inkt-2); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.smal { max-width: 820px; }
:focus-visible { outline: 3px solid var(--tomaat); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--inkt); color: var(--papier); padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 12px; }
svg path, svg circle, svg rect { vector-effect: non-scaling-stroke; }

/* ---------- Knoppen en links ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: .9em 1.5em; border-radius: 999px; border: 2px solid transparent; font-weight: 700; text-decoration: none; line-height: 1.1; transition: transform .15s, background .15s, box-shadow .15s; white-space: nowrap; }
.knop svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.knop--tomaat { background: var(--tomaat); color: #fff; box-shadow: 0 6px 0 -2px var(--tomaat-donker); }
.knop--tomaat:hover { transform: translateY(-2px) rotate(-.6deg); background: #ff5c3d; }
.knop--tomaat:active { transform: translateY(1px); box-shadow: 0 3px 0 -2px var(--tomaat-donker); }
.knop--rand { border-color: var(--inkt); background: transparent; }
.knop--rand:hover { background: var(--inkt); color: var(--papier); }
.knop--klein { padding: .55em 1.1em; font-size: .9rem; }
.knop--breed { width: 100%; }
.knop--icoon { padding: .9em; }
.knop--icoon[aria-pressed="true"] svg { fill: var(--tomaat); stroke: var(--tomaat); }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.link { background: none; border: 0; padding: 0; color: var(--inkt); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--tomaat); }
.link--pijl { display: inline-flex; align-items: center; gap: .4em; text-decoration: none; }
.link--pijl svg { width: 1.1em; height: 1.1em; fill: none; stroke: var(--tomaat); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.link--pijl:hover svg { transform: translateX(4px); }
.label { display: inline-block; font-size: .78rem; font-weight: 700; padding: .3em .8em; border-radius: 999px; background: var(--papier-2); text-decoration: none; }
.label:hover { background: var(--blush); }

/* Sticker: de signatuur. Een tikkeltje scheef, zoals het logo. */
.sticker { display: inline-block; font-weight: 700; font-size: .85rem; padding: .45em .95em; border-radius: 6px; transform: rotate(-3deg); box-shadow: 0 3px 0 rgba(30, 27, 46, .15); }
.sticker--zon { background: var(--zon); color: var(--inkt); }
.sticker--tomaat { background: var(--tomaat); color: #fff; }

/* ---------- Actiebalk en kop ---------- */
.actiebalk { background: var(--inkt); color: var(--papier); font-size: .85rem; }
.actiebalk p { margin: 0; display: flex; justify-content: center; gap: 36px; padding: 8px 16px; }
.actiebalk span { display: inline-flex; align-items: center; gap: 8px; }
.actiebalk svg { width: 16px; height: 16px; fill: none; stroke: var(--zon); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.actiebalk b { color: var(--zon); }
.kop { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--papier) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--lijn); }
.kop__in { display: flex; align-items: center; gap: 28px; height: 74px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--inkt); flex-shrink: 0; }
.logo .merk { width: 34px; height: 40px; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.logo:hover .merk { transform: rotate(6deg); }
.logo__woord { font-family: var(--display); font-weight: 650; font-size: 1.55rem; letter-spacing: -.02em; font-variation-settings: "SOFT" 100, "opsz" 48; line-height: 1; }
.logo__woord i { font-weight: 500; color: var(--tomaat); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 48; margin-right: 1px; }
.logo__woord small { font-family: var(--tekst); font-size: .5em; font-weight: 600; color: var(--inkt-2); letter-spacing: 0; margin-left: 1px; }
.nav { flex: 1; }
.nav__lijst { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.nav__item > a { display: block; padding: 10px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; }
.nav__item > a:hover, .nav__item--uitklap:focus-within > a { background: var(--papier-2); }
.kop__in { position: relative; }
.nav__item--uitklap { position: static; }
.nav__item--uitklap > a::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
.nav__item--uitklap.open > a::after, .nav__item--uitklap:has(:focus-visible) > a::after { transform: translateY(0) rotate(-135deg); }
/* Megamenu: stijlen links, live voorbeeld rechts, ruimtes onderaan */
.mega { position: absolute; top: calc(100% + 1px); left: 50%; width: min(1040px, calc(100vw - 2 * var(--gutter))); transform: translateX(-50%); grid-template-columns: 290px 1fr; background: var(--wit); border-radius: 0 0 var(--r) var(--r); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .35); border: 1px solid var(--lijn); border-top: 0; overflow: hidden; z-index: 50; display: none; }
/* Dicht = helemaal weg (display: none), zodat het menu nooit kan meeflitsen bij het laden of terugbladeren.
   Open via de muis (.open, gezet door app.js) of met het toetsenbord (:focus-visible). */
.nav__item--uitklap.open .mega, .nav__item--uitklap:has(:focus-visible) .mega { display: grid; animation: megaIn .22s cubic-bezier(.2, .9, .3, 1); }
@keyframes megaIn { from { opacity: 0; transform: translate(-50%, 8px); } }
.mega::before { content: ""; position: absolute; top: -24px; left: 0; right: 0; height: 24px; }
.mega__kop { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--inkt-2); font-weight: 700; margin: 0 0 10px 12px; }
.mega__lijst { padding: 22px 14px 18px; border-right: 1px solid var(--lijn); display: flex; flex-direction: column; }
.mega__lijst ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.mega__lijst li a { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: .95rem; transition: background .15s, padding .15s; }
.mega__lijst li a small { margin-left: auto; font-size: .75rem; color: var(--inkt-2); font-weight: 600; background: var(--papier); padding: 1px 8px; border-radius: 999px; }
.mega__lijst li a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; opacity: 0; transform: translateX(-6px); transition: .15s; flex-shrink: 0; }
.mega__lijst li a:hover, .mega__lijst li a.actief { background: var(--blush); color: var(--inkt); padding-left: 16px; }
.mega__lijst li a.actief small { background: var(--wit); }
.mega__lijst li a.actief svg { opacity: 1; transform: none; }
.mega__alle { margin: 14px 12px 0; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--tomaat-donker); }
.mega__alle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.mega__voorbeelden { position: relative; background: var(--papier-2); min-height: 380px; overflow: hidden; }
.mega__voorbeelden::before { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: var(--blush); opacity: .55; left: 4%; top: 50%; transform: translateY(-50%); }
.mega__voorbeeld { position: absolute; inset: 0; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 24px; padding: 28px 36px 28px 24px; text-decoration: none; color: var(--inkt); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.mega__voorbeeld.actief { opacity: 1; visibility: visible; }
.mega__posters { position: relative; height: 300px; }
.mega__posters img { position: absolute; top: 50%; left: 50%; width: 36%; transition: transform .45s cubic-bezier(.2, 1.3, .4, 1); }
.mega__posters img:nth-child(1) { transform: translate(-128%, -46%) rotate(-8deg); }
.mega__posters img:nth-child(2) { width: 42%; z-index: 2; transform: translate(-50%, -54%) rotate(1deg); }
.mega__posters img:nth-child(3) { transform: translate(30%, -44%) rotate(7deg); }
.mega__voorbeeld.actief .mega__posters img:nth-child(1) { animation: waaierL .5s cubic-bezier(.2, 1.3, .4, 1); }
.mega__voorbeeld.actief .mega__posters img:nth-child(3) { animation: waaierR .5s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes waaierL { from { transform: translate(-50%, -50%) rotate(0); } }
@keyframes waaierR { from { transform: translate(-50%, -50%) rotate(0); } }
.mega__voorbeeld:hover .mega__posters img:nth-child(1) { transform: translate(-136%, -48%) rotate(-11deg); }
.mega__voorbeeld:hover .mega__posters img:nth-child(3) { transform: translate(38%, -46%) rotate(10deg); }
.mega__tekst { display: grid; gap: 8px; position: relative; }
.mega__tekst b { font-family: var(--display); font-size: 1.9rem; line-height: 1.02; letter-spacing: -.02em; }
.mega__tekst small { color: var(--inkt-2); font-size: .95rem; line-height: 1.45; }
.mega__tekst .link { margin-top: 6px; }
.mega__ruimtes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 20px 16px; border-top: 1px solid var(--lijn); background: var(--wit); }
.mega__ruimtes .mega__kop { margin: 0 8px 0 0; }
.mega__ruimtes a { display: inline-flex; align-items: center; gap: 9px; padding: 5px 16px 5px 5px; border-radius: 999px; background: var(--papier); text-decoration: none; font-weight: 600; font-size: .9rem; transition: background .15s, color .15s, transform .15s; }
.mega__ruimtes img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.mega__ruimtes a:hover { background: var(--inkt); color: var(--papier); transform: translateY(-2px); }
.kop__acties { display: flex; gap: 4px; margin-left: auto; }
.kop__knop { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent; color: var(--inkt); text-decoration: none; }
.kop__knop:hover { background: var(--papier-2); }
.kop__knop svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.teller { position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--tomaat); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
.teller.bots { animation: bots .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes bots { 40% { transform: scale(1.45) rotate(-8deg); } }
.kop__menu { display: none; }

/* ---------- Held ---------- */
.held { padding: clamp(28px, 5vw, 64px) 0 clamp(40px, 6vw, 80px); overflow: hidden; }
.held__in { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.held h1 { margin: .45em 0 .4em; font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1; }
.held h1 em { display: block; }
.held__sub { font-size: 1.15rem; color: var(--inkt-2); max-width: 46ch; margin-bottom: 1.6em; }
.held__usps { list-style: none; padding: 0; margin: 1.8em 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .92rem; }
.held__usps li { display: flex; gap: 8px; align-items: center; }
.held__usps svg { width: 18px; height: 18px; fill: none; stroke: var(--tomaat); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.held__beeld { position: relative; }
.held__foto { border-radius: 22px; box-shadow: var(--schaduw); width: 100%; transform: rotate(1.2deg); }
.held__label { position: absolute; left: -18px; bottom: 28px; background: var(--wit); border-radius: 12px; padding: 12px 16px; box-shadow: var(--schaduw); text-decoration: none; display: grid; transform: rotate(-2deg); transition: transform .2s; }
.held__label:hover { transform: rotate(0) translateY(-3px); }
.held__label small { font-size: .72rem; color: var(--inkt-2); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.held__label b { font-family: var(--display); font-size: 1.15rem; }
.held__label span { font-size: .85rem; color: var(--tomaat-donker); font-weight: 700; }
.held__sticker { position: absolute; top: -18px; right: 22px; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; text-align: center; font-family: var(--display); font-size: 1.35rem; line-height: 1; transform: rotate(12deg); }

/* ---------- Secties ---------- */
.sectie { padding: clamp(48px, 7vw, 96px) 0; }
.sectie--krap { padding-top: 12px; }
.sectie--papier2 { background: var(--papier-2); }
.sectie--inkt { background: var(--inkt); color: var(--papier); }
.sectiekop { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.sectiekop h2 { margin-bottom: .2em; }
.sectiekop p { margin: 0; color: var(--inkt-2); }
.sectie--inkt .sectiekop p { color: var(--papier-3); }
.meer { margin-top: 24px; }

/* Ruimtes */
.ruimtes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ruimte { position: relative; border-radius: var(--r); overflow: hidden; text-decoration: none; aspect-ratio: 3 / 2; background: var(--papier-2); }
.ruimte__beeld { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.ruimte:hover .ruimte__beeld { transform: scale(1.05); }
.ruimte__label { position: absolute; left: 14px; bottom: 14px; background: var(--wit); border-radius: 10px; padding: 8px 14px; display: grid; line-height: 1.25; box-shadow: var(--schaduw); }
.ruimte__label b { font-family: var(--display); font-size: 1.15rem; }
.ruimte__label small { color: var(--inkt-2); font-size: .8rem; }

/* ---------- Productkaarten ---------- */
.raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 22px; }
.kaart { position: relative; }
.kaart[hidden] { display: none; }
.kaart__beeld { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--tint, var(--papier-2)); border-radius: var(--r); overflow: hidden; padding: 13% 16%; }
.kaart__poster { width: auto; max-height: 100%; box-shadow: 0 2px 3px rgba(30, 27, 46, .12), 0 14px 22px -10px rgba(30, 27, 46, .45); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); transform-origin: 50% 0; }
.kaart__sfeer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
@media (hover: hover) {
  .kaart:hover .kaart__poster { transform: rotate(-2.5deg); }
  .kaart:hover .kaart__sfeer { opacity: 1; transition-delay: .45s; }
}
.kaart__hart { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 253, 249, .9); display: grid; place-items: center; z-index: 2; transition: transform .2s; }
.kaart__hart:hover { transform: scale(1.1); }
.kaart__hart svg { width: 19px; height: 19px; fill: none; stroke: var(--inkt); stroke-width: 2; }
.kaart__hart[aria-pressed="true"] svg { fill: var(--tomaat); stroke: var(--tomaat); }
.kaart__tekst { padding: 12px 2px 0; }
.kaart__tekst h3 { font-size: 1.05rem; margin: 0 0 2px; font-variation-settings: "SOFT" 100, "opsz" 24; }
.kaart__tekst h3 a { text-decoration: none; }
.kaart__tekst h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.kaart__tekst p { margin: 0; color: var(--inkt-2); font-size: .9rem; }

/* ---------- Merkblok ---------- */
.merkblok { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.merkblok__beeld { background: var(--blush); border-radius: 28px; aspect-ratio: 1; display: grid; place-items: center; }
.merkblok__beeld .merk { width: 52%; height: auto; animation: schommel 5s ease-in-out infinite; transform-origin: 50% 9%; }
@keyframes schommel { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.merkblok__tekst p { color: var(--inkt-2); max-width: 56ch; }

/* Stijlen */
.stijlen { display: flex; flex-wrap: wrap; gap: 12px; }
.stijl { display: inline-flex; align-items: baseline; gap: 10px; padding: 14px 22px; border: 1.5px solid rgba(246, 241, 232, .25); border-radius: 999px; text-decoration: none; font-family: var(--display); font-size: 1.3rem; transition: .2s; }
.stijl small { font-family: var(--tekst); font-size: .8rem; color: var(--zon); }
.stijl:hover { background: var(--tomaat); border-color: var(--tomaat); transform: rotate(-2deg); }

/* Muurplanner teaser */
.planner-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.planner-teaser p { color: var(--inkt-2); max-width: 50ch; margin-bottom: 1.5em; }
.planner-mini { position: relative; background: var(--salie); border-radius: 26px; aspect-ratio: 5 / 4; display: flex; justify-content: center; align-items: flex-start; gap: 4%; padding: 11% 10% 0; }
.planner-mini__vak { width: 22%; box-shadow: 0 10px 18px -8px rgba(30, 27, 46, .5); }
.planner-mini__vak--0 { width: 30%; }
.planner-mini__vak--1 { margin-top: 5%; transform: rotate(-3deg); }
.planner-mini__vak--2 { margin-top: 2%; }
.planner-mini__bank { position: absolute; left: 14%; right: 14%; bottom: 10%; height: 20%; background: #EDE6DA; border-radius: 22px 22px 8px 8px; box-shadow: inset 0 -10px 0 rgba(30, 27, 46, .07); }

/* Gidsen */
.gidsen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gidskaart { background: var(--wit); border-radius: var(--r); padding: 24px; text-decoration: none; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--lijn); transition: transform .2s, box-shadow .2s; }
.gidskaart:hover { transform: translateY(-4px) rotate(-.5deg); box-shadow: var(--schaduw); }
.gidskaart__nr { font-family: var(--display); font-size: 2rem; color: var(--tomaat); font-variation-settings: "WONK" 1; }
.gidskaart h2, .gidskaart h3 { font-size: 1.25rem; margin: 0; }
.gidskaart p { color: var(--inkt-2); font-size: .93rem; flex: 1; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--lijn); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font-weight: 700; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--display); font-size: 1.7rem; color: var(--tomaat); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--inkt-2); padding-bottom: 12px; max-width: 64ch; }

/* USP-band en voet */
.usps { border-top: 1px solid var(--lijn); }
.usps ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-top: 28px; padding-bottom: 28px; margin: 0 auto; }
.usps li { display: flex; gap: 12px; align-items: center; font-size: .95rem; }
.usps svg { width: 30px; height: 30px; flex-shrink: 0; fill: none; stroke: var(--tomaat); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.voet { background: var(--inkt); color: var(--papier-3); padding: 64px 0 28px; font-size: .95rem; }
.voet a { text-decoration: none; }
.voet a:hover { color: var(--zon); }
.voet .logo { color: var(--papier); }
.voet__in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.voet__slogan { font-family: var(--display); font-size: 1.5rem; color: var(--papier); line-height: 1.2; margin: 18px 0; }
.voet__slogan i { color: var(--tomaat); font-variation-settings: "WONK" 1; }
.voet__kop { color: var(--papier); font-weight: 700; margin: 0 0 .7em; }
.voet ul { list-style: none; margin: 0 0 1.4em; padding: 0; }
.voet li { padding: 3px 0; }
.voet__onder { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; border-top: 1px solid rgba(246, 241, 232, .15); margin-top: 40px; padding-top: 22px; font-size: .82rem; }
.voet__onder p { margin: 0; }
.betaal { display: flex; flex-wrap: wrap; gap: 6px; }
.betaal span { border: 1px solid rgba(246, 241, 232, .25); border-radius: 6px; padding: 2px 8px; font-weight: 600; }

/* ---------- Lijstpagina's ---------- */
.lijstkop { padding: 28px 0 24px; }
.lijstkop--beeld .lijstkop__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.lijstkop h1 { margin-top: .3em; }
.lijstkop__beeld img { border-radius: 18px; transform: rotate(1deg); box-shadow: var(--schaduw); }
.kruimel { font-size: .85rem; color: var(--inkt-2); padding: 16px 0 4px; }
.kruimel a { text-decoration: none; }
.kruimel a:hover { text-decoration: underline; }
.filter { position: sticky; top: 74px; z-index: 20; background: var(--papier); padding: 12px 0; margin-bottom: 18px; border-bottom: 1px solid var(--lijn); }
.filter__top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.zoekveld { display: flex; align-items: center; gap: 8px; background: var(--wit); border: 1.5px solid var(--lijn); border-radius: 999px; padding: 0 16px; flex: 1; min-width: 200px; max-width: 420px; }
.zoekveld:focus-within { border-color: var(--inkt); }
.zoekveld svg { width: 18px; height: 18px; fill: none; stroke: var(--inkt-2); stroke-width: 2; flex-shrink: 0; }
.zoekveld input { border: 0; background: transparent; padding: 11px 0; width: 100%; outline: none; }
.sorteer select { appearance: none; border: 1.5px solid var(--lijn); background: var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1B2E' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; border-radius: 999px; padding: 9px 38px 9px 16px; font-weight: 600; }
.filter__aantal { margin-left: auto; color: var(--inkt-2); font-size: .9rem; }
.filter__paneel { display: grid; gap: 14px; padding: 18px 0 6px; }
.filter__groep { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: start; }
.filter__label { font-weight: 700; font-size: .85rem; padding-top: 7px; }
.filter__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1.5px solid var(--lijn); background: var(--wit); border-radius: 999px; padding: 6px 14px; font-size: .88rem; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.chip:hover { border-color: var(--inkt); }
.chip[aria-pressed="true"] { background: var(--inkt); color: var(--papier); border-color: var(--inkt); }
.chip--kleur span { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.leeg { text-align: center; padding: 40px 0; color: var(--inkt-2); }

/* ---------- Productpagina ---------- */
.product { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px, 4vw, 56px); padding-top: 12px; padding-bottom: 40px; align-items: start; }
.galerij { position: sticky; top: 92px; }
.galerij__hoofd { position: relative; border-radius: 18px; overflow: hidden; background: var(--papier-2); aspect-ratio: 1264 / 848; }
.galerij__dia { margin: 0; height: 100%; }
.galerij__dia > img { width: 100%; height: 100%; object-fit: cover; }
.galerij__dia figcaption { position: absolute; left: 14px; bottom: 14px; background: rgba(255, 253, 249, .92); border-radius: 8px; padding: 5px 11px; font-size: .8rem; font-weight: 600; }
.galerij__poster { height: 100%; display: grid; place-items: center; background: var(--tint); padding: 6%; }
.galerij__poster { position: relative; overflow: hidden; cursor: zoom-in; }
.galerij__poster img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 86%; max-height: 86%; box-shadow: 0 16px 30px -12px rgba(30, 27, 46, .5); transition: transform .25s ease-out; will-change: transform; }
.galerij__muurknop { position: absolute; right: 14px; bottom: 14px; display: inline-flex; gap: 8px; align-items: center; border: 0; border-radius: 999px; padding: 9px 15px; background: var(--inkt); color: var(--papier); font-weight: 700; font-size: .85rem; }
.galerij__muurknop svg, .vergelijker__titel svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.galerij__duimen { display: flex; gap: 10px; margin-top: 12px; }
.galerij__duim { width: 92px; aspect-ratio: 1264 / 848; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--papier-2); }
.galerij__duim img { width: 100%; height: 100%; object-fit: cover; }
.galerij__duim[aria-pressed="true"] { border-color: var(--inkt); }
.vergelijker { margin-top: 16px; background: var(--wit); border-radius: var(--r); padding: 16px; border: 1px solid var(--lijn); }
.vergelijker__titel { display: flex; gap: 8px; align-items: center; font-weight: 700; margin-bottom: 10px; }
.vergelijker svg { width: 100%; border-radius: 8px; }
.vergelijker [data-vergelijker-poster] rect { transition: all .35s cubic-bezier(.3, 1.3, .5, 1); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.koop__labels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.koop h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: .25em; }
.koop__pitch { font-family: var(--display); font-style: italic; font-size: 1.25rem; color: var(--inkt-2); font-variation-settings: "SOFT" 100, "WONK" 1; }
.koop__prijs { font-size: 1.9rem; font-weight: 700; margin: .4em 0 .8em; }
.koop__prijs small { font-size: .85rem; font-weight: 500; color: var(--inkt-2); }
.koop__form fieldset { border: 0; padding: 0; margin: 0; }
.koop__form legend { font-weight: 700; margin-bottom: 10px; }
.koop__form legend span { font-weight: 400; color: var(--inkt-2); }
.maten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.maat input { position: absolute; opacity: 0; pointer-events: none; }
.maat span { display: grid; text-align: center; padding: 10px 6px; border: 1.5px solid var(--lijn); border-radius: 12px; background: var(--wit); cursor: pointer; transition: .15s; line-height: 1.25; }
.maat span small { color: var(--inkt-2); font-size: .82rem; }
.maat span:hover { border-color: var(--inkt); }
.maat input:checked + span { border-color: var(--inkt); background: var(--inkt); color: var(--papier); box-shadow: 0 4px 0 -1px var(--tomaat); }
.maat input:checked + span small { color: var(--zon); }
.maat input:focus-visible + span { outline: 3px solid var(--tomaat); outline-offset: 2px; }
.koop__advies { font-size: .88rem; color: var(--inkt-2); margin: 12px 0 18px; min-height: 2.6em; }
.koop__knoppen { display: flex; gap: 10px; }
.koop__actie { display: flex; gap: 12px; align-items: center; background: var(--zon); border-radius: 12px; padding: 12px 16px; margin: 18px 0; transform: rotate(-.6deg); }
.koop__actie p { margin: 0; font-size: .92rem; }
.koop__actie svg { width: 28px; height: 28px; flex-shrink: 0; fill: none; stroke: var(--inkt); stroke-width: 1.8; }
.koop__usps { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; font-size: .92rem; }
.koop__usps li { display: flex; gap: 10px; align-items: center; }
.koop__usps svg { width: 20px; height: 20px; fill: none; stroke: var(--tomaat); stroke-width: 1.8; flex-shrink: 0; }
.info { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px, 5vw, 70px); }
.info__tekst p { max-width: 62ch; color: var(--inkt-2); font-size: 1.05rem; }
.specs { margin: 0; background: var(--wit); border-radius: var(--r); padding: 6px 22px; border: 1px solid var(--lijn); }
.specs div { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--lijn); font-size: .93rem; }
.specs div:last-child { border: 0; }
.specs dt { font-weight: 700; }
.specs dd { margin: 0; color: var(--inkt-2); }
.koopbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: var(--wit); border-top: 1px solid var(--lijn); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px -12px rgba(30, 27, 46, .25); }
.koopbalk div { display: grid; line-height: 1.25; min-width: 0; }
.koopbalk b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
.koopbalk span { font-weight: 700; color: var(--tomaat-donker); }

/* ---------- Gidsen en infopagina's ---------- */
.gids, .info-pagina { padding-bottom: 60px; }
.gids h1, .info-pagina h1 { margin-top: .3em; }
.kortantwoord { background: var(--wit); border-left: 5px solid var(--tomaat); border-radius: 0 var(--r) var(--r) 0; padding: 20px 24px; margin: 24px 0 36px; box-shadow: var(--schaduw); }
.kortantwoord__label { font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tomaat-donker); margin-bottom: .4em; }
.kortantwoord p:last-child { margin: 0; font-size: 1.08rem; }
.gids__tekst h2 { font-size: 1.6rem; margin-top: 1.6em; }
.gids__tekst p, .gids__tekst li { color: var(--inkt-2); }
.gids__tekst li { margin-bottom: .5em; }
.vinkjes { list-style: none; padding: 0; }
.vinkjes li { position: relative; padding-left: 30px; margin-bottom: .6em; }
.vinkjes li::before { content: ""; position: absolute; left: 0; top: .35em; width: 18px; height: 18px; border-radius: 50%; background: var(--tomaat) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.stappen { padding-left: 1.2em; }
.stappen li { margin-bottom: .8em; color: var(--inkt-2); }
.tabel-wrap { overflow-x: auto; margin: 16px 0 24px; border-radius: var(--r); border: 1px solid var(--lijn); background: var(--wit); }
.tabel { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 560px; }
.tabel th, .tabel td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tabel thead th { background: var(--papier-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.tabel tbody th { white-space: nowrap; }
.tabel tr:last-child > * { border-bottom: 0; }
.vierhonderdvier { text-align: center; }
.vierhonderdvier__merk .merk { width: 120px; margin: 0 auto 20px; transform: rotate(-24deg); }
.vierhonderdvier .knoppen { justify-content: center; }

/* ---------- Lade (winkelwagen) en zoeklaag ---------- */
.lade, .kiezer { position: fixed; inset: 0; z-index: 60; }
.lade__achter { position: absolute; inset: 0; background: rgba(30, 27, 46, .45); animation: in .2s; }
.lade__paneel { position: absolute; right: 0; top: 0; bottom: 0; width: min(440px, 100%); background: var(--papier); display: flex; flex-direction: column; animation: schuif .28s cubic-bezier(.2, .9, .3, 1); }
@keyframes schuif { from { transform: translateX(100%); } }
@keyframes in { from { opacity: 0; } }
.lade__kop { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--lijn); }
.lade__kop h2 { font-size: 1.4rem; margin: 0; }
.lade__inhoud { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; }
.mandregel { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--lijn); align-items: center; }
.mandregel img { width: 64px; box-shadow: 0 6px 12px -6px rgba(30, 27, 46, .5); }
.mandregel h3 { font-size: 1rem; margin: 0 0 2px; }
.mandregel h3 a { text-decoration: none; }
.mandregel p { margin: 0; font-size: .85rem; color: var(--inkt-2); }
.mandregel__prijs { text-align: right; font-weight: 700; }
.mandregel__prijs s { display: block; font-weight: 400; color: var(--inkt-2); font-size: .82rem; }
.mandregel__gratis { color: var(--tomaat-donker); font-size: .78rem; font-weight: 700; display: block; }
.aantal { display: inline-flex; align-items: center; border: 1.5px solid var(--lijn); border-radius: 999px; margin-top: 6px; }
.aantal button { width: 30px; height: 28px; border: 0; background: none; font-weight: 700; }
.aantal span { min-width: 22px; text-align: center; font-size: .88rem; font-weight: 700; }
.mand__voortgang { background: var(--wit); border-radius: 12px; padding: 12px 14px; font-size: .88rem; margin-bottom: 8px; }
.mand__balk { height: 7px; border-radius: 99px; background: var(--papier-2); margin-top: 8px; overflow: hidden; }
.mand__balk span { display: block; height: 100%; background: var(--tomaat); border-radius: 99px; transition: width .4s; }
.mand__tip { background: var(--zon); border-radius: 12px; padding: 12px 14px; font-size: .88rem; margin: 8px 0; transform: rotate(-.5deg); }
.mand__totaal { margin-top: auto; padding-top: 16px; display: grid; gap: 6px; }
.mand__totaal div { display: flex; justify-content: space-between; }
.mand__totaal .eind { font-size: 1.2rem; font-weight: 700; border-top: 1px solid var(--lijn); padding-top: 10px; margin-top: 4px; }
.mand__totaal .korting { color: var(--tomaat-donker); font-weight: 700; }
.mand__totaal .knop { margin-top: 12px; }
.mand__leeg { text-align: center; margin: auto; color: var(--inkt-2); }
.mand__leeg .merk { width: 70px; margin: 0 auto 14px; transform: rotate(-10deg); }
.zoeklaag { position: fixed; inset: 0; z-index: 60; background: rgba(30, 27, 46, .45); }
.zoeklaag__paneel { background: var(--papier); padding: 18px 0 26px; max-height: 88vh; overflow-y: auto; animation: in .2s; }
.zoeklaag__paneel > .wrap:first-child { display: flex; gap: 10px; align-items: center; }
.zoekveld--groot { max-width: none; }
.zoekveld--groot input { font-size: 1.15rem; padding: 14px 0; }
.zoeklaag__resultaat { margin-top: 18px; }
.zoeklaag__resultaat .raster { grid-template-columns: repeat(6, 1fr); gap: 18px 14px; }
.mini { text-decoration: none; display: grid; gap: 6px; font-size: .88rem; font-weight: 600; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.mini__beeld { aspect-ratio: 4 / 5; background: var(--tint); border-radius: 10px; display: grid; place-items: center; padding: 14%; min-width: 0; overflow: hidden; }
.mini__beeld img { max-height: 100%; max-width: 100%; width: auto; height: auto; box-shadow: 0 8px 14px -8px rgba(30, 27, 46, .5); }
.zoeklaag__tips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Posterhulp (chat) ---------- */
.hulp { position: fixed; right: 18px; bottom: 18px; z-index: 50; }
.productpagina .hulp { bottom: 84px; }
.hulp__knop { display: inline-flex; gap: 9px; align-items: center; border: 0; border-radius: 999px; padding: 13px 18px; background: var(--inkt); color: var(--papier); font-weight: 700; box-shadow: var(--schaduw); transition: transform .2s; }
.hulp__knop:hover { transform: translateY(-2px) rotate(-2deg); }
.hulp__knop svg { width: 20px; height: 20px; fill: none; stroke: var(--zon); stroke-width: 2; }
.hulp__paneel { position: absolute; right: 0; bottom: 64px; width: min(380px, calc(100vw - 36px)); height: min(560px, calc(100vh - 120px)); background: var(--papier); border-radius: 20px; box-shadow: 0 30px 60px -20px rgba(30, 27, 46, .5); border: 1px solid var(--lijn); display: flex; flex-direction: column; overflow: hidden; animation: in .2s; }
.hulp__paneel[hidden] { display: none; }
.hulp__kop { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 12px 16px; background: var(--inkt); color: var(--papier); }
.hulp__kop > div { display: flex; gap: 10px; align-items: center; }
.hulp__kop .merk { width: 28px; color: var(--papier); }
.hulp__kop p { margin: 0; display: grid; line-height: 1.25; }
.hulp__kop span { font-size: .8rem; color: var(--papier-3); }
.hulp__kop .kop__knop { color: var(--papier); }
.hulp__kop .kop__knop:hover { background: rgba(255, 255, 255, .1); }
.hulp__gesprek { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.bericht { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: .93rem; line-height: 1.45; animation: in .25s; }
.bericht p { margin: 0 0 .4em; }
.bericht p:last-child { margin: 0; }
.bericht--bot { background: var(--wit); border-bottom-left-radius: 4px; align-self: flex-start; border: 1px solid var(--lijn); }
.bericht--jij { background: var(--tomaat); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.keuzes { display: flex; flex-wrap: wrap; gap: 6px; }
.keuzes .chip { font-size: .85rem; }
.hulp__tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.hulp__tips .mini { font-size: .75rem; }
.hulp__invoer { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--lijn); background: var(--wit); }
.hulp__invoer input { flex: 1; border: 1.5px solid var(--lijn); border-radius: 999px; padding: 10px 14px; outline: none; }
.hulp__invoer input:focus { border-color: var(--inkt); }
.hulp__invoer button { width: 44px; border-radius: 50%; border: 0; background: var(--tomaat); display: grid; place-items: center; }
.hulp__invoer svg { width: 20px; fill: none; stroke: #fff; stroke-width: 2.2; }

/* ---------- Muurplanner ---------- */
.planner { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 28px; align-items: start; }
.planner__podium { position: sticky; top: 92px; display: grid; gap: 14px; }
.planner__doek { position: relative; border-radius: var(--r); overflow: hidden; background: var(--papier-2); box-shadow: var(--schaduw); }
.planner__doek canvas { display: block; width: 100%; height: auto; touch-action: none; }
.planner__hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(0, 0, 0, .62); color: #fff; font-size: .82rem; font-weight: 600; padding: 6px 13px; border-radius: 999px; margin: 0; pointer-events: none; white-space: nowrap; }
.planner__opties { display: grid; gap: 24px; }
.stap__kop { font-size: 1.15rem; display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.stap__kop span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tomaat); color: #fff; font: 700 .85rem/1 var(--tekst); flex-shrink: 0; }
.upload { display: flex; gap: 12px; align-items: center; padding: 14px; border: 2px dashed var(--tomaat); border-radius: var(--r); background: var(--wit); cursor: pointer; margin-bottom: 12px; transition: background .2s; }
.upload:hover { background: var(--papier-2); }
.upload svg { width: 34px; height: 34px; flex-shrink: 0; fill: none; stroke: var(--tomaat); stroke-width: 1.8; }
.upload span { display: grid; line-height: 1.3; }
.upload small { color: var(--inkt-2); font-size: .82rem; }
.upload.actief { border-style: solid; background: var(--papier-2); }
.upload:focus-within { outline: 3px solid var(--tomaat); outline-offset: 2px; }
.kalibratie { background: var(--wit); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; font-size: .88rem; display: grid; gap: 6px; border: 1px solid var(--lijn); }
.kalibratie label { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; }
.kalibratie input { width: 84px; padding: 6px 8px; border: 1.5px solid var(--lijn); border-radius: 8px; }
.kalibratie small { color: var(--inkt-2); }
.muurkeuzes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.muurkeuze { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: none; position: relative; }
.muurkeuze img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.muurkeuze span { position: absolute; inset: auto 0 0 0; font-size: .62rem; font-weight: 700; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); padding: 12px 5px 3px; text-align: left; line-height: 1.15; }
.muurkeuze[aria-pressed="true"] { border-color: var(--tomaat); box-shadow: 0 0 0 2px var(--tomaat); }
.planner__indelingen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.indeling { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border: 1.5px solid var(--lijn); border-radius: 12px; background: var(--wit); font-weight: 600; font-size: .8rem; }
.indeling svg { width: 56px; height: 42px; color: var(--inkt-2); }
.indeling[aria-pressed="true"] { border-color: var(--inkt); box-shadow: 0 3px 0 -1px var(--tomaat); }
.indeling[aria-pressed="true"] svg { color: var(--tomaat); }
.vakken { display: grid; gap: 8px; }
.vak { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; padding: 8px 12px 8px 8px; }
.vak__beeld { width: 48px; height: 64px; padding: 0; border: 0; background: var(--papier-2); display: grid; place-items: center; font-size: 1.4rem; }
.vak__beeld img { width: 100%; height: 100%; object-fit: cover; border: 2px solid #18161d; }
.vak__info { display: grid; gap: 4px; }
.vak__info b { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vak__info select { border: 1.5px solid var(--lijn); border-radius: 8px; padding: 5px 8px; font-size: .82rem; background: var(--wit); max-width: 100%; }
.lijstkeuze { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.lijstknop { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border: 1.5px solid var(--lijn); border-radius: 999px; background: var(--wit); font-weight: 600; font-size: .85rem; }
.lijstknop span { width: 18px; height: 18px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.lijstknop[aria-pressed="true"] { border-color: var(--inkt); background: var(--inkt); color: var(--papier); }
.planner__totaal { background: var(--wit); border-radius: var(--r); padding: 16px 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; border: 1px solid var(--lijn); }
.planner__totaal p { margin: 0; }
.planner__totaal s { color: var(--inkt-2); font-weight: 400; }
.planner__regels { font-size: .85rem; color: var(--inkt-2); }
.planner-foto { position: relative; display: block; border-radius: var(--r); overflow: hidden; box-shadow: var(--schaduw); }
.planner-foto img { width: 100%; transition: transform .6s; }
.planner-foto:hover img { transform: scale(1.04); }
.planner-foto .sticker { position: absolute; left: 18px; top: 18px; display: inline-flex; gap: 6px; align-items: center; }
.planner-foto .sticker svg, .knop svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; }
.kiezer__paneel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(880px, calc(100% - 32px)); max-height: 86vh; background: var(--papier); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; animation: in .2s; }
.kiezer__paneel .zoekveld { margin: 14px 20px 0; max-width: none; }
.kiezer__raster { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; padding: 16px 20px 20px; overflow-y: auto; }
.kiezer__raster button { border: 0; background: none; padding: 0; text-align: left; }

/* ---------- Lijsten: elke poster hangt in een lijst, ook al verkopen we die (nog) niet ---------- */
.lijst--zwart, .lijst--eiken, .lijst--wit { border-style: solid; border-width: clamp(3px, .4vw, 5px); box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 4px 8px -2px rgba(0, 0, 0, .25), 0 22px 30px -14px rgba(0, 0, 0, .6) !important; }
.lijst--zwart { border-color: #34303d #1d1a24 #0e0d13 #26232e; }
.lijst--eiken { border-color: #d4a676 #b88a5a #94693f #c39360; }
.lijst--wit { border-color: #ffffff #f1ede4 #d6d0c3 #f7f4ed; }
.mini__beeld .lijst--zwart, .mini__beeld .lijst--eiken, .mini__beeld .lijst--wit, .planner-mini .lijst--zwart, .planner-mini .lijst--eiken { border-width: 3px; }
.galerij__poster .lijst--zwart, .galerij__poster .lijst--eiken, .galerij__poster .lijst--wit { border-width: clamp(5px, .7vw, 9px); }

/* ---------- Afrekenen ---------- */
.afrekenen { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: start; }
.afrekenen fieldset { border: 0; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; }
.afrekenen legend { font-family: var(--display); font-size: 1.3rem; margin-bottom: 8px; font-weight: 600; }
.afrekenen label { display: grid; gap: 5px; font-weight: 600; font-size: .9rem; }
.afrekenen input, .afrekenen select { border: 1.5px solid var(--lijn); border-radius: 10px; padding: 12px 14px; background: var(--wit); font-weight: 400; }
.afrekenen input:focus, .afrekenen select:focus { outline: none; border-color: var(--inkt); }
.afrekenen input[aria-invalid="true"] { border-color: var(--tomaat); }
.rij { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.betaalkeuze { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.betaalkeuze label { display: block; }
.betaalkeuze input { position: absolute; opacity: 0; }
.betaalkeuze span { display: block; padding: 12px; border: 1.5px solid var(--lijn); border-radius: 10px; background: var(--wit); text-align: center; }
.betaalkeuze input:checked + span { border-color: var(--inkt); box-shadow: 0 3px 0 -1px var(--tomaat); }
.betaalkeuze input:focus-visible + span { outline: 3px solid var(--tomaat); }
.afrekenen__overzicht { background: var(--wit); border-radius: var(--r); padding: 22px; position: sticky; top: 92px; border: 1px solid var(--lijn); display: flex; flex-direction: column; }
.melding { background: var(--zon); padding: 14px 16px; border-radius: 12px; margin-top: 16px; }

/* ---------- Responsief ---------- */
@media (max-width: 1100px) {
  .raster { grid-template-columns: repeat(3, 1fr); }
  .gidsen { grid-template-columns: repeat(2, 1fr); }
  .zoeklaag__resultaat .raster { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .kop__menu { display: inline-grid; }
  .kop__in { gap: 6px; height: 64px; }
  .logo__woord { font-size: 1.3rem; }
  .logo .merk { width: 28px; height: 33px; }
  .nav { position: fixed; inset: 64px 0 0 0; background: var(--papier); padding: 12px var(--gutter) 40px; overflow-y: auto; display: none; }
  .nav.open { display: block; }
  .nav__lijst { flex-direction: column; }
  .nav__item > a { font-family: var(--display); font-size: 1.5rem; padding: 10px 0; }
  .mega, .nav__item--uitklap .mega { display: grid; animation: none; position: static; opacity: 1; visibility: visible; transform: none; width: auto; box-shadow: none; border: 0; grid-template-columns: 1fr; background: none; border-radius: 0; }
  .mega__voorbeelden, .mega::before, .nav__item--uitklap > a::after { display: none; }
  .mega__lijst { padding: 0 0 8px; border: 0; }
  .mega__lijst ul { grid-template-columns: 1fr 1fr; }
  .mega__ruimtes { padding: 8px 0 16px; border: 0; background: none; }
  .filter { top: 64px; }
  .held__in, .merkblok, .planner-teaser, .lijstkop--beeld .lijstkop__in, .product, .info, .afrekenen { grid-template-columns: 1fr; }
  .held__beeld { order: -1; }
  .held__label { left: 10px; bottom: 14px; }
  .held__sticker { width: 74px; height: 74px; font-size: 1.1rem; right: 10px; top: -10px; }
  .merkblok__beeld { max-width: 320px; }
  .ruimtes { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .usps ul { grid-template-columns: repeat(2, 1fr); }
  .voet__in { grid-template-columns: 1fr 1fr; }
  .voet__merk { grid-column: 1 / -1; }
  .galerij { position: static; }
  .planner { grid-template-columns: 1fr; }
  .planner__podium { position: static; }
  .afrekenen__overzicht { position: static; order: -1; }
  .actiebalk__extra { display: none !important; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .raster { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
  .kaart__beeld { padding: 12% 14%; }
  .kaart__hart { width: 34px; height: 34px; top: 6px; right: 6px; }
  .gidsen { grid-template-columns: 1fr; }
  .maten { grid-template-columns: repeat(3, 1fr); }
  .filter__groep { grid-template-columns: 1fr; gap: 6px; }
  .filter__aantal { margin-left: 0; width: 100%; }
  .zoekveld { min-width: 0; max-width: none; flex-basis: 100%; }
  .zoeklaag__resultaat .raster, .kiezer__raster { grid-template-columns: repeat(3, 1fr); }
  .voet__in { grid-template-columns: 1fr; }
  .usps ul { grid-template-columns: 1fr; gap: 12px; }
  .hulp__knop span { display: none; }
  .hulp__knop { padding: 14px; }
  .galerij__muurknop { font-size: .78rem; padding: 7px 12px; }
  .galerij__dia figcaption { display: none; }
  .rij, .betaalkeuze { grid-template-columns: 1fr; }
  .specs div { grid-template-columns: 90px 1fr; }
  .stijl { font-size: 1.1rem; padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Pim, de posterhulp ---------- */
.pim { display: block; width: 100%; height: auto; overflow: visible; }
.pim__lijf { animation: pimDobber 3.6s ease-in-out infinite; transform-origin: 32px 70px; }
.pim__zwaai { transform-box: view-box; transform-origin: 53px 41px; animation: pimZwaai 4.5s ease-in-out infinite; }
.pim__oog { transform-box: fill-box; transform-origin: center; animation: pimKnipper 5.2s infinite; }
.pim__oog--r { animation: pimKnipoog 7s infinite; }
@keyframes pimDobber { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(1.5deg); } }
@keyframes pimZwaai { 0%, 55%, 100% { transform: rotate(0); } 62% { transform: rotate(-22deg); } 69% { transform: rotate(14deg); } 76% { transform: rotate(-18deg); } 83% { transform: rotate(8deg); } }
@keyframes pimKnipper { 0%, 90%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.1); } }
@keyframes pimKnipoog { 0%, 70%, 80%, 100% { transform: scaleY(1); } 73%, 77% { transform: scaleY(.12); } }
.hulp { right: 20px; bottom: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hulp__knop { position: relative; padding: 8px 20px 8px 66px; min-height: 52px; background: var(--inkt); color: var(--papier); font-family: var(--display); font-size: 1rem; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55); }
.hulp__knop:hover { transform: translateY(-2px); }
.hulp__avatar { position: absolute; left: 4px; bottom: 2px; width: 58px; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.hulp__knop:hover .hulp__avatar { transform: translateY(-6px) rotate(-6deg); }
.hulp__knop:hover .pim__zwaai { animation-duration: 1.2s; }
.hulp__ballon { position: relative; margin: 0; max-width: 250px; background: var(--wit); color: var(--inkt); border-radius: 18px 18px 4px 18px; padding: 12px 34px 12px 14px; font-size: .9rem; font-weight: 600; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .45); border: 2px solid var(--inkt); cursor: pointer; animation: ballon .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ballon { from { opacity: 0; transform: translateY(10px) scale(.9); } }
.hulp__ballon-weg { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--papier-2); display: grid; place-items: center; padding: 0; }
.hulp__ballon-weg svg { width: 12px; height: 12px; fill: none; stroke: var(--inkt); stroke-width: 3; }
.hulp__paneel { bottom: 74px; border-radius: 24px; }
.hulp__kop { padding: 12px 12px 12px 14px; background: var(--inkt); }
.hulp__kop-pim { width: 44px; flex-shrink: 0; background: var(--papier); border-radius: 50%; padding: 4px 4px 0; overflow: hidden; height: 44px; display: block; }
.hulp__kop b { font-family: var(--display); font-size: 1.15rem; }
.bericht-rij { display: flex; align-items: flex-end; gap: 8px; max-width: 92%; animation: in .25s; }
.bericht__pim { width: 30px; flex-shrink: 0; height: 32px; overflow: hidden; }
.bericht-rij .bericht { max-width: none; }
.bericht--typt { display: inline-flex; gap: 4px; padding: 12px 14px; }
.bericht--typt span { width: 7px; height: 7px; border-radius: 50%; background: var(--inkt-2); animation: typt 1s infinite; }
.bericht--typt span:nth-child(2) { animation-delay: .15s; }
.bericht--typt span:nth-child(3) { animation-delay: .3s; }
@keyframes typt { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.vierhonderdvier__merk .pim { width: 150px; margin: 0 auto 18px; }

/* ---------- Gidsen met fotografie ---------- */
.gidskaart { padding: 0; overflow: hidden; gap: 0; }
.gidskaart__foto { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--papier-2); }
.gidskaart__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.gidskaart:hover .gidskaart__foto img { transform: scale(1.06); }
.gidskaart__foto .gidskaart__nr { position: absolute; left: 14px; bottom: 10px; background: var(--wit); border-radius: 999px; padding: 0 14px; font-size: 1.4rem; line-height: 1.5; }
.gidskaart__tekst { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px 22px; flex: 1; }
.gidskaart--groot h2 { font-size: 1.5rem; }
.gidsen:has(.gidskaart--groot) { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.gidskop { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: 8px 0 30px; }
.gidskop .kortantwoord { margin-bottom: 0; }
.gidskop__foto { margin: 0; }
.gidskop__foto img { width: 100%; border-radius: var(--r); box-shadow: var(--schaduw); transform: rotate(1.2deg); }
.gids__stappen { display: grid; gap: clamp(36px, 6vw, 72px); padding: 20px 0 30px; }
.gidsstap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.gidsstap figure { margin: 0; }
.gidsstap__foto { width: 100%; border-radius: var(--r); box-shadow: var(--schaduw); aspect-ratio: 3 / 2; object-fit: cover; }
.gidsstap:nth-child(even) figure { order: 2; }
.gidsstap:nth-child(even) .gidsstap__foto { transform: rotate(-1deg); }
.gidsstap:nth-child(odd) .gidsstap__foto { transform: rotate(1deg); }
.gidsstap--zonder { grid-template-columns: 1fr; max-width: 820px; }
.gidsstap__nr { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--blush); font-family: var(--display); font-weight: 800; font-size: 1.05rem; margin-bottom: 10px; }
.gidsstap h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: .4em; }
.gidsstap__tekst p, .gidsstap__tekst li { color: var(--inkt-2); }
.gidsstap__tekst .tabel-wrap { margin-bottom: 0; }
.info-pagina__foto { margin: 8px 0 28px; }
.info-pagina__foto img { width: 100%; border-radius: var(--r); box-shadow: var(--schaduw); aspect-ratio: 16 / 8; object-fit: cover; }

/* ---------- Fotoblok: zo hangt hij thuis ---------- */
.mozaiek { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mozaiek--6 { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; }
.mozaiek--6 .mozaiek__tegel:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mozaiek--6 .mozaiek__tegel:nth-child(4) { grid-column: span 2; }
.mozaiek__tegel { position: relative; border-radius: var(--r); overflow: hidden; display: block; text-decoration: none; background: var(--papier-2); }
.mozaiek--3 .mozaiek__tegel { aspect-ratio: 3 / 2; }
.mozaiek__tegel img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.mozaiek__tegel:hover img { transform: scale(1.06); }
.mozaiek__label { position: absolute; left: 12px; bottom: 12px; display: grid; background: var(--wit); border-radius: 14px; padding: 7px 13px; line-height: 1.25; box-shadow: var(--schaduw); transform: translateY(6px); opacity: .95; transition: transform .25s; }
.mozaiek__label b { font-size: .9rem; }
.mozaiek__label small { font-size: .78rem; color: var(--tomaat-donker); font-weight: 700; }
.mozaiek__tegel:hover .mozaiek__label { transform: none; }

@media (max-width: 900px) {
  .gidskop, .gidsstap { grid-template-columns: 1fr; }
  .gidsstap:nth-child(even) figure { order: 0; }
  .gidsen:has(.gidskaart--groot) { grid-template-columns: 1fr; }
  .mozaiek--6 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .mozaiek--6 .mozaiek__tegel:nth-child(4) { grid-column: span 1; }
  .mozaiek--3 { grid-template-columns: 1fr 1fr; }
  .mozaiek--3 .mozaiek__tegel:nth-child(3) { display: none; }
}
@media (max-width: 640px) {
  .hulp { right: 12px; bottom: 12px; }
  .hulp__knop { padding: 0; width: 60px; height: 60px; min-height: 0; border-radius: 50%; }
  .hulp__knop .hulp__tekst { display: none; }
  .hulp__knop .hulp__avatar { display: block; left: 5px; bottom: 4px; width: 50px; }
  .hulp__ballon { max-width: 220px; font-size: .85rem; }
  .productpagina .hulp { bottom: 80px; }
}
.hulp svg.pim, .vierhonderdvier svg.pim { width: 100%; height: auto; fill: initial; stroke: none !important; }

.held__video { display: block; aspect-ratio: 3 / 2; object-fit: cover; background: var(--papier-2); }
@media (prefers-reduced-motion: reduce) { .held__video { animation: none; } }

/* ---------- Categoriekop met eigen sfeer: vervaagde kamerscène in duotone ---------- */
.lijstkop--scene { position: relative; isolation: isolate; overflow: hidden; background: var(--inkt); color: var(--papier); padding: 10px 0 clamp(44px, 6vw, 72px); }
.lijstkop__scene { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; z-index: -2; filter: grayscale(1) contrast(1.2) brightness(1.15) blur(5px); opacity: .85; mix-blend-mode: luminosity; }
.lijstkop--scene::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, color-mix(in srgb, var(--inkt) 94%, transparent) 22%, color-mix(in srgb, var(--inkt) 72%, transparent) 55%, color-mix(in srgb, var(--inkt) 50%, transparent)); }
.lijstkop--scene::after { content: ""; position: absolute; width: 380px; height: 380px; right: -110px; bottom: -190px; border-radius: 50%; background: var(--tomaat); opacity: .85; z-index: -1; }
.lijstkop--scene .kruimel, .lijstkop--scene .kruimel a { color: color-mix(in srgb, var(--papier) 75%, transparent); }
.lijstkop--scene h1 { color: var(--papier); font-size: clamp(2.8rem, 6.4vw, 5.4rem); margin: .1em 0 .3em; }
.lijstkop--scene .lead { color: color-mix(in srgb, var(--papier) 82%, transparent); max-width: 54ch; }
.lijstkop__aantal { display: inline-block; margin: 18px 0 0; background: var(--blush); color: var(--inkt); font-weight: 800; font-size: .85rem; padding: 4px 14px; border-radius: 999px; transform: rotate(-2deg); }
.lijstkop--scene .lijstkop__beeld { position: relative; }
.lijstkop--scene .lijstkop__beeld::before { content: ""; position: absolute; inset: -7% -6% -9% 8%; background: var(--blush); border-radius: 58% 42% 50% 50% / 45% 55% 45% 55%; transform: rotate(-8deg); z-index: -1; }
.lijstkop--scene .lijstkop__beeld img { border: 7px solid var(--papier); transform: rotate(1.6deg); }
.lijstkop--scene .lijstkop__in { position: relative; }
@media (max-width: 900px) { .lijstkop--scene .lijstkop__beeld { max-width: 520px; } .lijstkop--scene::after { width: 220px; height: 220px; right: -90px; bottom: -120px; } }

/* ---------- Categoriepagina's: meer diepte en kleur ---------- */
.lijstkop--scene { padding-bottom: clamp(80px, 9vw, 120px); }
.lijstkop__spook { position: absolute; left: -1vw; bottom: -.14em; z-index: 0; font-family: var(--display); font-weight: 800; font-size: clamp(6rem, 17vw, 16rem); line-height: .8; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--blush) 30%, transparent); white-space: nowrap; pointer-events: none; text-transform: lowercase; }
.lijstkop--scene .krul { display: block; width: 180px; height: 16px; color: var(--blush); margin: -6px 0 18px; }
.lijstkop__usps { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lijstkop__usps li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--papier) 12%, transparent); border: 1px solid color-mix(in srgb, var(--papier) 28%, transparent); font-size: .85rem; font-weight: 600; color: var(--papier); backdrop-filter: blur(6px); }
.lijstkop__usps li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blush); }
.lijstkop__poster { position: absolute; left: -9%; bottom: -14%; width: 27%; z-index: 2; transform: rotate(-7deg); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.lijstkop__poster:hover { transform: rotate(-3deg) translateY(-6px); }
.lijstkop__poster img { width: 100%; box-shadow: 0 2px 3px rgba(0, 0, 0, .3), 0 24px 40px -14px rgba(0, 0, 0, .7) !important; }
.lijstkop__golf { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 60px; z-index: 1; display: block; }
.lijstkop--scene::after { bottom: -150px; }

/* Zwevende filterbalk die over de golf valt */
.lijstkop--scene + .sectie--krap { position: relative; z-index: 3; padding-top: 0; }
.lijstkop--scene + .sectie--krap .filter { margin-top: -46px; background: var(--wit); border: 0; border-radius: 22px; padding: 12px 16px; box-shadow: 0 18px 40px -18px rgba(14, 59, 47, .45); margin-bottom: 30px; }
.lijstkop--scene + .sectie--krap .filter .zoekveld { background: var(--papier); border-color: transparent; }
.lijstkop--scene + .sectie--krap .chip[aria-pressed="true"] { background: var(--blush); color: var(--inkt); border-color: var(--blush); }

/* Productkaarten met diepte */
.kaart__beeld { box-shadow: 0 1px 2px rgba(14, 59, 47, .06), 0 10px 24px -16px rgba(14, 59, 47, .35); transition: transform .3s cubic-bezier(.3, 1.3, .5, 1), box-shadow .3s; }
@media (hover: hover) { .kaart:hover .kaart__beeld { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(14, 59, 47, .08), 0 26px 40px -18px rgba(14, 59, 47, .5); } }
.kaart__tekst p { display: inline-block; margin-top: 4px; background: color-mix(in srgb, var(--blush) 35%, transparent); color: var(--inkt); font-weight: 600; font-size: .8rem; padding: 1px 9px; border-radius: 999px; }

/* Opvallende tussentegels */
.promo { grid-column: span 2; position: relative; border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; text-decoration: none; min-height: 100%; box-shadow: 0 18px 40px -22px rgba(14, 59, 47, .55); }
.promo[hidden] { display: none; }
.promo__tekst { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 26px; position: relative; z-index: 1; }
.promo__tekst b { font-family: var(--display); font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.02; letter-spacing: -.02em; }
.promo__tekst small { font-size: .92rem; line-height: 1.45; }
.promo__label { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; background: var(--inkt); color: var(--blush); padding: 4px 10px; border-radius: 999px; }
.promo__label svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.promo--zon { background: var(--blush); color: var(--inkt); }
.promo__beeld { position: relative; }
.promo__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.promo--zon:hover .promo__beeld img { transform: scale(1.06); }
.promo--inkt { background: var(--inkt); color: var(--papier); grid-template-columns: .8fr 1.2fr; }
.promo--inkt .promo__tekst small { color: color-mix(in srgb, var(--papier) 80%, transparent); }
.promo--inkt .knop { align-self: flex-start; }
.promo__pim { display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--blush) 90%, transparent) 0 46%, transparent 47%); }
.promo__pim svg.pim { width: min(150px, 80%); height: auto; stroke: none; }

/* Donker vlak voor "Zo hangt het" en een kaart voor de veelgestelde vragen */
.sectie--donker { background: var(--inkt); color: var(--papier); position: relative; overflow: hidden; }
.sectie--donker .sectiekop h2 { color: var(--papier); }
.sectie--donker .sectiekop p { color: color-mix(in srgb, var(--papier) 75%, transparent); }
.sectie--donker::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: var(--blush); opacity: .9; left: -120px; top: -140px; }
.sectie--donker .wrap { position: relative; }
.sectie--donker .mozaiek__tegel { box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6); border: 5px solid var(--papier); }
.faqkaart { background: var(--wit); border-radius: 28px; padding: clamp(24px, 4vw, 44px); box-shadow: 0 24px 50px -30px rgba(14, 59, 47, .5); position: relative; }
.faqkaart::before { content: "?"; position: absolute; right: 28px; top: -26px; width: 60px; height: 60px; border-radius: 50%; background: var(--blush); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 2rem; color: var(--inkt); transform: rotate(10deg); }
.faqkaart .faq details { border-color: color-mix(in srgb, var(--blush) 60%, transparent); }

@media (max-width: 900px) {
  .promo { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .promo__beeld { aspect-ratio: 3 / 2; order: -1; }
  .promo--inkt { grid-template-columns: 110px 1fr; }
  .lijstkop__poster { left: -4%; bottom: -10%; width: 26%; }
}
@media (max-width: 640px) {
  .promo--inkt { grid-template-columns: 1fr; }
  .promo__pim { padding: 16px 0 0; }
  .promo__pim svg.pim { width: 110px; }
  .lijstkop__usps li { font-size: .78rem; }
}

/* ---------- Formaatkaarten (in plaats van een tabel) ---------- */
.formaten { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 18px 0 8px; }
.formaat { position: relative; display: flex; flex-direction: column; background: var(--wit); border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(14, 59, 47, .06), 0 14px 30px -20px rgba(14, 59, 47, .45); transition: transform .3s cubic-bezier(.3, 1.3, .5, 1), box-shadow .3s; }
.formaat:hover { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(14, 59, 47, .08), 0 26px 40px -22px rgba(14, 59, 47, .55); }
.formaat--top { outline: 3px solid var(--blush); }
.formaat__lint { position: absolute; top: 12px; right: -34px; z-index: 2; transform: rotate(35deg); background: var(--tomaat); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 40px; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4); }
.formaat__schaal { height: 190px; display: flex; align-items: flex-end; justify-content: center; padding: 18px 10px 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--blush) 22%, var(--papier)) 0 78%, color-mix(in srgb, var(--inkt) 12%, var(--papier-2)) 78%); }
.formaat__poster { display: block; box-sizing: border-box; border-width: 3px !important; overflow: hidden; background: var(--papier-2); flex-shrink: 0; }
.formaat__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.formaat__info { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.formaat__info h3 { font-size: 1.45rem; margin: 0; letter-spacing: -.02em; }
.formaat__info h3 small { font-size: .8rem; font-weight: 600; color: var(--inkt-2); letter-spacing: 0; }
.formaat__prijs { align-self: flex-start; background: var(--blush); color: var(--inkt); font-weight: 800; font-size: .88rem; padding: 2px 11px; border-radius: 999px; }
.formaat__past, .formaat__lijst { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--inkt-2); }
.formaat__past b, .formaat__lijst b { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--inkt); margin-bottom: 2px; }
.formaat__lijst { display: flex; gap: 8px; align-items: flex-start; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--lijn); }
.formaat__lijst svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--tomaat); stroke-width: 2; margin-top: 2px; }
.formaten__noot { font-size: .82rem; color: var(--inkt-2); margin: 6px 0 0; }
.gidsstap__breed { grid-column: 1 / -1; }
.gidsstap:has(.gidsstap__breed) { row-gap: 10px; }
.info-pagina .formaten { grid-template-columns: repeat(5, 1fr); gap: 10px; }
.info-pagina .formaat__info { padding: 12px; }
.info-pagina .formaat__info h3 { font-size: 1.2rem; }
@media (max-width: 1000px) { .formaten, .info-pagina .formaten { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .formaten, .info-pagina .formaten { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .formaat { scroll-snap-align: start; }
}

/* Gidsstap met formaatkaarten: foto en tekst naast elkaar, kaarten eronder over de volle breedte */
.gidsstap:has(.gidsstap__breed) > figure { order: 0; }
.gidsstap__breed { order: 5; }
.lijstkop--scene .lijstkop__in { z-index: 1; }

/* ---------- Speelse elementen in de zijkanten van categoriepagina's ---------- */
.sectie--speels { position: relative; overflow-x: clip; }
.sectie--speels > .wrap { position: relative; z-index: 1; }
.speels { position: absolute; z-index: 0; pointer-events: none; display: none; }
@media (min-width: 1380px) { .speels { display: block; } }
.speels--links { left: max(-30px, calc((100vw - var(--wrap)) / 2 - 150px)); }
.speels--rechts { right: max(-30px, calc((100vw - var(--wrap)) / 2 - 170px)); }
.speels--veeg { top: 520px; width: 230px; transform: rotate(-24deg); }
.speels--hanger { top: 260px; width: 92px; }
.speels--hanger .speels__schommel { transform-origin: 40px 8px; animation: schommel 4.5s ease-in-out infinite; transform-box: view-box; }
.speels--krul { top: 340px; width: 56px; }
.speels--stippen { top: 600px; width: 130px; height: 190px; background: radial-gradient(circle, var(--tomaat) 0 5px, transparent 6px) 0 0 / 26px 26px; -webkit-mask: linear-gradient(135deg, #000 35%, transparent 85%); mask: linear-gradient(135deg, #000 35%, transparent 85%); }
.speels svg { width: 100%; height: auto; display: block; overflow: visible; }
.galerij__doek { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }

/* ---------- Thema's (kerst, valentijn, ...): alleen zichtbaar als html[data-thema] past, zie concept.css ---------- */
.thema-tekst, .actiebalk .thema-tekst, p.sticker.thema-tekst { display: none; }
html[data-thema] .actiebalk p > span:not(.thema-tekst), html[data-thema] .thema-standaard { display: none; }
html[data-thema] .actiebalk { background: var(--thema); }
html[data-thema] .actiebalk b, html[data-thema] .actiebalk svg { color: #fff; stroke: #fff; }
html[data-thema] .held__sticker { background: var(--thema); color: #fff; }
.themablok { background: var(--thema, var(--tomaat)); color: #fff; position: relative; overflow: hidden; }
.themablok::before, .themablok::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.themablok::before { width: 320px; height: 320px; right: -80px; top: -160px; }
.themablok::after { width: 180px; height: 180px; left: 8%; bottom: -120px; }
.themablok__in { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px 32px; padding-top: 26px; padding-bottom: 26px; }
.themablok__label { grid-column: 1; grid-row: 1 / span 2; justify-self: start; margin: 0; font-family: var(--display); font-weight: 800; font-size: 1rem; background: #fff; color: var(--thema); border-radius: 999px; padding: 6px 16px; transform: rotate(-4deg); }
.themablok h2 { grid-column: 2; margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: #fff; }
.themablok p:not(.themablok__label) { margin: 0; color: rgba(255, 255, 255, .9); grid-column: 2; }
.themablok .knop { grid-row: 1 / span 2; grid-column: 3; background: #fff; color: var(--inkt); box-shadow: none; }
@media (max-width: 760px) { .themablok__in { grid-template-columns: 1fr; } .themablok__label { justify-self: start; grid-row: auto; } .themablok h2, .themablok p:not(.themablok__label), .themablok .knop { grid-column: auto; grid-row: auto; justify-self: start; } }

/* ---------- Contourlijn rond de posters in het overzicht ---------- */
.kaart__beeld { outline: 1.5px solid color-mix(in srgb, var(--inkt) 22%, transparent); outline-offset: 6px; }
@media (hover: hover) { .kaart:hover .kaart__beeld { outline-color: var(--tomaat); outline-width: 2px; } }

/* ---------- Doorkijk: groepsfoto door een boog ---------- */
.doorkijk { padding: clamp(48px, 7vw, 96px) 0; background: linear-gradient(180deg, var(--papier) 0 55%, var(--papier-2) 55%); }
.doorkijk__in { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.doorkijk__boog { margin: 0; position: relative; border-radius: 999px 999px 26px 26px; overflow: hidden; aspect-ratio: 4 / 3.4; border: 12px solid var(--inkt); box-shadow: 0 0 0 6px var(--blush), 0 40px 70px -30px rgba(14, 59, 47, .6); }
.doorkijk__boog img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transform: scale(1.04); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.doorkijk__boog:hover img { transform: scale(1.1); }
.doorkijk__tekst h2 { font-size: clamp(2rem, 4vw, 3rem); }
.doorkijk__lijst { margin: 18px 0 24px; padding: 0; list-style: none; counter-reset: dk; display: grid; gap: 6px; }
.doorkijk__lijst li { counter-increment: dk; display: flex; gap: 10px; align-items: center; }
.doorkijk__lijst li::before { content: counter(dk); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blush); font-weight: 800; font-size: .8rem; flex-shrink: 0; }
.doorkijk__lijst a { text-decoration: none; font-weight: 600; }
.doorkijk__lijst a:hover { text-decoration: underline; text-decoration-color: var(--tomaat); }

/* ---------- Nieuwsbrief ---------- */
.nieuwsbrief { background: var(--blush); color: var(--inkt); position: relative; overflow: hidden; }
.nieuwsbrief::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: var(--tomaat); right: -90px; top: -120px; opacity: .9; }
.nieuwsbrief__in { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1.2fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; padding-top: 44px; padding-bottom: 44px; }
.nieuwsbrief__pim { width: 110px; }
.nieuwsbrief__pim svg.pim { stroke: none; }
.nieuwsbrief h2 { margin: 0 0 .3em; }
.nieuwsbrief h2 em { color: var(--inkt); text-decoration: underline; text-decoration-color: var(--tomaat); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.nieuwsbrief p { margin: 0; }
.nieuwsbrief__form { display: flex; flex-wrap: wrap; gap: 10px; background: var(--wit); padding: 10px; border-radius: 22px; box-shadow: 0 20px 40px -24px rgba(14, 59, 47, .6); }
.nieuwsbrief__form input { flex: 1; min-width: 160px; border: 0; background: var(--papier); border-radius: 14px; padding: 12px 14px; font-size: 1rem; outline: none; }
.nieuwsbrief__form input:focus { box-shadow: 0 0 0 2px var(--inkt); }
.nieuwsbrief__klein { width: 100%; font-size: .78rem; color: var(--inkt-2); padding: 0 6px; }
.nieuwsbrief__dank { width: 100%; font-weight: 700; padding: 4px 6px; }
@media (max-width: 900px) {
  .doorkijk__in, .nieuwsbrief__in { grid-template-columns: 1fr; }
  .nieuwsbrief__pim { width: 80px; }
  .doorkijk__boog { border-width: 8px; }
}

/* ---------- Productfoto's: inzoomen bij aanwijzen en volledig scherm ---------- */
.galerij__poster.zoomt img { transition: transform .08s linear; }
.galerij__dia > img, .galerij__doek { cursor: zoom-in; }
.zoomhint { position: absolute; right: 14px; top: 14px; z-index: 2; background: rgba(14, 59, 47, .82); color: #fff; font-size: .75rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; pointer-events: none; transition: opacity .2s; }
.galerij__poster.zoomt .zoomhint { opacity: 0; }
.lichtbak { position: fixed; inset: 0; z-index: 80; background: rgba(10, 20, 16, .94); display: grid; }
.lichtbak__doek { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.lichtbak__doek.sleept { cursor: grabbing; }
.lichtbak__doek img { position: absolute; left: 50%; top: 50%; max-width: 92vw; max-height: 88vh; transform-origin: center; user-select: none; -webkit-user-drag: none; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
.lichtbak__knoppen { position: absolute; right: 18px; top: 18px; display: flex; gap: 8px; }
.lichtbak__knoppen button { width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--inkt); font: 700 1.4rem/1 var(--tekst); display: grid; place-items: center; }
.lichtbak__knoppen svg { width: 20px; height: 20px; fill: none; stroke: var(--inkt); stroke-width: 2.4; }
.lichtbak__hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0; color: rgba(255, 255, 255, .8); font-size: .85rem; background: rgba(0, 0, 0, .35); padding: 6px 14px; border-radius: 999px; white-space: nowrap; }

/* ---------- Mobiel menu: hoofdonderdelen als tegels bovenaan, stijlen en ruimtes compact eronder ---------- */
@media (max-width: 900px) {
  .nav__lijst { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .nav__item > a { background: var(--wit); border-radius: 16px; padding: 16px; font-size: 1.15rem; box-shadow: 0 6px 16px -10px rgba(14, 59, 47, .35); }
  .nav__item--uitklap { grid-column: 1 / -1; order: 5; }
  .nav__item--uitklap > a { background: var(--inkt); color: var(--papier); }
  .nav__item--uitklap > a::after { display: none; }
  .mega { padding-top: 6px; }
  .mega__lijst ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .mega__lijst li a { padding: 8px 14px; background: var(--wit); border-radius: 999px; font-size: .92rem; }
  .mega__lijst li a:hover, .mega__lijst li a.actief { padding-left: 14px; }
  .mega__lijst li a small, .mega__lijst li a svg, .mega__alle { display: none; }
  .mega__kop { margin: 14px 0 8px; }
  .mega__ruimtes .mega__kop { width: 100%; }
}

/* ---------- Klassiek met een twist: museumzaal die is "overgenomen" ---------- */
.cat-twist { --museum: #3B1018; --museum-2: #2A0B11; --goud: #C9A45C; }
.cat-twist .lijstkop--scene { background: var(--museum); }
.cat-twist .lijstkop--scene::before { background: linear-gradient(100deg, color-mix(in srgb, var(--museum) 94%, transparent) 25%, color-mix(in srgb, var(--museum) 70%, transparent) 60%, color-mix(in srgb, var(--museum) 45%, transparent)); }
.cat-twist .lijstkop__scene { filter: grayscale(1) sepia(.5) contrast(1.1) blur(5px); }
.cat-twist .lijstkop--scene h1 { font-family: "Fraunces", Georgia, serif; font-weight: 500; letter-spacing: -.01em; line-height: 1; position: relative; }
.twist__klassiek { display: block; font-style: italic; color: #F3E6CC; font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144; }
.twist__spray { display: inline-block; font-family: var(--display); font-weight: 800; font-size: .62em; color: var(--blush); transform: rotate(-5deg) translate(.6em, -.15em); text-shadow: 0 0 2px var(--blush), 0 0 10px color-mix(in srgb, var(--blush) 70%, transparent), 3px 4px 0 rgba(0, 0, 0, .35); letter-spacing: -.01em; }
.cat-twist .lijstkop--scene .krul { color: var(--goud); }
.cat-twist .lijstkop__spook { -webkit-text-stroke-color: color-mix(in srgb, var(--goud) 30%, transparent); font-family: "Fraunces", Georgia, serif; font-style: italic; }
.cat-twist .lijstkop__aantal { background: var(--goud); }
.cat-twist .lijstkop--scene::after { background: var(--blush); opacity: .25; }
.cat-twist .lijstkop__golf path { fill: var(--museum-2); }
/* De zaal: donkere damastmuur, gouden lijsten, spotjes en museumbordjes */
.cat-twist .sectie--speels { background:
  radial-gradient(circle at 25% 25%, rgba(201, 164, 92, .06) 0 6px, transparent 7px) 0 0 / 46px 46px,
  radial-gradient(circle at 75% 75%, rgba(201, 164, 92, .06) 0 6px, transparent 7px) 0 0 / 46px 46px,
  var(--museum-2); color: #F3E6CC; }
.cat-twist .lijstkop--scene + .sectie--krap .filter { background: #F3E6CC; }
.cat-twist .kaart__beeld { background: radial-gradient(ellipse 60% 45% at 50% 0%, rgba(255, 238, 200, .28), transparent 70%), transparent !important; box-shadow: none; outline-color: color-mix(in srgb, var(--goud) 35%, transparent); }
.cat-twist .kaart__poster { border-style: solid; border-width: 5px !important; border-color: #E2C27A #B48A3E #8C6A2C #CFA75A !important; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .4), 0 26px 40px -14px rgba(0, 0, 0, .8) !important; }
.cat-twist .kaart__tekst { margin: 8px auto 0; background: #F3E6CC; color: #2A0B11; border-radius: 4px; padding: 8px 10px 10px; text-align: center; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .7); max-width: 84%; }
.cat-twist .kaart__tekst h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: .95rem; }
.cat-twist .kaart__tekst h3 a { color: #2A0B11; }
.cat-twist .kaart__tekst p { background: none; color: #7a4e1d; padding: 0; font-style: italic; font-family: "Fraunces", Georgia, serif; }
.cat-twist .leeg { color: inherit; }
.cat-twist .promo--zon { color: var(--inkt); }  /* tekst op geel blijft donker */
.cat-twist .speels svg:not(.speels__pim) path, .cat-twist .speels svg:not(.speels__pim) rect { stroke: var(--blush); }
.cat-twist .speels--hanger { color: #F3E6CC; }

.cat-twist .filter { color: var(--inkt); }
/* Op mobiel geen glas-effect op de kopbalk: dat maakt het uitklapmenu anders maar zo hoog als de balk */
@media (max-width: 900px) { .kop { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--papier); } }
@media (max-width: 900px) {
  .nav { position: absolute; top: 100%; left: 0; right: 0; bottom: auto; height: calc(100dvh - 64px); border-top: 1px solid var(--lijn); }
  body.menu-open .hulp { display: none; }
}

.kop__knop { flex-shrink: 0; }
@media (max-width: 400px) { .kop__in { gap: 2px; } .logo__woord { font-size: 1.2rem !important; } .kop__acties { gap: 0; } }

/* ---------- Formaat op maat ---------- */
.maat--opmaat span { border-style: dashed; }
.maat--opmaat input:checked + span { border-style: solid; }
.opmaat { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--wit); border: 1.5px dashed var(--inkt); }
.opmaat[hidden] { display: none; }
.opmaat__kop { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; font-weight: 600; line-height: 1.35; }
.opmaat__kop svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; }
.opmaat__velden { display: flex; align-items: flex-end; gap: 10px; }
.opmaat__velden > span { padding-bottom: 10px; font-weight: 700; }
.opmaat__velden label { display: grid; gap: 4px; font-size: .85rem; color: var(--inkt-2); flex: 1; min-width: 0; }
.opmaat__velden label span { display: flex; align-items: center; gap: 6px; color: var(--inkt); font-weight: 600; }
.opmaat__velden input { width: 100%; min-width: 0; padding: 10px 12px; font: inherit; font-size: 1.05rem; border: 1.5px solid var(--lijn); border-radius: 10px; background: var(--papier); color: var(--inkt); }
.opmaat__velden input:focus-visible { outline: 3px solid var(--tomaat); outline-offset: 1px; }
.opmaat__noot { margin: 10px 0 0; font-size: .82rem; color: var(--inkt-2); line-height: 1.45; }

/* ---------- Reviews ---------- */
.reviews { background: var(--zon); }
.reviews__kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 22px; }
.reviews__kop h2 { margin: 0 0 4px; }
.reviews__score { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.review__voorbeeld { margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--inkt); color: var(--papier); font-size: .8rem; font-weight: 600; }
.sterren { color: var(--tomaat); letter-spacing: 1px; font-size: 1.05rem; white-space: nowrap; }
.ster--leeg { color: rgba(14, 59, 47, .25); }
.reviews__rij { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; }
.review { scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 20px; background: var(--papier); border: 2px solid var(--inkt); box-shadow: 5px 5px 0 var(--inkt); min-width: 0; }
.review__tekst { margin: 0; font-size: 1.02rem; line-height: 1.5; flex: 1; }
.review__naam { margin: 0; font-size: .9rem; color: var(--inkt-2); }
.review__naam b { color: var(--inkt); }
.review__poster { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--lijn); color: var(--inkt); text-decoration: none; font-size: .85rem; font-weight: 600; }
.review__poster img { width: 34px; height: auto; flex: 0 0 34px; }
.review__poster:hover span { text-decoration: underline; }
@media (max-width: 700px) { .reviews__rij { grid-auto-columns: 82%; } }

/* ---------- Feedback oktober 2026: logo, homepage, mobiel ---------- */
/* Logo = Pim, maar stil: een logo dat beweegt leidt af */
.merk--pim .pim__lijf, .merk--pim .pim__zwaai, .merk--pim .pim__oog { animation: none !important; }
.logo .merk--pim { width: 36px; height: 43px; margin-top: -4px; }
.voet .logo .merk--pim { width: 40px; height: 48px; }
@media (max-width: 900px) { .logo .merk--pim { width: 30px; height: 36px; } }

/* 2+1-sticker: twee regels als blokken, optisch in het midden (cursief leunt naar rechts) */
.held__sticker { padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .08em; }
.held__sticker span { display: block; line-height: .95; }
.held__sticker span:first-child { font-size: 1.12em; transform: translateX(-.04em); }

/* Merkblok: sfeerfoto in plaats van het grote logo */
.merkblok__beeld--foto { background: none !important; border-radius: 28px !important; aspect-ratio: 4 / 5; overflow: hidden; display: block; box-shadow: 0 30px 60px -30px rgba(14, 59, 47, .45); }
.merkblok__beeld--foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .merkblok__beeld--foto { max-width: none; aspect-ratio: 3 / 2; } }

/* Homepage: Klassiek met een twist */
.twistblok { --museum: #3B1018; --museum-2: #2A0B11; --goud: #C9A45C; --perkament: #F3E6CC; position: relative; overflow: hidden; color: var(--perkament);
  background: radial-gradient(circle at 25% 25%, rgba(201, 164, 92, .07) 0 6px, transparent 7px) 0 0 / 46px 46px,
              radial-gradient(circle at 75% 75%, rgba(201, 164, 92, .07) 0 6px, transparent 7px) 0 0 / 46px 46px, var(--museum);
  padding: clamp(48px, 7vw, 96px) 0; }
.twistblok::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 45% 70% at 72% 0%, rgba(255, 228, 170, .16), transparent 70%); pointer-events: none; }
.twistblok__in { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.twistblok__label { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--goud); margin: 0 0 18px; }
.twistblok h2 { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: clamp(2.8rem, 5.6vw, 4.8rem); line-height: 1; letter-spacing: -.01em; margin: 0 0 26px; color: var(--perkament); }
.twistblok h2 .twist__spray { font-size: .6em; transform: rotate(-5deg) translate(.5em, -.1em); }
.twistblok__tekst p:not(.twistblok__label) { color: color-mix(in srgb, var(--perkament) 82%, transparent); font-size: 1.08rem; line-height: 1.65; max-width: 46ch; margin: 0 0 30px; }
.knop--goud { background: var(--goud); color: var(--museum-2); box-shadow: 0 6px 0 -2px #8C6A2C; }
.knop--goud:hover { background: #D8B672; transform: translateY(-2px); }
.knop--goud svg { stroke: currentColor; }
.twistblok__zaal { position: relative; display: grid; place-items: center; min-height: clamp(380px, 40vw, 560px); }
.twistblok__zaal img { display: block; width: 100%; height: auto; border-style: solid; border-width: 5px; border-color: #E2C27A #B48A3E #8C6A2C #CFA75A;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .4), 0 34px 50px -18px rgba(0, 0, 0, .85); }
.twistblok__hoofd { position: relative; z-index: 2; width: min(58%, 330px); text-decoration: none; transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.twistblok__hoofd:hover { transform: translateY(-6px); }
.twistblok__bordje { display: grid; gap: 2px; margin: 18px auto 0; width: max-content; max-width: 100%; background: var(--perkament); color: var(--museum-2); border-radius: 3px; padding: 8px 16px 9px; text-align: center; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .8); }
.twistblok__bordje b { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: .98rem; }
.twistblok__bordje i { font-family: "Fraunces", Georgia, serif; font-size: .82rem; color: #7a4e1d; }
.twistblok__lijst { position: absolute; z-index: 1; width: min(30%, 170px); opacity: .92; transition: transform .4s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; }
.twistblok__lijst:hover { opacity: 1; transform: translateY(-4px); }
.twistblok__lijst--0 { left: 2%; top: 8%; transform: rotate(-4deg); }
.twistblok__lijst--1 { right: 2%; bottom: 14%; transform: rotate(3deg); }
.twistblok__lijst--0:hover { transform: rotate(-4deg) translateY(-4px); }
.twistblok__lijst--1:hover { transform: rotate(3deg) translateY(-4px); }
@media (max-width: 900px) {
  .twistblok__in { grid-template-columns: 1fr; }
  .twistblok__zaal { min-height: 0; padding: 10px 0 0; }
  .twistblok__hoofd { width: 62%; }
  .twistblok__lijst { width: 27%; }
  .twistblok__lijst--0 { left: 0; top: 6%; }
  .twistblok__lijst--1 { right: 0; bottom: 22%; }
}

/* "Zo hangt hij thuis": geen gat in de laatste rij */
.mozaiek--6 .mozaiek__tegel:nth-child(5), .mozaiek--6 .mozaiek__tegel:nth-child(6) { grid-column: span 2; }

/* Golvend lijntje onder de titel: nooit afsnijden */
.krul { overflow: visible; }
.lijstkop--scene .krul { height: 18px; margin: -4px 0 18px; padding: 2px 0; box-sizing: content-box; }

@media (max-width: 700px) {
  /* Ruimtetegels: klein label, zodat de poster aan de muur zichtbaar blijft */
  .ruimtes .ruimte__label { left: 8px; bottom: 8px; padding: 4px 10px 5px; border-radius: 999px; gap: 0; }
  .ruimtes .ruimte__label b { font-size: .9rem; }
  .ruimtes .ruimte__label small { font-size: .68rem; }
  /* Themapagina's en homepage: prijsvlak onder de foto in plaats van erop */
  .mozaiek .mozaiek__tegel { display: flex; flex-direction: column; aspect-ratio: auto; height: auto; }
  .mozaiek .mozaiek__tegel img { aspect-ratio: 3 / 2; height: auto; flex: none; }
  .mozaiek .mozaiek__label { position: static; transform: none; opacity: 1; border-radius: 0; box-shadow: none; padding: 7px 10px 9px; background: var(--wit); }
  .mozaiek .mozaiek__label b { font-size: .82rem; line-height: 1.2; }
  .mozaiek .mozaiek__label small { font-size: .74rem; }
  .mozaiek--6 { grid-auto-rows: auto; }
  .mozaiek--6 .mozaiek__tegel:nth-child(1) { grid-row: span 1; }
  .mozaiek--6 .mozaiek__tegel:nth-child(5) { grid-column: span 1; }
  .mozaiek--6 .mozaiek__tegel:nth-child(6) { grid-column: span 2; }
  .sectie--donker .mozaiek__tegel { border-width: 4px; }
}
.mand__land { font-size: .78em; color: var(--inkt-2); font-weight: 500; margin-left: 4px; }
.adres { font-style: normal; background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; padding: 16px 20px; display: inline-block; line-height: 1.6; }
mark.invullen { background: #FFE08A; color: var(--inkt); padding: 0 4px; border-radius: 4px; }
.twistblok__bordje b, .twistblok__bordje i { white-space: nowrap; }
.twistblok h2 .twist__klassiek { margin-bottom: -.12em; }
/* Pim als zijversiering: stil, zoals het logo (beweging in je ooghoek leidt af) */
.speels--hanger { color: var(--inkt); width: 76px; transform: rotate(-6deg); }
.speels__pim .pim__lijf, .speels__pim .pim__zwaai, .speels__pim .pim__oog { animation: none !important; }
/* Uitsnede op de poster aan de muur (die hangt in het bovenste derde van elke kamerfoto) */
.mozaiek__tegel img { object-position: 50% 30%; }
.mozaiek--6 .mozaiek__tegel:nth-child(n+4) img { object-position: 50% 0%; }
/* Tekstballonnen bij "Zo hangt hij thuis": klein en compact, zodat de foto het werk doet */
.mozaiek__label { left: 10px; bottom: 10px; padding: 5px 10px 6px; border-radius: 10px; gap: 0; max-width: calc(100% - 20px); line-height: 1.2;
  background: color-mix(in srgb, var(--wit) 92%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 4px 14px -6px rgba(14, 59, 47, .35); transform: none; }
.mozaiek__label b { font-size: .78rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mozaiek__label small { font-size: .7rem; }
.mozaiek__tegel:hover .mozaiek__label { transform: translateY(-2px); }
/* Consistentie: een vast systeem voor afrondingen (kaarten en beelden --r, grote beeldblokken --r-groot) */
.promo, .mozaiek__tegel, .faqkaart, .merkblok__beeld--foto { border-radius: var(--r-groot, 28px) !important; }
.promo, .mozaiek__tegel { border-radius: var(--r, 24px) !important; }
/* Winkelwagen en afrekenen: Pim uit beeld, niets over het totaal en de afrekenknop */
.kassa .hulp { display: none; }
/* Mobiel menu: de drie snelle links naast elkaar, Posters met stijlen en ruimtes eronder */
@media (max-width: 900px) {
  .nav__lijst { grid-template-columns: repeat(3, 1fr); }
  .nav__item:not(.nav__item--uitklap) > a { font-size: 1rem; padding: 14px 8px; text-align: center; }
}
/* Gidsen op mobiel: eerst kop en tekst, dan de foto (nooit twee foto's direct onder elkaar) */
@media (max-width: 700px) {
  .gidsstap { grid-template-columns: 1fr; gap: 16px; }
  .gidsstap figure, .gidsstap:nth-child(even) figure { order: 2; }
  .gidsstap__tekst { order: 1; }
}
/* Kassa: rust. Geen nieuwsbriefblok tussen winkelwagen en afrekenen */
.kassa .nieuwsbrief { display: none; }

/* Herroepingsformulier: zelfde velden als bij afrekenen */
.herroeping { display: grid; gap: 14px; margin: 26px 0; }
.herroeping label { display: grid; gap: 5px; font-weight: 600; font-size: .9rem; }
.herroeping input { border: 1.5px solid var(--lijn); border-radius: 10px; padding: 12px 14px; background: var(--wit); font-weight: 400; font: inherit; min-width: 0; }
.herroeping input:focus { outline: none; border-color: var(--inkt); }
.herroeping .rij { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .herroeping .rij { grid-template-columns: 1fr; } }

/* Cookiemelding (toestemming.js): Akkoord en Weigeren even groot en even zichtbaar */
.cookies { position: fixed; left: 18px; bottom: 18px; z-index: 60; width: min(400px, calc(100vw - 36px)); background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r); padding: 18px 20px; box-shadow: 0 24px 50px -20px rgba(30, 27, 46, .45); font-size: .9rem; }
.cookies[hidden] { display: none; }
.cookies:focus { outline: none; }
.cookies p { margin: 0 0 10px; }
.cookies__titel { font-family: var(--display); font-size: 1.15rem; font-weight: 600; }
.cookies__knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.cookies__knoppen .knop { justify-content: center; }
@media (max-width: 520px) { .cookies { left: 12px; right: 12px; bottom: 12px; width: auto; } }