/* ==========================================================================
   Aventuri – hoofdstijl
   Huisstijl: brandboek Aventuri 2024. Blauw is altijd de hoofdkleur, oranje het
   accent, geel alleen voor figuren (Otto) en speelse details.
   Lettertypen: Fredoka (koppen, rond zoals het logo) en Nunito (tekst), lokaal.
   ========================================================================== */

@font-face { font-family: "Fredoka"; src: url("../fonts/fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-italic.woff2") format("woff2"); font-weight: 200 1000; font-style: italic; font-display: swap; }

:root {
    --blauw: #0059F5;
    --blauw-donker: #0047C4;
    --oranje: #FF5714;
    --oranje-donker: #D63F04;
    --geel: #FAB530;
    --geel-donker: #D99312;
    --midnight: #002E7D;
    --inkt: #10214A;
    --grijs: #4D5B7C;
    --lijn: #DCE4F5;
    --lucht: #EAF1FF;
    --room: #FFF4DC;
    --perzik: #FFE9DF;
    --wit: #fff;

    --kop: "Fredoka", "Nunito", system-ui, sans-serif;
    --tekst: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

    --r-s: 14px;
    --r: 24px;
    --r-l: 36px;
    --schaduw: 0 10px 30px -12px rgba(0, 46, 125, .28);
    --schaduw-hoog: 0 22px 44px -18px rgba(0, 46, 125, .38);
    --breed: 1240px;
    --gutter: clamp(16px, 4vw, 32px);
    --sectie: clamp(48px, 6.5vw, 88px);
    --golf: clamp(36px, 6vw, 84px);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
    margin: 0;
    background: var(--wit);
    color: var(--inkt);
    font: 400 1.0625rem/1.65 var(--tekst);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--blauw); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--oranje); }
