/* Hama Parts Vlaardingen: strak, fris, navy met signaaloranje uit hun oude kop. */
:root {
  --inkt: #0b1b2c;
  --navy: #0a3157;
  --navy-2: #0f416f;
  --oranje: #e3793a;
  --oranje-d: #c8611f;
  --papier: #f3f5f8;
  --wit: #fff;
  --lijn: #e1e6ed;
  --lijn-2: #cfd7e2;
  --grijs: #5a6878;
  --grijs-l: #8794a3;
  --groen: #12a150;
  --r: 16px;
  --r-s: 10px;
  --schaduw: 0 1px 2px rgba(11, 27, 44, .06), 0 8px 24px -8px rgba(11, 27, 44, .14);
  --schaduw-h: 0 2px 4px rgba(11, 27, 44, .06), 0 22px 44px -14px rgba(11, 27, 44, .28);
  --kop: 'Fraunces', Georgia, serif;
  --cijfer: 'Geist', system-ui, sans-serif;
  --tekst: 'Geist', system-ui, sans-serif;
  --breed: 1240px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; font: 400 16.5px/1.6 var(--tekst); color: var(--inkt); background: var(--wit); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--kop); line-height: 1.06; letter-spacing: -.02em; margin: 0; font-weight: 600; font-optical-sizing: auto; text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; }