h1, h2, h3, h4 { font-family: var(--kop); font-weight: 600; line-height: 1.12; color: var(--midnight); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4.2rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); }
p { margin: 0 0 1em; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--geel); outline-offset: 3px; border-radius: 8px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -100px; z-index: 1000; background: var(--midnight); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 800; }
.skip-link:focus { top: 12px; color: #fff; }
.wrap { width: 100%; max-width: var(--breed); margin-inline: auto; padding-inline: var(--gutter); }
.midden { text-align: center; }
.fiets-grid + .midden { margin: clamp(32px, 4vw, 48px) 0 0; }
.icon { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Knoppen ---------- */
.btn {
    --bg: var(--oranje); --rand: var(--oranje-donker); --kl: #fff;
    display: inline-flex; align-items: center; justify-content: center; gap: .55em;
    padding: .82em 1.5em; border: 0; border-radius: 999px;
    background: var(--bg); color: var(--kl);
    font: 600 1.08rem/1.1 var(--kop); letter-spacing: .01em; text-decoration: none;
    box-shadow: 0 5px 0 var(--rand);
    transition: transform .15s ease, box-shadow .15s ease, background .15s;
    position: relative; top: 0;
}
.btn:hover { color: var(--kl); transform: translateY(-2px); box-shadow: 0 7px 0 var(--rand); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--rand); }
.btn--blauw { --bg: var(--blauw); --rand: var(--midnight); }
.btn--wit { --bg: #fff; --rand: rgba(0, 30, 90, .35); --kl: var(--blauw); }
.btn--wit:hover { --kl: var(--blauw); }
.btn--oranje { --bg: var(--oranje); --rand: var(--oranje-donker); }
.btn--groot { font-size: 1.18rem; padding: .95em 1.7em; }
.btn--klein { font-size: .98rem; padding: .62em 1.15em; box-shadow: 0 4px 0 var(--rand); }
.btn--breed { width: 100%; }
.knoppen { display: flex; flex-wrap: wrap; gap: 14px 16px; }

.kicker {
    display: inline-flex; align-items: center; gap: .45em;
    font: 600 .95rem/1 var(--kop); letter-spacing: .06em; text-transform: uppercase;
    color: var(--oranje); margin-bottom: 14px;
}
.kicker--wit { color: var(--geel); }
.sticker {
    display: inline-block; background: var(--geel); color: var(--midnight);
    font: 600 .98rem/1 var(--kop); padding: .6em 1em; border-radius: 999px;
    transform: rotate(-3deg); box-shadow: 0 4px 0 var(--geel-donker); margin-bottom: 22px;
}
.label {
    position: absolute; left: 16px; top: 16px; z-index: 2;
    font: 600 .82rem/1 var(--kop); letter-spacing: .03em;
    padding: .55em .9em; border-radius: 999px; background: #fff; color: var(--midnight);
    box-shadow: 0 3px 0 rgba(0, 46, 125, .15);
}
.label--jongens { background: var(--blauw); color: #fff; }
.label--meisjes { background: #FF8FB5; color: #fff; }
.label--iedereen { background: var(--geel); color: var(--midnight); }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.site-header.is-gescrold { border-color: var(--lijn); box-shadow: 0 6px 24px -16px rgba(0, 46, 125, .45); }
.site-header__in { display: flex; align-items: center; gap: 24px; min-height: 86px; }
.site-logo img { height: 60px; width: auto; transition: height .2s; }
.is-gescrold .site-logo img { height: 50px; }
.hoofdnav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.hoofdnav .menu { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.hoofdnav .menu a {
    display: block; padding: .55em .95em; border-radius: 999px;
    font: 600 1.06rem/1 var(--kop); color: var(--midnight); text-decoration: none;
    transition: background .15s, color .15s;
}
.hoofdnav .menu a:hover { background: var(--lucht); color: var(--blauw); }
.hoofdnav .menu .current-menu-item > a, .hoofdnav .menu .current_page_item > a,
.post-type-archive-fiets .hoofdnav .menu-item-fietsen > a, .single-fiets .hoofdnav .menu-item-fietsen > a { background: var(--lucht); color: var(--blauw); }
.menu-knop { display: none; margin-left: auto; width: 50px; height: 50px; border-radius: 16px; border: 0; background: var(--lucht); color: var(--blauw); align-items: center; justify-content: center; }
.menu-knop .icon { width: 28px; height: 28px; }
.menu-knop__dicht { display: none; }
.menu-knop[aria-expanded="true"] .menu-knop__open { display: none; }
.menu-knop[aria-expanded="true"] .menu-knop__dicht { display: block; }

@media (max-width: 1020px) {
    .site-header__in { min-height: 72px; }
    .site-logo img, .is-gescrold .site-logo img { height: 48px; }
    .menu-knop { display: inline-flex; }
    .hoofdnav {
        position: fixed; inset: 72px 0 auto 0; z-index: 99;
        flex-direction: column; align-items: stretch; gap: 16px;
        padding: 18px var(--gutter) 28px; background: #fff;
        border-bottom: 4px solid var(--blauw); box-shadow: 0 30px 40px -20px rgba(0, 46, 125, .35);
        transform: translateY(-12px); opacity: 0; visibility: hidden; transition: .2s ease;
        max-height: calc(100dvh - 72px); overflow: auto;
    }
    .hoofdnav.is-open { transform: none; opacity: 1; visibility: visible; }
    .hoofdnav .menu { flex-direction: column; gap: 2px; }
    .hoofdnav .menu a { font-size: 1.3rem; padding: .7em .9em; border-radius: 16px; }
    .hoofdnav__cta { align-self: flex-start; }
}

/* ---------- Golven & stippen ---------- */
.golf { position: absolute; left: 0; bottom: -1px; width: 100%; height: clamp(36px, 6vw, 84px); display: block; pointer-events: none; z-index: 1; }
.stip { position: absolute; border-radius: 50% 46% 52% 48% / 52% 50% 50% 48%; pointer-events: none; }

/* ---------- Secties ---------- */
.sectie { position: relative; padding-block: var(--sectie); }
.sectie:has(> .golf) { padding-bottom: calc(var(--sectie) * .7 + var(--golf)); }
.sectie:has(> .golf) + .sectie { padding-top: calc(var(--sectie) * .7); }
.sectie--geel { background: var(--room); }
.sectie--otto { background: var(--lucht); }
.sectie__kop { max-width: 720px; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; }
.sectie__kop p { color: var(--grijs); font-size: 1.12rem; }

/* ---------- Hero ---------- */
.hero {
    position: relative; overflow: hidden;
    background: var(--blauw); color: #fff;
    padding: clamp(40px, 6vw, 80px) 0 calc(clamp(36px, 6vw, 84px) + clamp(48px, 7vw, 96px));
}
.hero__in { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero h1 { color: #fff; font-size: clamp(2.6rem, 6vw, 4.8rem); margin-bottom: .35em; }
.hero__merk { color: var(--geel); display: inline-block; transform: rotate(-2deg); }
.hero__lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 34em; color: #E6EEFF; margin-bottom: 30px; }
.hero__punten { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-weight: 700; color: #fff; }
.hero__punten li { display: flex; align-items: center; gap: .45em; }
.hero__punten .icon { color: var(--geel); stroke-width: 3; }
.hero__beeld { position: relative; }
.hero__blob {
    position: relative; background: #fff;
    border-radius: 58% 42% 48% 52% / 50% 56% 44% 50%;
    aspect-ratio: 1.08; display: grid; place-items: center;
    box-shadow: 0 30px 60px -24px rgba(0, 20, 70, .55);
    animation: blob 14s ease-in-out infinite;
}
.hero__blob img { width: 88%; height: auto; transform: rotate(-4deg) translateY(4%); }
@keyframes blob {
    0%, 100% { border-radius: 58% 42% 48% 52% / 50% 56% 44% 50%; }
    50% { border-radius: 44% 56% 54% 46% / 56% 46% 54% 44%; }
}
.hero__otto { position: absolute; left: -6%; bottom: -10%; width: 34%; filter: drop-shadow(0 12px 14px rgba(0, 20, 70, .35)); animation: wiebel 4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes wiebel { 0%, 100% { transform: rotate(-3deg) translateX(0); } 50% { transform: rotate(3deg) translateX(8px); } }
.zwevend {
    position: absolute; z-index: 3; font-family: var(--kop); font-weight: 600; line-height: 1.1;
    border-radius: 999px; box-shadow: var(--schaduw-hoog);
}
.zwevend--prijs {
    right: -2%; top: 6%; width: 116px; height: 116px; border-radius: 50%;
    background: var(--oranje); color: #fff; display: grid; place-content: center; text-align: center;
    font-size: .9rem; transform: rotate(10deg);
}
.zwevend--prijs strong { display: block; font-size: 1.3rem; }
.zwevend--maat { right: 8%; bottom: -3%; background: var(--geel); color: var(--midnight); padding: .7em 1.1em; font-size: 1.15rem; transform: rotate(-6deg); }
.stip--geel { width: clamp(90px, 14vw, 190px); aspect-ratio: 1.1; background: var(--geel); right: -40px; top: -50px; opacity: .95; }
.stip--oranje { width: 46px; aspect-ratio: 1.15; background: var(--oranje); left: 46%; top: 12%; }
.stip--wit { width: 22px; aspect-ratio: 1; background: rgba(255, 255, 255, .35); left: 36%; top: 7%; }

@media (max-width: 900px) {
    .hero__in { grid-template-columns: 1fr; }
    .hero__beeld { max-width: 520px; margin: 18px auto 0; width: 92%; }
    .stip--oranje { left: auto; right: 18%; top: 4%; }
}

/* ---------- Productkaarten ---------- */
.fiets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(20px, 3vw, 32px); }
.fiets-kaart { --tint: var(--lucht); }
.fiets-kaart[hidden] { display: none; }
.fiets-kaart__link {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border-radius: var(--r-l); overflow: hidden; text-decoration: none; color: inherit;
    border: 2px solid var(--lijn); box-shadow: var(--schaduw);
    transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), box-shadow .25s, border-color .25s;
}
.fiets-kaart__link:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: var(--schaduw-hoog); border-color: var(--blauw); color: inherit; }
.fiets-kaart__beeld { position: relative; background: var(--tint); aspect-ratio: 3 / 2; display: grid; place-items: center; overflow: hidden; }
.fiets-kaart__beeld img { width: 92%; height: auto; mix-blend-mode: multiply; transition: transform .4s cubic-bezier(.2, .9, .3, 1.2); }
.fiets-kaart__link:hover .fiets-kaart__beeld img { transform: scale(1.05) rotate(-2deg); }
.fiets-kaart__korting {
    position: absolute; right: 14px; top: 14px; background: var(--oranje); color: #fff;
    font: 600 .85rem/1 var(--kop); padding: .55em .8em; border-radius: 999px; transform: rotate(6deg);
}
.fiets-kaart__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 24px 22px; flex: 1; }
.fiets-kaart__titel { margin: 0; font-size: 1.7rem; }
.fiets-kaart__tekst { margin: 0; color: var(--grijs); font-size: .98rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fiets-kaart__meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.kleurstippen { display: inline-flex; gap: 6px; }
.kleurstippen i { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--lijn); }
.maatjes { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.maatjes b { font: 600 .8rem/1 var(--kop); color: var(--midnight); background: var(--lucht); padding: .45em .55em; border-radius: 8px; }
.fiets-kaart__voet { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.prijs { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .4em; }
.prijs small { color: var(--grijs); font-weight: 700; }
.prijs strong { font: 600 1.55rem/1 var(--kop); color: var(--blauw); }
.prijs s { color: var(--grijs); font-size: .95rem; }
.rondje { width: 46px; height: 46px; border-radius: 50%; background: var(--oranje); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 0 var(--oranje-donker); transition: transform .2s; }
.fiets-kaart__link:hover .rondje { transform: translateX(4px) rotate(-8deg); }
.rondje .icon { stroke-width: 2.8; }
.fiets-kaart__lengte { margin: 0; display: flex; align-items: center; gap: .4em; font-size: .9rem; font-weight: 700; color: var(--midnight); border-top: 2px dashed var(--lijn); padding-top: 12px; }
.fiets-kaart__lengte .icon { color: var(--oranje); }

/* ---------- Maatwijzer ---------- */
.maatwijzer {
    display: grid; grid-template-columns: minmax(200px, .8fr) 1.6fr; gap: clamp(24px, 4vw, 56px); align-items: stretch;
    background: #fff; border-radius: var(--r-l); padding: clamp(22px, 4vw, 48px);
    box-shadow: 0 0 0 3px var(--geel), var(--schaduw-hoog);
}
.mw-meetlat { position: relative; min-height: 420px; background: repeating-linear-gradient(to top, transparent 0 calc(100% / 36 - 2px), var(--lijn) calc(100% / 36 - 2px) calc(100% / 36)); border-radius: var(--r); background-color: var(--lucht); overflow: hidden; }
.mw-schaal span { position: absolute; left: 10px; transform: translateY(50%); font: 600 .85rem/1 var(--kop); color: var(--midnight); background: var(--lucht); padding: 2px 4px; border-radius: 4px; }
.mw-schaal span::after { content: ""; position: absolute; left: calc(100% + 4px); top: 50%; width: 14px; height: 3px; background: var(--midnight); border-radius: 2px; }
.mw-kind { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: flex-end; transition: height .35s cubic-bezier(.2, .9, .3, 1.25); }
.mw-kind img { height: 100%; width: auto; max-width: 78%; object-fit: contain; object-position: bottom; margin-left: 30px; }
.mw-streep { position: absolute; top: 0; left: 0; right: 0; border-top: 3px dashed var(--oranje); }
.mw-streep b { position: absolute; right: 8px; top: -15px; background: var(--oranje); color: #fff; font: 600 .9rem/1 var(--kop); padding: .4em .7em; border-radius: 999px; }
.mw-titel { margin-bottom: .25em; }
.mw-intro { color: var(--grijs); }
.mw-invoer { display: flex; align-items: center; gap: 16px; margin: 18px 0 10px; }
.mw-cm { font: 700 clamp(2.6rem, 6vw, 3.6rem)/1 var(--kop); color: var(--blauw); min-width: 4.4ch; text-align: center; }
.mw-cm span { font-variant-numeric: tabular-nums; }
.mw-stap { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--lucht); color: var(--blauw); display: grid; place-items: center; box-shadow: 0 4px 0 #C5D5F5; transition: transform .1s; }
.mw-stap:active { transform: translateY(3px); box-shadow: 0 1px 0 #C5D5F5; }
.mw-stap .icon { width: 26px; height: 26px; stroke-width: 3; }
.mw-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; border-radius: 999px; background: linear-gradient(to right, var(--blauw) var(--vul, 50%), var(--lucht) var(--vul, 50%)); outline-offset: 6px; margin: 8px 0 22px; }
.mw-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 38px; height: 38px; border-radius: 50%; background: var(--oranje); border: 5px solid #fff; box-shadow: 0 3px 10px rgba(0, 46, 125, .4); cursor: grab; }
.mw-slider::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--oranje); border: 5px solid #fff; box-shadow: 0 3px 10px rgba(0, 46, 125, .4); cursor: grab; }
.mw-uitkomst { background: var(--room); border-radius: var(--r); padding: 16px 20px; font-size: 1.1rem; margin-bottom: 16px; }
.mw-uitkomst strong { font-family: var(--kop); font-weight: 600; color: var(--oranje); font-size: 1.25em; }
.mw-uitkomst p { margin: 0; }
.mw-fietsen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.mw-fietsen a { display: block; text-decoration: none; color: var(--midnight); background: var(--tint, var(--lucht)); border-radius: var(--r-s); padding: 8px 10px 12px; transition: transform .2s; animation: plop .35s cubic-bezier(.2, .9, .3, 1.4) both; }
.mw-fietsen a:hover { transform: translateY(-4px) rotate(-1deg); }
.mw-fietsen img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; mix-blend-mode: multiply; }
.mw-fietsen b { display: block; font: 600 1.1rem/1.1 var(--kop); }
.mw-fietsen small { font-weight: 700; color: var(--grijs); }
@keyframes plop { from { opacity: 0; transform: scale(.85) translateY(8px); } }
@media (max-width: 760px) {
    .maatwijzer { grid-template-columns: 1fr; }
    .mw-meetlat { min-height: 250px; }
    .mw-fietsen { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .mw-fietsen b { font-size: 1rem; }
}

/* ---------- USP ---------- */
.usp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.usp { --kl: var(--blauw); background: #fff; border: 2px solid var(--lijn); border-radius: var(--r-l); padding: 30px 26px; position: relative; transition: transform .25s, border-color .25s; }
.usp:hover { transform: translateY(-4px); border-color: var(--kl); }
.usp h3 { margin-top: 18px; }
.usp p { color: var(--grijs); margin: 0; }
.usp__icoon { width: 70px; height: 70px; display: grid; place-items: center; background: var(--kl); color: #fff; border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; transform: rotate(-6deg); }
.usp__icoon .icon { width: 36px; height: 36px; transform: rotate(6deg); }
.usp--oranje { --kl: var(--oranje); }
.usp--geel { --kl: var(--geel); }
.usp--geel .usp__icoon { color: var(--midnight); }
.usp--midnight { --kl: var(--midnight); }

/* ---------- Otto ---------- */
.otto-blok { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.otto-blok__figuur { position: relative; display: grid; place-items: center; }
.otto-blok__figuur::before { content: ""; position: absolute; width: 88%; aspect-ratio: 1; background: var(--blauw); border-radius: 50%; }
.otto-blok__otto { position: relative; width: 78%; animation: zwaai 3.5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes zwaai { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-6px); } }
.ballon { position: relative; background: #fff; border-radius: var(--r-l); padding: 26px 30px; font-size: 1.2rem; box-shadow: var(--schaduw); margin-bottom: 28px; }
.ballon::before { content: ""; position: absolute; left: -16px; top: 42px; border: 16px solid transparent; border-right-color: #fff; border-left: 0; }
.ballon p { margin: 0; }
.ballon strong { font-family: var(--kop); font-weight: 600; color: var(--blauw); font-size: 1.25em; display: block; margin-bottom: 4px; }
.otto-poses { list-style: none; padding: 0; margin: 0 0 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.otto-poses li { background: #fff; border-radius: var(--r); padding: 16px 12px 12px; text-align: center; transition: transform .25s; }
.otto-poses li:nth-child(1) { transform: rotate(-2deg); }
.otto-poses li:nth-child(3) { transform: rotate(2deg); }
.otto-poses li:hover { transform: translateY(-6px) rotate(0); }
.otto-poses img { height: 110px; width: auto; margin: 0 auto 8px; }
.otto-poses span { font: 600 1rem/1 var(--kop); color: var(--midnight); }
@media (max-width: 820px) {
    .otto-blok { grid-template-columns: 1fr; }
    .otto-blok__figuur { max-width: 300px; margin: 0 auto; }
    .ballon::before { left: 50%; top: -16px; border: 16px solid transparent; border-bottom-color: #fff; border-top: 0; transform: translateX(-50%); }
    .otto-poses img { height: 80px; }
}

/* ---------- Winkelband ---------- */
.sectie--winkel { padding-top: 0; }
.winkel-band {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
    background: var(--oranje); color: #fff; border-radius: var(--r-l); padding: clamp(28px, 5vw, 56px);
}
.winkel-band::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; aspect-ratio: 1; background: rgba(255, 255, 255, .12); border-radius: 50%; }
.winkel-band h2 { color: #fff; }
.winkel-band p { margin: 0; font-size: 1.15rem; max-width: 36em; }
.winkel-band .kicker--wit { color: var(--room); }
.winkel-band__tekst { flex: 1 1 420px; position: relative; z-index: 1; }
.winkel-band__actie { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.winkel-band .btn--wit { --kl: var(--oranje); }
.winkel-band__truck { display: flex; align-items: center; gap: .45em; font-weight: 800; }

/* ---------- Paginakop ---------- */
.paginakop { position: relative; overflow: hidden; background: var(--blauw); color: #fff; padding: clamp(36px, 5vw, 64px) 0 calc(clamp(36px, 6vw, 84px) + 30px); }
.paginakop--oranje { background: var(--oranje); }
.paginakop--midnight { background: var(--midnight); }
.paginakop::before { content: ""; position: absolute; right: 12%; top: -60px; width: 200px; aspect-ratio: 1.1; border-radius: 50%; background: rgba(255, 255, 255, .09); }
.paginakop__in { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.paginakop h1 { color: #fff; margin-bottom: .2em; }
.paginakop p { font-size: 1.2rem; max-width: 38em; color: rgba(255, 255, 255, .92); margin: 0; }
.paginakop__otto { width: clamp(110px, 16vw, 200px); flex: none; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .2)); margin-bottom: -40px; }
@media (max-width: 600px) { .paginakop__otto { width: 96px; margin-bottom: -20px; } }

/* ---------- Filters (archief) ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 18px 36px; align-items: flex-end; background: #fff; border: 2px solid var(--lijn); border-radius: var(--r-l); padding: 22px 26px; margin: -10px 0 18px; position: relative; z-index: 3; box-shadow: var(--schaduw); }
.filters__groep { display: flex; flex-direction: column; gap: 8px; }
.filters__label { font: 600 .9rem/1 var(--kop); letter-spacing: .05em; text-transform: uppercase; color: var(--grijs); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 2px solid var(--lijn); background: #fff; color: var(--midnight); font: 600 1rem/1 var(--kop); padding: .55em 1em; border-radius: 999px; transition: .15s; }
.chip:hover { border-color: var(--blauw); color: var(--blauw); }
.chip.is-actief { background: var(--blauw); border-color: var(--blauw); color: #fff; }
.lengte-veld { display: flex; align-items: center; gap: 8px; }
.lengte-veld input { width: 130px; font: 600 1.05rem/1 var(--kop); color: var(--midnight); padding: .6em .9em; border-radius: 999px; border: 2px solid var(--lijn); }
.lengte-veld input:focus { border-color: var(--blauw); outline: none; }
.lengte-veld span { font-weight: 800; color: var(--grijs); }
.filters__telling { font-weight: 800; color: var(--grijs); margin: 0 0 18px; }
.fiets-grid--archief { margin-bottom: var(--sectie); }
.leeg { text-align: center; padding: 30px 0 var(--sectie); }
.leeg img { width: 150px; margin: 0 auto 12px; }
.sectie--na-grid { padding-top: var(--sectie); }

/* ---------- Productpagina ---------- */
.product { --tint: var(--lucht); }
.kruimel { font-weight: 700; font-size: .95rem; color: var(--grijs); padding: 22px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kruimel a { color: var(--grijs); text-decoration: none; }
.kruimel a:hover { color: var(--blauw); }
.product__top { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; padding-bottom: var(--sectie); }
.galerij { position: sticky; top: 104px; }
.galerij__hoofd { position: relative; background: var(--tint); border-radius: var(--r-l); aspect-ratio: 3 / 2; display: grid; place-items: center; overflow: hidden; }
.galerij__foto { width: 94%; height: auto; mix-blend-mode: multiply; transition: opacity .2s; cursor: zoom-in; }
.galerij__foto.is-wissel { opacity: 0; }
.galerij__pijl { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; color: var(--blauw); display: grid; place-items: center; box-shadow: var(--schaduw); opacity: .9; }
.galerij__pijl:hover { background: var(--blauw); color: #fff; }
.galerij__pijl--vorige { left: 14px; }
.galerij__pijl--vorige .icon { transform: scaleX(-1); }
.galerij__pijl--volgende { right: 14px; }
.galerij__duimen { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 12px; }
.galerij__duimen button { border: 3px solid transparent; background: var(--tint); border-radius: var(--r-s); padding: 0; aspect-ratio: 3 / 2; overflow: hidden; transition: border-color .15s, transform .15s; }
.galerij__duimen button:hover { transform: translateY(-2px); }
.galerij__duimen button[aria-current="true"] { border-color: var(--blauw); }
.galerij__duimen img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.koop__titel { font-size: clamp(2.4rem, 4.4vw, 3.6rem); margin-bottom: .15em; }
.koop__tagline { color: var(--grijs); font-size: 1.1rem; }
.kiezer { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.kiezer legend { font: 600 1.05rem/1 var(--kop); color: var(--midnight); margin-bottom: 10px; display: flex; gap: 12px; align-items: center; width: 100%; padding: 0; }
.kiezer legend b { font-weight: 500; color: var(--grijs); }
.kiezer__hulp { margin-left: auto; font: 700 .9rem/1 var(--tekst); display: inline-flex; align-items: center; gap: .3em; }
.kiezer__opties { display: flex; flex-wrap: wrap; gap: 8px; }
.kleur-knop { width: 50px; height: 50px; border-radius: 50%; padding: 4px; border: 3px solid transparent; background: #fff; box-shadow: 0 0 0 1.5px var(--lijn); transition: .15s; }
.kleur-knop i { display: block; width: 100%; height: 100%; border-radius: 50%; }
.kleur-knop[aria-pressed="true"] { border-color: var(--blauw); box-shadow: none; transform: scale(1.06); }
.maat-knop { min-width: 84px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: .7em .8em .6em; border-radius: var(--r-s); border: 2px solid var(--lijn); background: #fff; color: var(--midnight); transition: .15s; }
.maat-knop strong { font: 600 1.25rem/1 var(--kop); }
.maat-knop small { font-size: .74rem; font-weight: 700; color: var(--grijs); white-space: nowrap; }
.maat-knop:hover { border-color: var(--blauw); }
.maat-knop[aria-pressed="true"] { background: var(--blauw); border-color: var(--blauw); color: #fff; box-shadow: 0 4px 0 var(--midnight); }
.maat-knop[aria-pressed="true"] small { color: #D9E5FF; }
.maat-knop:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.versn-knop { border: 2px solid var(--lijn); background: #fff; color: var(--midnight); font: 600 1rem/1 var(--kop); padding: .75em 1.1em; border-radius: 999px; }
.versn-knop[aria-pressed="true"] { background: var(--blauw); border-color: var(--blauw); color: #fff; }
.versn-knop:disabled { opacity: .35; cursor: not-allowed; }
.koop__advies { display: flex; flex-wrap: wrap; gap: 8px 22px; background: var(--room); border-radius: var(--r); padding: 14px 18px; font-weight: 700; margin-bottom: 20px; }
.koop__advies span { display: inline-flex; align-items: center; gap: .4em; }
.koop__advies .icon { color: var(--oranje); }
.koop__prijs { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 18px; }
.koop__prijs strong { font: 700 2.5rem/1 var(--kop); color: var(--blauw); }
.koop__prijs s { color: var(--grijs); font-size: 1.15rem; }
.koop__bespaar:not(:empty) { background: var(--oranje); color: #fff; font: 600 .95rem/1 var(--kop); padding: .5em .8em; border-radius: 999px; transform: rotate(-3deg); }
.koop__zeker { list-style: none; padding: 0; margin: 18px 0 8px; display: grid; gap: 8px; font-weight: 700; }
.koop__zeker li { display: flex; align-items: center; gap: .55em; }
.koop__zeker .icon { color: #1BA35B; }
.koop__sku { font-size: .85rem; color: var(--grijs); margin: 0; }
@media (max-width: 900px) {
    .product__top { grid-template-columns: 1fr; }
    .galerij { position: static; }
    .galerij__duimen { grid-template-columns: repeat(6, minmax(52px, 1fr)); overflow-x: auto; }
}

.product__plus { background: var(--lucht); padding-block: var(--sectie); }
.plus-blok { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.plus-blok__otto img { width: 100%; animation: wiebel 4s ease-in-out infinite; transform-origin: 50% 100%; }
.pluslijst { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pluslijst li { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: var(--r); padding: 16px 18px; font-weight: 700; }
.pluslijst li > span { width: 34px; height: 34px; border-radius: 50%; background: #1BA35B; color: #fff; display: grid; place-items: center; flex: none; }
.pluslijst li > span .icon { width: 20px; height: 20px; stroke-width: 3; }
.pluslijst li.is-tip > span { background: var(--geel); color: var(--midnight); }
.pluslijst li.is-let-op { background: var(--room); }
.pluslijst li.is-let-op > span { background: var(--midnight); }
@media (max-width: 760px) { .plus-blok { grid-template-columns: 1fr; } .plus-blok__otto { width: 140px; } }

.product__onder { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 72px); padding-block: var(--sectie); align-items: start; }
.verhaal__intro { font-size: 1.3rem; line-height: 1.55; color: var(--midnight); font-weight: 600; }
.verhaal__secties h3 { margin-top: 1.4em; display: flex; align-items: center; gap: .45em; }
.verhaal__secties h3::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--oranje); flex: none; }
.verhaal__secties h3:nth-of-type(2n)::before { background: var(--geel); }
.verhaal__secties h3:nth-of-type(3n)::before { background: var(--blauw); }
.specs { background: #fff; border: 2px solid var(--lijn); border-radius: var(--r-l); padding: 26px; position: sticky; top: 104px; }
.specs h2 { font-size: 1.7rem; }
.specs__groep { border-top: 2px dashed var(--lijn); }
.specs__groep summary { list-style: none; cursor: pointer; padding: 14px 0; font: 600 1.15rem/1 var(--kop); color: var(--midnight); display: flex; justify-content: space-between; align-items: center; }
.specs__groep summary::-webkit-details-marker { display: none; }
.specs__groep summary::after { content: "+"; width: 28px; height: 28px; border-radius: 50%; background: var(--lucht); color: var(--blauw); display: grid; place-items: center; font-size: 1.2rem; transition: transform .2s; }
.specs__groep[open] summary::after { content: "–"; }
.specs dl { margin: 0 0 14px; }
.specs dl div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 7px 0; font-size: .97rem; }
.specs dl div + div { border-top: 1px solid #EEF2FA; }
.specs dt { color: var(--grijs); }
.specs dd { margin: 0; font-weight: 700; color: var(--midnight); }
@media (max-width: 900px) { .product__onder { grid-template-columns: 1fr; } .specs { position: static; } }

.maattabel { padding-bottom: var(--sectie); }
.tabel-scroll { overflow-x: auto; border-radius: var(--r); border: 2px solid var(--lijn); }
.maattabel table, .entry table { width: 100%; border-collapse: collapse; min-width: 560px; background: #fff; }
.maattabel th, .entry th { background: var(--midnight); color: #fff; font: 600 1rem/1.2 var(--kop); text-align: left; padding: 14px 18px; }
.maattabel td, .entry td { padding: 13px 18px; border-top: 1px solid var(--lijn); }
.maattabel tbody tr:nth-child(even), .entry tbody tr:nth-child(even) { background: #F7F9FE; }
.sectie--meer { background: var(--room); }

/* ---------- Inhoud van pagina's (editor) ---------- */
.entry { padding-block: clamp(40px, 6vw, 72px) var(--sectie); max-width: 920px; }
.entry > * { margin-block: 0 1.1em; }
.entry > h2 { margin-top: 1.6em; }
.entry > h3 { margin-top: 1.3em; }
.entry ul:not(.mw-fietsen) { padding-left: 1.3em; }
.entry ul:not(.mw-fietsen) li::marker { color: var(--oranje); }
.entry .alignwide { max-width: calc(var(--breed) - 2 * var(--gutter)); margin-inline: calc((920px - min(var(--breed), 100vw)) / 2 + var(--gutter)); }
.entry .maatwijzer { margin-block: 10px 40px; }
.entry details {
    background: #fff; border: 2px solid var(--lijn); border-radius: var(--r); padding: 0 22px; margin-bottom: 12px; transition: border-color .2s;
}
.entry details[open] { border-color: var(--blauw); }
.entry details summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font: 600 1.2rem/1.3 var(--kop); color: var(--midnight); }
.entry details summary::-webkit-details-marker { display: none; }
.entry details summary::after { content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 32px; height: 32px; border-radius: 50%; background: var(--oranje); color: #fff; display: grid; place-items: center; font-size: 1.3rem; }
.entry details[open] summary::after { content: "–"; background: var(--blauw); }
.entry details > :not(summary) { margin-top: 0; }
.entry details > :last-child { padding-bottom: 18px; margin-bottom: 0; }
.entry .wp-block-columns { gap: 22px; }
.entry .kaart, .entry .wp-block-group.is-style-kaart, .entry .wp-block-group.has-background {
    border-radius: var(--r-l); padding: clamp(22px, 3vw, 34px);
}
.entry .wp-block-group.has-background h2, .entry .wp-block-group.has-background h3 { margin-top: 0; }
.entry .wp-block-button__link { font-family: var(--kop); font-weight: 600; border-radius: 999px; padding: .8em 1.5em; background: var(--oranje); box-shadow: 0 5px 0 var(--oranje-donker); }
.entry .wp-block-image img { border-radius: var(--r); }
.has-blauw-background-color { background-color: var(--blauw) !important; }
.has-oranje-background-color { background-color: var(--oranje) !important; }
.has-geel-background-color { background-color: var(--geel) !important; }
.has-midnight-background-color { background-color: var(--midnight) !important; }
.has-lucht-background-color { background-color: var(--lucht) !important; }
.has-wit-color { color: #fff !important; }
.has-midnight-color { color: var(--midnight) !important; }
.has-blauw-background-color h2, .has-blauw-background-color h3, .has-oranje-background-color h2, .has-oranje-background-color h3,
.has-midnight-background-color h2, .has-midnight-background-color h3 { color: #fff; }
.waarden { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 28px 0 40px; }
.waarde { border-radius: var(--r-l); padding: 26px; color: #fff; position: relative; overflow: hidden; }
.waarde h3 { color: inherit; margin-top: 46px; }
.waarde p { margin: 0; }
.waarde::before { content: ""; position: absolute; left: 24px; top: 24px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .9); }
.waarde--blauw { background: var(--blauw); }
.waarde--oranje { background: var(--oranje); }
.waarde--geel { background: var(--geel); color: var(--midnight); }
.contact-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-bottom: 32px; }
.contact-kaart { background: var(--lucht); border-radius: var(--r-l); padding: 28px; }
.contact-kaart h2 { font-size: 1.5rem; margin-top: 0; }
.contact-kaart p:last-child { margin-bottom: 0; }

.otto-rij { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; justify-content: center; background: var(--lucht); border-radius: var(--r-l); padding: 28px; }
.otto-inline { display: inline-block; width: var(--b, 160px); }
.otto-inline img { width: 100%; }

/* ---------- 404 ---------- */
.niet-gevonden { background: var(--lucht); padding-block: var(--sectie); }
.niet-gevonden__in { display: grid; grid-template-columns: .7fr 1.3fr; gap: 48px; align-items: center; }
.niet-gevonden__otto { width: 100%; max-width: 320px; animation: spring 1.2s ease-in-out infinite; }
@keyframes spring { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
.niet-gevonden__code { font: 700 clamp(4rem, 12vw, 8rem)/1 var(--kop); color: var(--oranje); }
@media (max-width: 700px) { .niet-gevonden__in { grid-template-columns: 1fr; text-align: center; } .niet-gevonden__otto { max-width: 200px; margin: 0 auto; } .niet-gevonden .knoppen { justify-content: center; } }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--midnight); color: #CFDBF5; margin-top: clamp(36px, 6vw, 84px); padding-top: 30px; }
.site-footer > .golf { bottom: calc(100% - 1px); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--geel); }
.site-footer__otto { position: absolute; right: clamp(16px, 6vw, 90px); top: -110px; width: clamp(100px, 11vw, 150px); z-index: 2; animation: schommel 3s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes schommel { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-8deg); } }
.site-footer__in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; padding-block: 40px 44px; }
.site-footer h2 { font-size: 1.15rem; color: var(--geel); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer address { font-style: normal; margin-bottom: 12px; }
.site-footer__kolom p a { display: inline-flex; align-items: center; gap: .45em; word-break: break-all; }
.site-footer__logo { width: 208px; height: auto; margin-bottom: 18px; }
.site-footer__merk p { max-width: 26em; }
.site-footer__onder { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 20px 26px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .92rem; }
.site-footer__kleuren { display: inline-flex; gap: 6px; }
.site-footer__kleuren i { width: 14px; height: 14px; border-radius: 50%; background: var(--blauw); }
.site-footer__kleuren i:nth-child(2) { background: var(--oranje); }
.site-footer__kleuren i:nth-child(3) { background: var(--geel); }
@media (max-width: 900px) { .site-footer__in { grid-template-columns: 1fr 1fr; } .site-footer__merk { grid-column: 1 / -1; } }
@media (max-width: 520px) { .site-footer__in { grid-template-columns: 1fr; } .site-footer__onder { flex-direction: column; align-items: flex-start; } }

/* ---------- Beweging beperken ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}