p { margin: 0; }
.wrap { width: min(var(--breed), 100% - 40px); margin-inline: auto; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px/1 var(--tekst); letter-spacing: .14em; text-transform: uppercase; color: var(--oranje-d); }
.kicker::before { content: ""; width: 22px; height: 2px; background: var(--oranje); border-radius: 2px; }
.kicker.licht { color: #f2b58a; }
.sectie { padding: clamp(72px, 10vw, 128px) 0; }
.sectie-kop { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 40px; flex-wrap: wrap; }
.sectie-kop h2 { font-size: clamp(34px, 4.6vw, 56px); margin-top: 14px; max-width: 19ch; }
.sectie-kop p { color: var(--grijs); max-width: 46ch; font-size: 17.5px; }
.ic { width: 18px; height: 18px; flex: none; }

/* Knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1.5px solid transparent; font: 600 15.5px/1 var(--tekst); text-decoration: none; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .3s var(--bw-veer, ease); white-space: nowrap; }
.knop:active { transform: scale(.97); }
.knop.oranje { background: var(--oranje); color: #fff; box-shadow: 0 10px 24px -10px rgba(227, 121, 58, .7); }
.knop.oranje:hover { background: var(--oranje-d); }
.knop.navy { background: var(--navy); color: #fff; }
.knop.navy:hover { background: var(--inkt); }
.knop.lijn { border-color: var(--lijn-2); background: #fff; color: var(--inkt); }
.knop.lijn:hover { border-color: var(--inkt); }
.knop.licht { border-color: rgba(255, 255, 255, .35); color: #fff; background: transparent; }
.knop.licht:hover { background: #fff; color: var(--inkt); }
.knop.klein { min-height: 40px; padding: 0 16px; font-size: 14px; }
.knop .ic { transition: transform .3s var(--bw-veer, ease); }
.knop:hover .ic.pijl { transform: translateX(3px); }

/* Demo-balk */
.demo-balk { background: var(--inkt); color: #c9d3de; font-size: 13px; text-align: center; padding: 8px 16px; }
.demo-balk b { color: #fff; font-weight: 600; }
.demo-balk a { color: #f2b58a; }

/* Bovenbalk */
.topbalk { background: var(--navy); color: #d6e2ee; font-size: 13.5px; }
.topbalk .wrap { display: flex; justify-content: space-between; gap: 24px; padding: 9px 0; }
.topbalk span { display: inline-flex; align-items: center; gap: 8px; }
.topbalk a { color: #fff; text-decoration: none; font-weight: 600; }
.topbalk .ic { width: 15px; height: 15px; color: var(--oranje); }
.open-stip { width: 8px; height: 8px; border-radius: 50%; background: var(--grijs-l); box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.open-stip.open { background: #34d17a; box-shadow: 0 0 0 3px rgba(52, 209, 122, .22); }

/* Kop */
.kop { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.kop.gescrold { border-color: var(--lijn); box-shadow: 0 6px 24px -18px rgba(11, 27, 44, .4); }
.kop .wrap { display: flex; align-items: center; gap: 28px; height: 76px; }
.merk { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.merk-teken { width: 42px; height: 42px; border-radius: 12px; background: var(--navy); display: grid; place-items: center; color: #fff; font: 800 17px/1 var(--kop); letter-spacing: -.04em; position: relative; overflow: hidden; }
.merk-teken::after { content: ""; position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--oranje); }
.merk-teken span { position: relative; z-index: 1; }
.merk-logo { height: 56px; width: auto; }
.merk-tekst { display: flex; flex-direction: column; line-height: 1.25; padding-left: 14px; border-left: 2px solid var(--oranje); }
.merk-tekst small { font-size: 11.5px; color: var(--grijs); letter-spacing: .08em; text-transform: uppercase; }
.voet .merk-logo { height: 58px; }
.merk-tekst b { font: 800 21px/1 var(--kop); letter-spacing: -.03em; }
.nav { display: flex; gap: 4px; }
.nav a { text-decoration: none; font-weight: 500; font-size: 15px; padding: 9px 13px; border-radius: 999px; color: #2a3a4c; transition: background .2s, color .2s; }
.nav a:hover { background: var(--papier); color: var(--inkt); }
.kop-bel { display: flex; }
.menu-knop { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--lijn); background: #fff; cursor: pointer; align-items: center; justify-content: center; }
.menu-knop span, .menu-knop span::before, .menu-knop span::after { display: block; width: 18px; height: 2px; background: var(--inkt); border-radius: 2px; position: relative; transition: transform .3s, background .3s; }
.menu-knop span::before, .menu-knop span::after { content: ""; position: absolute; left: 0; }
.menu-knop span::before { top: -6px; } .menu-knop span::after { top: 6px; }
.menu-open .menu-knop span { background: transparent; }
.menu-open .menu-knop span::before { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-knop span::after { transform: translateY(-6px) rotate(-45deg); }
.lade { display: none; }

/* Held */
.held { position: relative; padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); overflow: hidden; background: linear-gradient(180deg, #fff 0%, var(--papier) 100%); }
.held::before { content: ""; position: absolute; right: -12%; top: -30%; width: 70vw; height: 70vw; max-width: 980px; max-height: 980px; background: radial-gradient(closest-side, rgba(15, 65, 111, .10), transparent 70%); pointer-events: none; }
.held .wrap { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; position: relative; }
.held h1 { font-size: clamp(40px, 5vw, 70px); line-height: .98; letter-spacing: -.035em; margin: 20px 0 22px; }
.held h1 em { font-style: normal; color: var(--oranje); }
.held-lead { font-size: clamp(17px, 1.5vw, 19.5px); color: var(--grijs); max-width: 44ch; }
.held-knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.held-merken { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--grijs-l); font: 700 13px/1 var(--kop); letter-spacing: .08em; text-transform: uppercase; }
.held-merken span:first-child { color: var(--grijs); font-family: var(--tekst); font-weight: 500; letter-spacing: .02em; text-transform: none; font-size: 13.5px; width: 100%; margin-bottom: 2px; }
.held-achter { position: absolute; inset: 0 0 0 34%; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%); mask-image: linear-gradient(90deg, transparent 0%, #000 42%); }
.held-achter img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; opacity: .55; filter: saturate(.9); }
.held-achter::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 35%, rgba(243, 245, 248, .85) 100%); }
.held .heel { white-space: nowrap; }
.held-beeld { position: relative; min-height: 440px; }
.held-foto { border-radius: 22px; overflow: hidden; box-shadow: var(--schaduw-h); aspect-ratio: 3 / 2; max-width: 1000px; background: #dfe5ec; }
.held-foto img { width: 100%; height: 100%; object-fit: cover; }
.held-kaart { position: absolute; background: #fff; border-radius: 14px; box-shadow: var(--schaduw-h); padding: 14px 18px; display: flex; gap: 12px; align-items: center; font-size: 14px; }
.held-kaart b { display: block; font: 700 15.5px/1.2 var(--kop); letter-spacing: -.01em; }
.held-kaart small { color: var(--grijs); }
.held-kaart .bol { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fbefe6; color: var(--oranje-d); flex: none; }
.held-kaart.links { left: 6%; bottom: 36px; }
.held-kaart.rechts { right: 0; top: 56px; }
.held-kaart.rechts .bol { background: #e7f7ee; color: var(--groen); }
.held .wrap:has(> .held-feiten) { display: block; }
.held-feiten { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: clamp(48px, 6vw, 72px); background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); }
.held-feiten div { padding: 22px 26px; border-left: 1px solid var(--lijn); }
.held-feiten div:first-child { border-left: 0; }
.held-feiten b { display: block; font: 800 32px/1 var(--kop); letter-spacing: -.03em; color: var(--navy); }
.held-feiten > div > span { display: block; margin-top: 8px; color: var(--grijs); font-size: 14.5px; line-height: 1.4; }
.held-feiten b { white-space: nowrap; }

/* Actieband */
.actieband { background: var(--oranje); color: #fff; overflow: hidden; }
.actieband .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; flex-wrap: wrap; }
.actieband p { font: 700 clamp(18px, 2vw, 23px)/1.25 var(--kop); letter-spacing: -.015em; }
.actieband p small { display: block; font: 400 14.5px/1.4 var(--tekst); opacity: .9; letter-spacing: 0; margin-top: 4px; }
.actieband .knop { background: #fff; color: var(--oranje-d); }
.actieband .knop:hover { background: var(--inkt); color: #fff; }

/* Aanbod */
.aanbod { background: var(--papier); }
.tabs { display: inline-flex; gap: 4px; padding: 5px; background: #fff; border: 1px solid var(--lijn); border-radius: 999px; position: relative; flex-wrap: wrap; }
.tab { border: 0; background: none; cursor: pointer; padding: 11px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--grijs); display: inline-flex; gap: 8px; align-items: center; position: relative; z-index: 1; transition: color .25s; }
.tab small { font-size: 12px; font-weight: 600; background: var(--papier); color: var(--grijs); border-radius: 999px; padding: 3px 8px; transition: background .25s, color .25s; }
.tab[aria-selected="true"] { color: #fff; }
.tab[aria-selected="true"] small { background: rgba(255, 255, 255, .18); color: #fff; }
.tab-pil { position: absolute; z-index: 0; top: 5px; height: calc(100% - 10px); background: var(--navy); border-radius: 999px; transition: left .45s var(--bw-veer, ease), width .45s var(--bw-veer, ease), top .3s; }
.filters { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 26px 0 28px; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--lijn-2); background: #fff; border-radius: 999px; padding: 8px 15px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.chip:hover { border-color: var(--inkt); }
.chip[aria-pressed="true"] { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.chip small { color: var(--grijs-l); margin-left: 4px; }
.chip[aria-pressed="true"] small { color: #9fb0c2; }
.filters-rechts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--lijn-2); border-radius: 999px; background: #fff; padding: 3px; }
.seg button { border: 0; background: none; padding: 7px 13px; border-radius: 999px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--grijs); }
.seg button[aria-pressed="true"] { background: var(--papier); color: var(--inkt); box-shadow: inset 0 0 0 1px var(--lijn-2); }
.sorteer { appearance: none; border: 1px solid var(--lijn-2); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230b1b2c' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; border-radius: 999px; padding: 10px 38px 10px 16px; font: 500 14px var(--tekst); color: var(--inkt); cursor: pointer; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 20px; }
.kaart { background: #fff; border-radius: var(--r); border: 1px solid var(--lijn); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: box-shadow .4s, border-color .4s, translate .5s var(--bw-veer, ease); position: relative; }
.kaart:hover { box-shadow: var(--schaduw-h); border-color: transparent; translate: 0 -5px; }
.kaart-beeld { aspect-ratio: 4 / 3; background: radial-gradient(120% 90% at 50% 100%, #e9eef4 0%, #f7f9fb 60%, #fff 100%); display: grid; place-items: center; padding: 18px; position: relative; overflow: hidden; }
.kaart-beeld.foto { padding: 0; background: #e5eaf0; }
.kaart-beeld img { position: absolute; inset: 0; margin: auto; max-width: calc(100% - 36px); max-height: calc(100% - 36px); width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; transition: transform .7s var(--bw-ease, ease); }
.kaart-beeld.foto img { mix-blend-mode: normal; max-width: none; max-height: none; width: 100%; height: 100%; object-fit: cover; }
.kaart:hover .kaart-beeld img { transform: scale(1.045); }
.kaart-beeld .geen-foto { color: var(--grijs-l); font-size: 13.5px; display: grid; justify-items: center; gap: 8px; }
.labels { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 1; }
.label { font: 700 11px/1 var(--tekst); letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; border-radius: 6px; background: #fff; color: var(--inkt); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.label.oranje { background: var(--oranje); color: #fff; }
.label.groen { background: var(--groen); color: #fff; }
.label.navy { background: var(--navy); color: #fff; }
.label.grijs { background: var(--inkt); color: #fff; }
.kaart-tekst { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.kaart-merk { font: 600 12px/1 var(--tekst); letter-spacing: .12em; text-transform: uppercase; color: var(--grijs-l); }
.kaart h3 { font-size: 20px; letter-spacing: -.02em; line-height: 1.15; }
.specs { display: flex; flex-wrap: wrap; gap: 6px; }
.specs span { font-size: 12.5px; color: var(--grijs); background: var(--papier); padding: 5px 9px; border-radius: 6px; }
.kaart-voet { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--lijn); }
.prijs { font: 800 23px/1 var(--kop); letter-spacing: -.03em; }
.prijs small { display: block; font: 400 12px/1.35 var(--tekst); color: var(--grijs-l); letter-spacing: 0; margin-top: 5px; max-width: 22ch; }
.kaart-pijl { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--papier); transition: background .3s, color .3s; flex: none; }
.kaart:hover .kaart-pijl { background: var(--oranje); color: #fff; }
.kleur-stippen { display: flex; gap: 4px; align-items: center; font-size: 12.5px; color: var(--grijs); }
.kaart.verkocht .kaart-beeld img { filter: grayscale(1) opacity(.6); }
.leeg { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--grijs); background: #fff; border-radius: var(--r); border: 1px dashed var(--lijn-2); }
.meer-rij { display: flex; justify-content: center; margin-top: 36px; }
.raster-tel { color: var(--grijs); font-size: 14px; }

/* Kleurvlakken met een zachte foto erachter */
.vlak-achter { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.vlak-achter img { width: 100%; height: 100%; object-fit: cover; opacity: .2; filter: grayscale(.3) blur(1px); }
.aanbod { padding-top: 0; }
.aanbod-kop { position: relative; overflow: hidden; background: var(--navy); color: #fff; padding: clamp(72px, 9vw, 112px) 0 clamp(40px, 5vw, 56px); margin-bottom: 8px; }
.aanbod-kop::after, .werkwijze .vlak-achter::after, .zaak .vlak-achter::after { content: ""; position: absolute; inset: 0; }
.aanbod-kop .vlak-achter::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10, 49, 87, .96) 0%, rgba(10, 49, 87, .78) 55%, rgba(10, 49, 87, .55) 100%); }
.aanbod-kop .wrap { position: relative; z-index: 1; }
.aanbod-kop .kicker { color: #f2b58a; }
.aanbod-kop .sectie-kop p { color: #c3d1e0; }
.aanbod-kop .tabs { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); }
.aanbod-kop .tab { color: #c9d6e3; }
.aanbod-kop .tab:hover { color: #fff; }
.aanbod-kop .tab small { background: rgba(255, 255, 255, .1); color: #e3eaf2; }
.aanbod-kop .tab-pil { background: var(--oranje); box-shadow: 0 8px 20px -8px rgba(227, 121, 58, .8); }
.werkwijze .vlak-achter img { opacity: .16; filter: grayscale(1); }
.werkwijze .vlak-achter::after { background: linear-gradient(180deg, rgba(11, 27, 44, .7), rgba(11, 27, 44, .92)); }
.werkwijze .wrap { z-index: 1; }
#diensten { background: linear-gradient(180deg, #e6eef8 0%, #f3f7fb 100%); }
#diensten .notitie { background: #fff; }
#diensten .tabs { box-shadow: var(--schaduw); }
.zaak { position: relative; overflow: hidden; background: var(--navy-2); color: #fff; }
.zaak .vlak-achter img { opacity: .28; }
.zaak .vlak-achter::after { background: linear-gradient(160deg, rgba(15, 65, 111, .92) 0%, rgba(10, 49, 87, .86) 60%, rgba(11, 27, 44, .9) 100%); }
.zaak .wrap { position: relative; z-index: 1; }
.zaak .sectie-kop p { color: #c3d1e0; }
.zaak .galerij figure { box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .55); }
.zaak .galerij-vraag { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .28); color: #c3d1e0; }
.zaak .galerij-vraag b { color: #fff; }
.bezoek .blok:first-child { background: var(--navy); border-color: var(--navy); color: #fff; }
.bezoek .blok:first-child .tijden td { border-color: rgba(255, 255, 255, .12); }
.bezoek .blok:first-child .tijden .dicht td:last-child { color: #7f93a8; }
.bezoek .blok:first-child .tijden .vandaag td { color: #f2b58a; }
.bezoek .blok:first-child .tijden .vandaag td:first-child::after { background: rgba(227, 121, 58, .2); color: #f2b58a; }
.bezoek .blok:first-child .open-nu { color: #9fb0c2; }
.bezoek .blok:first-child .open-nu.open { color: #5be39a; }

/* Merkenband */
.merkenband { background: var(--oranje); overflow: hidden; }
.merkenband-spoor { display: flex; gap: 64px; padding: 26px 0; width: max-content; animation: rol 38s linear infinite; }
.merkenband-spoor span { font: 800 26px/1 var(--kop); letter-spacing: -.02em; color: rgba(255, 255, 255, .62); white-space: nowrap; transition: color .3s; }
.merkenband-spoor span:hover { color: #fff; }
@keyframes rol { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .merkenband-spoor { animation-duration: 90s; } }

/* Diensten met tabs */
.diensten-tabs { margin-bottom: 36px; }
.paneel { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.paneel[hidden] { display: none; }
.paneel.wissel { animation: paneel-in .6s var(--bw-ease, ease); }
@keyframes paneel-in { from { opacity: 0; transform: translateY(14px); } }
.paneel-foto { border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 2; background: #dfe5ec; box-shadow: var(--schaduw); max-width: 1000px; }
.paneel-foto img { width: 100%; height: 100%; object-fit: cover; }
.paneel-foto.vlak { background: var(--papier); display: grid; place-items: center; padding: 30px; box-shadow: none; border: 1px solid var(--lijn); }
.paneel-foto.vlak img { width: auto; height: auto; max-width: 100%; object-fit: contain; }
.paneel h3 { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: 16px; }
.paneel p { color: var(--grijs); font-size: 17px; }
.paneel p + p { margin-top: 12px; }
.vinklijst { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.vinklijst li { display: flex; gap: 12px; align-items: flex-start; }
.vinklijst li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; margin-top: 2px; background: #fbefe6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23c8611f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; }
.vinklijst b { font-weight: 600; }
.paneel-knoppen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.notitie { margin-top: 20px; padding: 16px 18px; border-radius: 12px; background: var(--papier); font-size: 15px; color: var(--grijs); border-left: 3px solid var(--oranje); }
.merkwolk { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.merkwolk span { font-size: 13px; padding: 5px 10px; border-radius: 6px; background: #fff; border: 1px solid var(--lijn); }

/* Werkplaats-scène */
.scene { height: 260vh; position: relative; background: var(--inkt); color: #fff; }
.scene-plak { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.scene-plak::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 70% 40%, rgba(227, 121, 58, .14), transparent 70%), radial-gradient(60% 50% at 10% 90%, rgba(21, 96, 189, .22), transparent 70%); }
.scene .wrap { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.scene h2 { font-size: clamp(34px, 4.4vw, 56px); margin: 16px 0 20px; }
.scene-lead { color: #9fb0c2; font-size: 17.5px; max-width: 40ch; }
.stappen { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 4px; }
.stap { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 12px 0; opacity: .32; transition: opacity .5s; }
.stap.aan { opacity: 1; }
.stap i { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .25); display: grid; place-items: center; font: 700 14px/1 var(--kop); font-style: normal; transition: background .4s, border-color .4s; }
.stap.aan i { background: var(--oranje); border-color: var(--oranje); }
.stap b { display: block; font: 700 18px/1.2 var(--kop); letter-spacing: -.01em; }
.stap span { color: #9fb0c2; font-size: 14.5px; }
.weg { position: relative; aspect-ratio: 16 / 11; }
.weg svg { width: 100%; height: 100%; overflow: visible; }
.weg-rijder { will-change: transform; }
.punt circle { fill: #0b1b2c; stroke: rgba(255, 255, 255, .3); stroke-width: 2; transition: fill .4s, stroke .4s; }
.punt text { fill: #8091a3; font: 700 13px var(--kop); transition: fill .4s; }
.punt.aan circle { fill: var(--oranje); stroke: #f2b58a; }
.punt.aan text { fill: #fff; }

/* Werkwijze: vijf stappen met elk een eigen geanimeerd icoon */
.werkwijze { background: var(--inkt); color: #fff; padding: clamp(80px, 10vw, 128px) 0; position: relative; overflow: hidden; }
.werkwijze::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 85% 0%, rgba(227, 121, 58, .12), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(21, 96, 189, .22), transparent 70%); }
.werkwijze .wrap { position: relative; }
.werkwijze .sectie-kop p { color: #9fb0c2; }
.werkwijze .sectie-kop a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--oranje); white-space: nowrap; }
.stappen-rij { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.stap-kaart { position: relative; padding: 26px 22px 28px; border-radius: var(--r); background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .09); transition: background .4s, border-color .4s, translate .5s var(--bw-veer, ease); }
.stap-kaart:hover { background: rgba(255, 255, 255, .06); border-color: rgba(227, 121, 58, .45); translate: 0 -4px; }
.stap-kaart:not(:last-child)::after { content: ""; position: absolute; top: 58px; right: -15px; width: 16px; height: 2px; background: linear-gradient(90deg, rgba(227, 121, 58, .7), rgba(227, 121, 58, 0)); }
.stap-nr { position: absolute; top: 22px; right: 22px; font: 700 13px/1 var(--kop); color: #5d6d80; letter-spacing: .04em; }
.stap-ic { width: 64px; height: 64px; color: var(--oranje); margin-bottom: 22px; overflow: visible; }
.stap-kaart h3 { font-size: 19px; letter-spacing: -.015em; margin-bottom: 8px; }
.stap-kaart p { color: #9fb0c2; font-size: 14.5px; line-height: 1.55; }
.stap-ic path, .stap-ic rect, .stap-ic circle { stroke-dasharray: 220; stroke-dashoffset: 0; }
.bw .stap-kaart .stap-ic path, .bw .stap-kaart .stap-ic rect, .bw .stap-kaart .stap-ic circle { stroke-dashoffset: 220; transition: stroke-dashoffset 1.6s var(--bw-ease); transition-delay: calc(var(--d, 0s) + .25s); }
.bw .stap-kaart.in .stap-ic path, .bw .stap-kaart.in .stap-ic rect, .bw .stap-kaart.in .stap-ic circle { stroke-dashoffset: 0; }
.stap-kaart.in .ani-rij { animation: hobbel 1.1s ease-in-out 2s infinite; }
.stap-kaart.in .ani-weg { stroke-dasharray: 6 8; animation: weg .9s linear 2s infinite; }
.stap-kaart.in .ani-puls { stroke-dasharray: 60 160; animation: puls 2.2s linear 2s infinite; }
.ani-draai { transform-origin: 40px 24px; }
.stap-kaart.in .ani-draai { animation: draai 2.6s ease-in-out 2s infinite; }
.ani-naald { transform-origin: 32px 44px; transform: rotate(-70deg); }
.stap-kaart.in .ani-naald { animation: naald 3s ease-in-out 1.4s infinite; }
.ani-vink { transform-origin: 32px 32px; }
.stap-kaart.in .ani-vink { animation: vink 3.2s ease-in-out 2.2s infinite; }
@keyframes hobbel { 50% { transform: translateY(-1.5px); } }
@keyframes weg { to { stroke-dashoffset: -14; } }
@keyframes puls { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
@keyframes draai { 0%, 100% { transform: rotate(0); } 40%, 60% { transform: rotate(-22deg); } }
@keyframes naald { 0%, 100% { transform: rotate(-70deg); } 45%, 65% { transform: rotate(18deg); } }
@keyframes vink { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .stap-kaart.in .ani-rij, .stap-kaart.in .ani-weg, .stap-kaart.in .ani-puls, .stap-kaart.in .ani-draai, .stap-kaart.in .ani-naald, .stap-kaart.in .ani-vink { animation-duration: 6s; }
}

/* Showroomband */
.galerij { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; }
.galerij figure { margin: 0; border-radius: 18px; overflow: hidden; position: relative; background: #dfe5ec; aspect-ratio: 3 / 2; max-height: 420px; }
.galerij figure:first-child { grid-row: span 2; aspect-ratio: auto; max-height: none; }
.galerij img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--bw-ease, ease); }
.galerij figure:hover img { transform: scale(1.04); }
.galerij figcaption { position: absolute; left: 14px; bottom: 14px; background: rgba(11, 27, 44, .78); backdrop-filter: blur(8px); color: #fff; font-size: 13.5px; padding: 7px 12px; border-radius: 8px; }
.galerij-vraag { border: 2px dashed var(--lijn-2); border-radius: 18px; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--grijs); font-size: 14.5px; aspect-ratio: 3 / 2; background: repeating-linear-gradient(45deg, #fff, #fff 12px, var(--papier) 12px, var(--papier) 24px); }
.galerij-vraag b { display: block; color: var(--inkt); font: 700 17px/1.2 var(--kop); margin-bottom: 6px; }

/* Bezoek */
.bezoek { background: var(--papier); }
.bezoek-raster { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 20px; }
.blok { background: #fff; border: 1px solid var(--lijn); border-radius: var(--r); padding: 28px; }
.blok h3 { font-size: 22px; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.tijden { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.tijden td { padding: 9px 0; border-bottom: 1px solid var(--lijn); }
.tijden tr:last-child td { border-bottom: 0; }
.tijden td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tijden .dicht td:last-child { color: var(--grijs-l); }
.tijden .vandaag td { font-weight: 700; color: var(--navy); }
.tijden .vandaag td:first-child::after { content: "vandaag"; margin-left: 8px; font: 700 10.5px/1 var(--tekst); text-transform: uppercase; letter-spacing: .08em; background: #fbefe6; color: var(--oranje-d); padding: 4px 7px; border-radius: 5px; vertical-align: 2px; }
.open-nu { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 14px; color: var(--grijs); }
.open-nu.open { color: var(--groen); }
.contactlijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.contactlijst li { display: flex; gap: 14px; }
.contactlijst .bol { width: 42px; height: 42px; border-radius: 12px; background: var(--papier); display: grid; place-items: center; color: var(--navy); flex: none; }
.contactlijst small { display: block; color: var(--grijs); font-size: 13px; }
.contactlijst a, .contactlijst b { font-weight: 600; text-decoration: none; font-size: 16px; }
.contactlijst a:hover { color: var(--oranje-d); }
.kaartje { border-radius: var(--r); overflow: hidden; border: 1px solid var(--lijn); min-height: 340px; background: #e5eaf0; }
.kaartje iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; filter: saturate(.85); }
.formulier { display: grid; gap: 12px; }
.formulier label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: #2a3a4c; }
.formulier input, .formulier textarea, .formulier select { font: 400 15.5px var(--tekst); padding: 12px 14px; border-radius: 10px; border: 1px solid var(--lijn-2); background: #fff; color: var(--inkt); width: 100%; transition: border-color .2s, box-shadow .2s; }
.formulier input:focus, .formulier textarea:focus, .formulier select:focus { outline: 0; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(10, 49, 87, .1); }
.formulier .twee { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.formulier-melding { font-size: 14px; color: var(--groen); font-weight: 600; }

/* Voet */
.voet { background: var(--inkt); color: #9fb0c2; padding: 64px 0 28px; font-size: 15px; }
.voet-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.voet h4 { color: #fff; font: 700 15px/1 var(--kop); letter-spacing: .02em; margin-bottom: 16px; }
.voet ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.voet a { text-decoration: none; color: #c9d3de; }
.voet a:hover { color: #fff; }
.voet .merk-tekst b { color: #fff; }
.voet .merk-tekst small { color: #8091a3; }
.voet-onder { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; flex-wrap: wrap; }

/* Scooterpagina */
.kruimel { font-size: 14px; color: var(--grijs); padding: 22px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.kruimel a { text-decoration: none; color: var(--grijs); }
.kruimel a:hover { color: var(--inkt); }
.detail { padding: 26px 0 96px; }
.detail-raster { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.beeldvak { position: sticky; top: 100px; }
.beeld-groot { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 100%, #e6ecf2 0%, #f7f9fb 62%, #fff 100%); border: 1px solid var(--lijn); position: relative; cursor: zoom-in; }
.beeld-groot.foto { background: #e5eaf0; }
.beeld-groot img { position: absolute; inset: 0; margin: auto; max-width: calc(100% - 48px); max-height: calc(100% - 48px); width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.beeld-groot.foto img { mix-blend-mode: normal; max-width: none; max-height: none; width: 100%; height: 100%; object-fit: cover; }
.beeld-groot .geen-foto { color: var(--grijs-l); text-align: center; font-size: 15px; }
.duimen { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.duim { width: 86px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--papier); transition: border-color .2s; }
.duim img { width: 100%; height: 100%; object-fit: cover; }
.duim[aria-current="true"] { border-color: var(--oranje); }
.detail-info h1 { font-size: clamp(34px, 4vw, 50px); margin: 10px 0 14px; }
.detail-info .labels { position: static; margin-bottom: 4px; }
.detail-prijs { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 22px 0 6px; }
.detail-prijs b { font: 800 44px/1 var(--kop); letter-spacing: -.035em; }
.detail-prijs small { color: var(--grijs); font-size: 14.5px; }
.detail-actie { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: #fbefe6; color: #8a4415; font-size: 14.5px; }
.detail-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.detail-knoppen .knop:first-child { grid-column: 1 / -1; }
.spectabel { margin-top: 32px; border-top: 1px solid var(--lijn); }
.spectabel div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--lijn); font-size: 15.5px; }
.spectabel dt { color: var(--grijs); }
.spectabel dd { margin: 0; font-weight: 500; }
.kleurlijst { display: flex; flex-wrap: wrap; gap: 6px; }
.kleurlijst span { font-size: 13.5px; padding: 4px 10px; border-radius: 999px; background: var(--papier); border: 1px solid var(--lijn); }
.detail-tekst { margin-top: 26px; color: #2a3a4c; font-size: 16.5px; }
.detail-tekst p + p { margin-top: 10px; }
.zekerheden { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.zekerheden div { padding: 14px; border-radius: 12px; border: 1px solid var(--lijn); font-size: 14px; color: var(--grijs); display: flex; gap: 10px; }
.zekerheden b { display: block; color: var(--inkt); font-size: 14.5px; }
.zekerheden .ic { color: var(--oranje-d); margin-top: 2px; }
.verwant { background: var(--papier); }

/* Lichtbak */
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(8, 17, 28, .94); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s; }
.lb.open { opacity: 1; pointer-events: auto; }
.lb img { max-width: min(92vw, var(--nat, 1400px)); max-height: 84vh; width: auto; height: auto; border-radius: 10px; background: #fff; }
.lb button { position: absolute; border: 0; width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.lb button:hover { background: rgba(255, 255, 255, .24); }
.lb-sluit { top: 20px; right: 20px; }
.lb-vorige { left: 20px; top: 50%; translate: 0 -50%; }
.lb-volgende { right: 20px; top: 50%; translate: 0 -50%; }
.lb-tel { position: absolute; bottom: 22px; left: 50%; translate: -50% 0; color: #c9d3de; font-size: 14px; }

/* Responsief */
@media (max-width: 1100px) {
  .stappen-rij { grid-template-columns: repeat(3, 1fr); }
  .stap-kaart::after { display: none; }
  .nav { display: none; }
  .menu-knop { display: inline-flex; }
  .lade { display: block; position: fixed; inset: 76px 0 0; background: #fff; z-index: 49; padding: 24px 20px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; overflow: auto; }
  .menu-open .lade { opacity: 1; transform: none; pointer-events: auto; }
  .lade a { display: block; padding: 16px 4px; border-bottom: 1px solid var(--lijn); text-decoration: none; font: 700 22px/1.1 var(--kop); letter-spacing: -.02em; }
  .lade .knop { margin-top: 24px; width: 100%; font: 600 16px/1 var(--tekst); border-bottom: 0; }
  .bezoek-raster { grid-template-columns: 1fr 1fr; }
  .bezoek-raster .kaartje { grid-column: 1 / -1; }
  .voet-raster { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .held .wrap, .paneel, .scene .wrap, .detail-raster { grid-template-columns: 1fr; }
  .stappen-rij { grid-template-columns: 1fr 1fr; }
  .stap-kaart:last-child { grid-column: 1 / -1; }
  .held-achter { inset: auto 0 0 0; height: 58%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%); mask-image: linear-gradient(180deg, transparent 0%, #000 40%); }
  .held-beeld { min-height: 300px; }
  .held-feiten { grid-template-columns: 1fr 1fr; }
  .held-feiten div:nth-child(3) { border-left: 0; }
  .held-feiten div:nth-child(n+3) { border-top: 1px solid var(--lijn); }
  .held-kaart.links { left: 10px; bottom: -20px; }
  .held-kaart.rechts { right: 10px; top: -16px; }
  .scene { height: auto; }
  .scene-plak { position: relative; height: auto; padding: 80px 0; }
  .stap { opacity: 1; }
  .weg { display: none; }
  .galerij { grid-template-columns: 1fr 1fr; }
  .galerij figure:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
  .beeldvak { position: static; }
  .kop-bel .knop span { display: none; }
  .kop-bel .knop { padding: 0 14px; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 32px); }
  .topbalk .wrap > span:last-child { display: none; }
  .kop .wrap { height: 68px; gap: 12px; }
  .lade { inset: 68px 0 0; }
  .merk-tekst { display: none; }
  .held h1 { font-size: clamp(30px, 8.6vw, 38px); }
  .kop .merk-logo { height: 42px; }
  .bezoek-raster { grid-template-columns: 1fr; }
  .voet-raster { grid-template-columns: 1fr; }
  .tabs { width: 100%; }
  .tab { padding: 10px 13px; font-size: 14px; flex: 1 1 auto; justify-content: center; }
  .tab-pil { display: none; }
  .tab[aria-selected="true"] { background: var(--navy); }
  .raster { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kaart-tekst { padding: 14px; }
  .kaart h3 { font-size: 16.5px; }
  .prijs { font-size: 19px; }
  .prijs small, .kaart .specs span:nth-child(n+3) { display: none; }
  .kaart-pijl { display: none; }
  .galerij { grid-template-columns: 1fr; }
  .stappen-rij { grid-template-columns: 1fr; }
  .stap-kaart:last-child { grid-column: auto; }
  .formulier .twee, .zekerheden, .detail-knoppen { grid-template-columns: 1fr; }
  .spectabel div { grid-template-columns: 120px 1fr; }
  .held-kaart { padding: 10px 12px; font-size: 12.5px; }
  .held-kaart .bol { width: 32px; height: 32px; }
  .held-kaart b { font-size: 13.5px; }
  .actieband .knop { width: 100%; }
}


/* ===== Leven en karakter (10 nov) ===== */
/* Kicker: korte cursieve zin in de schreefletter, geen kapitalen */
.kicker { font: italic 500 19px/1.2 var(--kop); letter-spacing: 0; text-transform: none; }
.kicker::before { width: 28px; }
.held h1 { font-weight: 600; letter-spacing: -.03em; }
.held h1 em { font-weight: 500; }
.held-merken { font-family: var(--tekst); }
/* Cijfers, prijzen en nummers in de strakke letter */
.prijs, .detail-prijs b, .held-feiten b, .stap-nr, .punt text, .tab small { font-family: var(--cijfer) !important; letter-spacing: -.02em; }
.prijs { font-weight: 700; }
.held-feiten b { font-weight: 700; }
.kaart h3 { font-weight: 600; font-size: 21px; }
.blok h3, .paneel h3, .stap-kaart h3 { font-weight: 600; }
.merk-tekst b { font-family: var(--kop); }
/* Merkenband in cursief, levendiger */
.merkenband-spoor span { font: italic 500 30px/1 var(--kop); letter-spacing: -.01em; }

/* Korrel over de hele pagina */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Golvende overgangen */
.golf { position: absolute; left: 0; width: 100%; height: clamp(28px, 4vw, 60px); display: block; pointer-events: none; z-index: 2; }
.golf-onder { bottom: -1px; }
.golf-boven { top: -1px; transform: scaleY(-1); }
.aanbod-kop .golf { color: var(--papier); }
.werkwijze .golf-boven { color: var(--oranje); }
.werkwijze .golf-onder { color: #e6eef8; }
.voet { position: relative; padding-top: clamp(90px, 9vw, 120px); }
.voet .golf-boven { color: var(--papier); }
.aanbod-kop { padding-bottom: clamp(70px, 8vw, 100px); margin-bottom: 0; }
.werkwijze { padding: clamp(110px, 12vw, 160px) 0 clamp(120px, 13vw, 170px); }

/* Eigen lijnpatroon van onderdelen in de donkere banden */
.patroon { position: absolute; inset: 0; pointer-events: none; background: url(/img/patroon.svg) 0 0 / 300px 300px repeat; opacity: .07; -webkit-mask-image: radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 85%); mask-image: radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 85%); }
.aanbod-kop { background: radial-gradient(90% 120% at 90% 0%, #154a7c 0%, var(--navy) 55%, #08284a 100%); }
.aanbod-kop::after { display: none; }
.werkwijze .patroon { opacity: .06; }

/* Verspringende stappen, als een weg die op en neer gaat */
.stappen-rij { align-items: start; }
@media (min-width: 1101px) {
  .stap-kaart:nth-child(even) { margin-top: 44px; }
  .stap-kaart:not(:last-child)::after { top: 78px; transform: rotate(var(--r, 12deg)); }
  .stap-kaart:nth-child(even)::after { --r: -12deg; top: 70px; }
}

/* Overlappende foto's in de diensten */
.paneel-beeld { position: relative; padding: 0 0 clamp(40px, 5vw, 64px) 0; }
.paneel-beeld .paneel-foto { width: 86%; }
.overlap { position: absolute; right: 0; bottom: 0; width: 44%; margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; border: 6px solid #fff; box-shadow: 0 24px 50px -18px rgba(10, 49, 87, .45); background: #dfe5ec; rotate: 0deg; transition: translate .6s var(--bw-veer, ease); }
.overlap img { width: 100%; height: 100%; object-fit: cover; }
.paneel:hover .overlap { translate: -6px -6px; }
.paneel-foto.vlak.warm { background: radial-gradient(90% 90% at 50% 80%, #fbe6d6 0%, #fdf3ea 55%, #fff 100%); border: 0; box-shadow: var(--schaduw); }
.paneel-foto.vlak img { mix-blend-mode: multiply; max-height: 92%; }
/* afwisselend: tekst links, foto rechts */
.paneel:nth-of-type(even) > :first-child { order: 2; }

/* Vinkkaartjes in plaats van een streepjeslijst */
.vinklijst { grid-template-columns: 1fr 1fr; gap: 10px; }
.vinklijst li { background: #fff; border: 1px solid var(--lijn); border-radius: 14px; padding: 14px 16px; font-size: 15px; line-height: 1.45; transition: border-color .3s, translate .4s var(--bw-veer, ease), box-shadow .3s; }
.vinklijst li:hover { border-color: rgba(227, 121, 58, .5); translate: 0 -3px; box-shadow: var(--schaduw); }

/* Eerste scooter in het aanbod breed uitgelicht */
@media (min-width: 900px) {
  .raster .kaart-groot { grid-column: span 2; flex-direction: row; }
  .raster .kaart-groot .kaart-beeld { aspect-ratio: auto; flex: 1.15; min-height: 330px; }
  .raster .kaart-groot .kaart-tekst { flex: 1; padding: 28px; justify-content: center; }
  .raster .kaart-groot h3 { font-size: 30px; }
  .raster .kaart-groot .kaart-voet { margin-top: 18px; }
}
.kaart-groot .uitgelicht { font: italic 500 16px/1.3 var(--kop); color: var(--oranje-d); }

@media (max-width: 900px) {
  .paneel:nth-of-type(even) > :first-child { order: 0; }
  .paneel-beeld .paneel-foto { width: 100%; }
  .overlap { width: 46%; right: -6px; bottom: -6px; }
  .paneel-beeld { padding-bottom: 54px; }
}
@media (max-width: 640px) {
  .vinklijst { grid-template-columns: 1fr; }
  .kicker { font-size: 17px; }
}

/* Sectiekop: titel links, toelichting rechts onderaan, als raster zodat het niet onder elkaar zakt */
.sectie-kop { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; }
.sectie-kop > p { justify-self: end; }
.patroon { opacity: .05; }
@media (max-width: 900px) { .sectie-kop { grid-template-columns: 1fr; } .sectie-kop > p { justify-self: start; } }

.kaart-beeld img { max-width: min(calc(100% - 36px), var(--nat, 100%)); }
.kaart-beeld.foto img { max-width: none; }
.bezoek-raster .kaartje { grid-column: 1 / -1; min-height: 380px; }
.bezoek-raster .kaartje iframe { min-height: 380px; }

/* Rustiger golf en een strak technisch raster in plaats van icoontjes (10 nov) */
.golf { height: clamp(14px, 2vw, 26px); }
.patroon { background:
  radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.5px) 0 0 / 96px 96px,
  linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px) 0 0 / 24px 24px,
  linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px) 0 0 / 24px 24px,
  linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px) 0 0 / 96px 96px,
  linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px) 0 0 / 96px 96px;
  opacity: .07; -webkit-mask-image: linear-gradient(105deg, transparent 15%, #000 70%); mask-image: linear-gradient(105deg, transparent 15%, #000 70%); }
.werkwijze .patroon { opacity: .06; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }

/* Openingstijdkaartje lager, zodat de Hama Parts-letters op de gevel vrij blijven */
@media (min-width: 901px) { .held-kaart.rechts { top: auto; bottom: 150px; } }