/* BesteFietsendrager: subtiele beweging (bfd-motion). Alleen CSS en inline SVG, geen JavaScript.
   Drie plekken: homepage-hero (.bfd-m-hero), footerstrook (#footer, desktop) en de oranje koopknop (.bfd-pb--hero, desktop).
   Voorvoegsel bfd-m- / --bfd-m-. Animaties gebruiken transform/opacity; prefers-reduced-motion zet alles stil. */
:root{
  --bfd-m-car:#2B3640;--bfd-m-rear:#34424F;--bfd-m-car-low:#1B242C;--bfd-m-glass:#0B1319;--bfd-m-accent:#7FD3E6;--bfd-m-tail:#FF4B4B;--bfd-m-edge:#7F95A6;--bfd-m-shoulder:#6F879A;--bfd-m-spoke:#7F95A6;
  --bfd-m-tyre:#0E151B;--bfd-m-arch:#0A1318;--bfd-m-rimd:#1B252D;--bfd-m-rack:#9AAAB6;--bfd-m-bwheel:#C5D5DE;--bfd-m-bike1:#7FD3E6;--bfd-m-bike2:#4F8095;--bfd-m-bike3:#5B8CA2;--bfd-m-strap:#263540;
  --bfd-m-hill-far:rgba(127,211,230,.12);--bfd-m-hill-near:rgba(4,30,42,.45);--bfd-m-road:rgba(3,22,32,.6);--bfd-m-dash:rgba(255,255,255,.5);
  --bfd-m-sun:#F2C566;--bfd-m-cloud:rgba(255,255,255,.085);
}

/* ---------- 1. Homepage-hero ---------- */
.bfd-hm-hero{position:relative;overflow:hidden}
.bfd-hm-hero>.bfd-hm-hero__in{position:relative;z-index:1}
.bfd-hm-hero:has(>.bfd-m-hero){padding-bottom:calc(2.4rem + 54px)}
.bfd-m-hero,.bfd-m-hero[hidden]{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;--bfd-m-roadh:28px}
.bfd-m-hero i{display:block;font-style:normal}
.bfd-m-sun,.bfd-m-beam,.bfd-m-cloud,.bfd-m-birdwrap{display:none}
.bfd-m-hills{position:absolute;left:0;right:0;bottom:var(--bfd-m-roadh);overflow:hidden}
.bfd-m-hills--far{height:70px}.bfd-m-hills--near{height:46px}
.bfd-m-hills i{position:absolute;left:0;top:0;bottom:0;width:5120px}
.bfd-m-hills--far i{background:var(--bfd-m-hill-far);-webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 150' preserveAspectRatio='none'%3E%3Cpath d='M0 150V53L40 49L80 49L120 52L160 57L200 64L240 70L280 74L320 76L360 75L400 71L440 68L480 65L520 65L560 68L600 74L640 82L680 90L720 98L760 103L800 106L840 107L880 106L920 103L960 101L1000 98L1040 94L1080 90L1120 84L1160 76L1200 68L1240 60L1280 53V150Z'/%3E%3C/svg%3E") repeat-x 0 100%/1280px 100%;mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 150' preserveAspectRatio='none'%3E%3Cpath d='M0 150V53L40 49L80 49L120 52L160 57L200 64L240 70L280 74L320 76L360 75L400 71L440 68L480 65L520 65L560 68L600 74L640 82L680 90L720 98L760 103L800 106L840 107L880 106L920 103L960 101L1000 98L1040 94L1080 90L1120 84L1160 76L1200 68L1240 60L1280 53V150Z'/%3E%3C/svg%3E") repeat-x 0 100%/1280px 100%}
.bfd-m-hills--near i{background:var(--bfd-m-hill-near);-webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V44L40 43L80 45L120 50L160 56L200 61L240 64L280 67L320 70L360 74L400 80L440 84L480 87L520 85L560 80L600 73L640 67L680 62L720 60L760 60L800 60L840 60L880 58L920 55L960 53L1000 54L1040 56L1080 58L1120 59L1160 57L1200 53L1240 48L1280 44V100Z'/%3E%3Cpath d='M210 39l-10 26h20zM236 41l-10 26h20zM262 43l-10 26h20zM560 57l-10 26h20zM586 53l-10 26h20zM884 34l-10 26h20zM910 33l-10 26h20zM936 31l-10 26h20zM1040 33l-10 26h20z'/%3E%3C/svg%3E") repeat-x 0 100%/1280px 100%;mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V44L40 43L80 45L120 50L160 56L200 61L240 64L280 67L320 70L360 74L400 80L440 84L480 87L520 85L560 80L600 73L640 67L680 62L720 60L760 60L800 60L840 60L880 58L920 55L960 53L1000 54L1040 56L1080 58L1120 59L1160 57L1200 53L1240 48L1280 44V100Z'/%3E%3Cpath d='M210 39l-10 26h20zM236 41l-10 26h20zM262 43l-10 26h20zM560 57l-10 26h20zM586 53l-10 26h20zM884 34l-10 26h20zM910 33l-10 26h20zM936 31l-10 26h20zM1040 33l-10 26h20z'/%3E%3C/svg%3E") repeat-x 0 100%/1280px 100%}
.bfd-m-road{position:absolute;left:0;right:0;bottom:0;height:var(--bfd-m-roadh);overflow:hidden;background:var(--bfd-m-road);box-shadow:inset 0 2px 0 rgba(255,255,255,.1)}
.bfd-m-road__dash{position:absolute;left:0;top:58%;width:calc(100% + 96px);height:3px;background:repeating-linear-gradient(90deg,var(--bfd-m-dash) 0 38px,transparent 38px 96px)}
.bfd-m-carwrap{position:absolute;right:5%;bottom:5px}
.bfd-m-car{display:block;width:124px;height:auto;overflow:visible}

/* variant B: recht achteraanzicht met perspectiefweg */
.bfd-m-car--b{width:96px}.bfd-m-car--a{width:116px}
.bfd-m-hero--b .bfd-m-road__dash{display:none}
.bfd-m-persp{position:absolute;inset:0;width:100%;height:100%;display:block}
.bfd-m-pd{display:none;position:absolute;left:84%;top:2px;width:3px;height:6px;background:var(--bfd-m-dash);opacity:0}

@media (min-width:1000px){
  .bfd-m-hero,.bfd-m-hero[hidden]{--bfd-m-roadh:40px}
  .bfd-m-hero--b,.bfd-m-hero--b[hidden]{--bfd-m-roadh:56px}
  .bfd-m-car--b{width:clamp(150px,17.5vw,230px)}
  .bfd-m-car--a{width:clamp(180px,21vw,270px)}
  .bfd-m-car--a .bfd-m-rackg,.bfd-m-car--a .bfd-m-bikes{transform-origin:90px 112px}
  .bfd-m-hero--b .bfd-m-carwrap{bottom:9px}
  .bfd-m-pd{display:block}
  .bfd-hm-hero:has(>.bfd-m-hero){padding-bottom:calc(2.4rem + 76px)}
  .bfd-m-hills--far{height:150px}.bfd-m-hills--near{height:92px}
  .bfd-m-carwrap{right:3%;bottom:7px}
  .bfd-m-car{width:clamp(212px,25.5vw,340px)}
  .bfd-m-sun{display:block;position:absolute;right:9%;top:13%;width:56px;height:56px}
  .bfd-m-sun__disc{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 40% 38%,#FBE8B4,var(--bfd-m-sun) 72%);box-shadow:0 0 38px 10px rgba(242,197,102,.26)}
  .bfd-m-sun__rays{position:absolute;inset:-80px;border-radius:50%;background:repeating-conic-gradient(rgba(247,214,140,.12) 0 5deg,transparent 5deg 20deg);-webkit-mask:radial-gradient(circle,transparent 16%,#000 30%,transparent 68%);mask:radial-gradient(circle,transparent 16%,#000 30%,transparent 68%)}
  .bfd-m-beam{display:block;position:absolute;right:calc(9% - 40px);top:calc(13% + 30px);width:300px;height:260px;background:linear-gradient(205deg,rgba(247,214,140,.2),transparent 72%);clip-path:polygon(55% 0,80% 0,25% 100%,0 100%);transform-origin:70% 0;opacity:0}
  .bfd-m-cloud{display:block;position:absolute;left:0;width:116px;height:26px;border-radius:99px;background:var(--bfd-m-cloud);transform:translate3d(-240px,0,0)}
  .bfd-m-cloud::before,.bfd-m-cloud::after{content:"";position:absolute;border-radius:50%;background:var(--bfd-m-cloud)}
  .bfd-m-cloud::before{left:20px;top:-15px;width:46px;height:46px}.bfd-m-cloud::after{left:52px;top:-9px;width:36px;height:36px}
  .bfd-m-cloud--a{top:11%}.bfd-m-cloud--b{top:30%;transform-origin:0 0;scale:.7}.bfd-m-cloud--c{top:19%;scale:1.25}
  .bfd-m-birdwrap{display:block;position:absolute;left:0;top:22%;color:rgba(255,255,255,.5);transform:translate3d(-80px,0,0)}
  .bfd-m-bird{display:block}
}

@media (min-width:1000px) and (prefers-reduced-motion:no-preference){
  .bfd-m-hills i{animation:bfd-m-slide 120s linear infinite;will-change:transform}
  .bfd-m-hills--near i{animation-duration:48s}
  .bfd-m-road__dash{animation:bfd-m-dash 1.15s linear infinite;will-change:transform}
  .bfd-m-body{animation:bfd-m-bob .55s ease-in-out infinite alternate}
  .bfd-m-cw{transform-box:fill-box;transform-origin:center;animation:bfd-m-spin .55s linear infinite}
  .bfd-m-rackg{transform-origin:146px 110px;animation:bfd-m-wob 2.4s ease-in-out infinite}.bfd-m-bikes{transform-origin:85px 100px;animation:bfd-m-wob2 3.1s ease-in-out infinite}
  .bfd-m-sun__rays{animation:bfd-m-turn 160s linear infinite}
  .bfd-m-beam{animation:bfd-m-beam 17s ease-in-out infinite 3s}
  .bfd-m-cloud{animation:bfd-m-cloud 190s linear infinite}
  .bfd-m-cloud--b{animation-duration:260s;animation-delay:-90s}.bfd-m-cloud--c{animation-duration:220s;animation-delay:-150s}.bfd-m-cloud--a{animation-delay:-40s}
  .bfd-m-birdwrap{animation:bfd-m-bird 95s linear infinite 7s backwards}
  .bfd-m-bird{animation:bfd-m-flap .42s ease-in-out infinite alternate;transform-origin:50% 60%}
}
@media (min-width:1000px) and (prefers-reduced-motion:reduce){
  .bfd-m-birdwrap{display:none}.bfd-m-cloud{transform:translate3d(18vw,0,0)}.bfd-m-cloud--b{transform:translate3d(52vw,0,0)}.bfd-m-cloud--c{transform:translate3d(78vw,0,0)}
}
@keyframes bfd-m-pd{0%{opacity:0;transform:translate3d(0,0,0) scale(.3)}15%{opacity:.8}100%{opacity:0;transform:translate3d(-9vw,48px,0) scale(2,3.4)}}
@keyframes bfd-m-slide{to{transform:translate3d(-1280px,0,0)}}
@keyframes bfd-m-dash{to{transform:translate3d(-96px,0,0)}}
@keyframes bfd-m-bob{to{transform:translate3d(0,-.9px,0)}}
@keyframes bfd-m-spin{to{transform:rotate(360deg)}}
@keyframes bfd-m-wob{0%,100%{transform:rotate(-.25deg)}50%{transform:rotate(.25deg)}}
@keyframes bfd-m-wob2{0%,100%{transform:rotate(-.35deg)}50%{transform:rotate(.35deg)}}
@keyframes bfd-m-turn{to{transform:rotate(360deg)}}
@keyframes bfd-m-beam{0%,100%{opacity:0;transform:rotate(-4deg)}45%{opacity:.85}60%{opacity:.85;transform:rotate(4deg)}85%{opacity:0}}
@keyframes bfd-m-cloud{to{transform:translate3d(calc(100vw + 240px),0,0)}}
@keyframes bfd-m-bird{0%{transform:translate3d(calc(100vw + 60px),0,0)}16%{transform:translate3d(-80px,-34px,0)}100%{transform:translate3d(-80px,-34px,0)}}
@keyframes bfd-m-flap{to{transform:scaleY(.35)}}

/* ---------- 2. Footer: autootje met fietsen langs de onderbalk (desktop) ---------- */
@media (min-width:1000px){
  #footer{overflow-x:clip}
  #footer .bfd-footer-lane{position:relative;overflow:hidden;pointer-events:none;width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:0}
  #footer .bfd-footer-lane::before,#footer:not(:has(.bfd-footer-lane)) [data-row="bottom"]::before{content:"";position:absolute;left:0;width:136px;height:47px;background:url("data:image/svg+xml;utf8,%3Csvg viewBox='92 38 264 88' width='264' height='88' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cg id='bfd-m-bb' fill='none' stroke='currentColor' stroke-linecap='round'%3E%3Cellipse cy='-17.5' rx='2.8' ry='17.3' stroke-width='3'/%3E%3Cpath stroke-width='3' d='M0 -17.5V-45M-7 -50.5H7'/%3E%3Cpath stroke-width='4.6' d='M-6.5 -46.4H6.5'/%3E%3C/g%3E%3C/defs%3E%3Cellipse cx='240' cy='124.5' rx='116' ry='3.2' fill='%23000' opacity='.4'/%3E%3Cg%3E%3Cg%3E%3Cpath d='M146 105V108' stroke='%239AAAB6' stroke-width='3'/%3E%3Ccircle cx='146' cy='109.6' r='3.4' fill='%23D3DEE5'/%3E%3Cpath d='M146 111H118V101' fill='none' stroke='%239AAAB6' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg%3E%3Cuse href='%23bfd-m-bb' x='128' y='99' style='color:%234F8095'/%3E%3Cuse href='%23bfd-m-bb' x='118' y='99' style='color:%23E3CF9A'/%3E%3Cuse href='%23bfd-m-bb' x='108' y='99' style='color:%237FD3E6'/%3E%3C/g%3E%3Cpath d='M98 100H138' stroke='%239AAAB6' stroke-width='4.4' stroke-linecap='round'/%3E%3Cpath d='M97 100V90' stroke='%239AAAB6' stroke-width='2.4' stroke-linecap='round'/%3E%3Crect x='93.4' y='86' width='7' height='6' rx='2' fill='%23FF4B4B'/%3E%3Crect x='100' y='93' width='2.4' height='8' rx='.8' fill='%23F2E27A'/%3E%3C/g%3E%3Cpath d='M146 104.5V89Q146 80 153 77L160 73C180 62 210 58 238 58C258 58 272 64 292 72L336 78Q350 80 352 92V104.5Z' fill='%232B3640' stroke='%237F95A6' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M146 98H352V104.5H146Z' fill='%231B242C'/%3E%3Cpath d='M152 83L340 85' stroke='%236F879A' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M164 78L172 68C190 63 214 62 238 62C254 62 264 65 276 72L282 78Z' fill='%230B1319'/%3E%3Cpath d='M219 62L216 78' stroke='%232B3640' stroke-width='3'/%3E%3Cpath d='M184 60.6C200 59.2 220 58.8 238 59' fill='none' stroke='%237FD3E6' stroke-width='1' opacity='.55'/%3E%3Cpath d='M162 80.4H284' stroke='%237FD3E6' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M148 76L162 72V74.4L151 78Z' fill='%231B242C'/%3E%3Cpath d='M145.4 80H149.4V93L146.6 93Q145.4 90 145.4 86Z' fill='%23FF4B4B'/%3E%3Cpath d='M338 83L351 87.4' stroke='%23E8F6FF' stroke-width='2.2' stroke-linecap='round'/%3E%3Cg transform='translate%28190 104.6%29 scale%281.05%29'%3E%3Ccircle r='21' fill='%230A1318'/%3E%3Cg%3E%3Ccircle r='17.5' fill='%230E151B'/%3E%3Ccircle r='12.6' fill='%231B252D' stroke='%237F95A6' stroke-width='1'/%3E%3Cpath transform='rotate%280%29' d='M-1.9 -4V-11.3M1.9 -4V-11.3' stroke='%237F95A6' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath transform='rotate%2872%29' d='M-1.9 -4V-11.3M1.9 -4V-11.3' stroke='%237F95A6' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath transform='rotate%28144%29' d='M-1.9 -4V-11.3M1.9 -4V-11.3' stroke='%237F95A6' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath transform='rotate%28216%29' d='M-1.9 -4V-11.3M1.9 -4V-11.3' stroke='%237F95A6' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath transform='rotate%28288%29' d='M-1.9 -4V-11.3M1.9 -4V-11.3' stroke='%237F95A6' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle r='3' fill='%237F95A6'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate%28316 104.6%29 scale%281.05%29'%3E%3Ccircle r='21' fill='%230A1318'/%3E%3Cg%3E%3Ccircle r='17.5' fill='%230E151B'/%3E%3Ccircle r='12.6' fill='%231B252D' stroke='%237F95A6' stroke-width='1'/%3E%3Cpath transform='rotate%280%29' d='M-1.9 -4V-11.3M1.9 -4V-11.3' stroke='%237F95A6' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath transform='rotate%2872%29' d='M-1.9 -4V-11.3M1.9 -4V-11.3' stroke='%237F95A6' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath transform='rotate%28144%29' d='M-1.9 -4V-11.3M1.9 -4V-11.3' stroke='%237F95A6' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath transform='rotate%28216%29' d='M-1.9 -4V-11.3M1.9 -4V-11.3' stroke='%237F95A6' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath transform='rotate%28288%29' d='M-1.9 -4V-11.3M1.9 -4V-11.3' stroke='%237F95A6' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle r='3' fill='%237F95A6'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0/contain;pointer-events:none;z-index:2;transform:translate3d(6vw,0,0)}
  #footer .bfd-footer-lane::before{bottom:4px}
  #footer .bfd-footer-lane::after,#footer:not(:has(.bfd-footer-lane)) [data-row="bottom"]::after{content:"";position:absolute;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 22px,transparent 22px 56px);pointer-events:none}
  #footer .bfd-footer-lane::after{bottom:0}
  #footer:not(:has(.bfd-footer-lane)) [data-row="bottom"]{position:relative}
  #footer:not(:has(.bfd-footer-lane)) [data-row="bottom"]::before{top:-52px;left:calc(50% - 50vw)}
  #footer:not(:has(.bfd-footer-lane)) [data-row="bottom"]::after{top:-3px;left:calc(50% - 50vw);right:auto;width:100vw}
}
@media (min-width:1000px) and (prefers-reduced-motion:no-preference){
  #footer .bfd-footer-lane::before,#footer:not(:has(.bfd-footer-lane)) [data-row="bottom"]::before{transform:translate3d(-150px,0,0);animation:bfd-m-drive 46.5s linear infinite,bfd-m-fbob .5s ease-in-out infinite alternate;will-change:transform}
}
@keyframes bfd-m-drive{0%{transform:translate3d(-150px,0,0)}96%,100%{transform:translate3d(calc(100vw + 20px),0,0)}}
@keyframes bfd-m-fbob{to{translate:0 -1px}}

/* ---------- 3. Koopknop op de modelpagina: zachte glans, rustig ademende gloed, fiets bij hover (desktop) ---------- */
@media (min-width:1000px) and (prefers-reduced-motion:no-preference){
  .bfd-pb--hero a.bfd-btn:not(.bfd-btn--ghost),.bfd-tbl--prices tbody tr:first-child a.bfd-btn:not(.bfd-btn--ghost){position:relative}
  .bfd-pb--hero a.bfd-btn:not(.bfd-btn--ghost)::before,.bfd-tbl--prices tbody tr:first-child a.bfd-btn:not(.bfd-btn--ghost)::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;border-radius:10px 10px 0 0;pointer-events:none;background:linear-gradient(100deg,transparent 0 42%,rgba(255,255,255,.55) 50%,transparent 58% 100%) no-repeat;background-size:260% 100%;background-position:130% 0;animation:bfd-m-glint 6.5s ease-in-out infinite 2s}
  .bfd-pb--hero a.bfd-btn:not(.bfd-btn--ghost)::after,.bfd-tbl--prices tbody tr:first-child a.bfd-btn:not(.bfd-btn--ghost)::after{content:"";position:absolute;inset:-3px;border-radius:15px;pointer-events:none;box-shadow:0 0 0 2px rgba(200,70,10,.4),0 6px 20px rgba(200,70,10,.35);opacity:0;animation:bfd-m-breathe 6.5s ease-in-out infinite 2s}
  .bfd-pb--hero a.bfd-btn:not(.bfd-btn--ghost){background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 17' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='4.2'/%3E%3Ccircle cx='23' cy='12' r='4.2'/%3E%3Cpath d='M5 12L11 12L9 5H7M11 12L17 5H21M21 5L23 12M9 5L17 5M17 5L19 2H22'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:28px 17px;background-position:calc(100% + 36px) 50%;transition:background-color .15s,border-color .15s,transform .15s,background-position .45s cubic-bezier(.2,.8,.2,1)}
  .bfd-pb--hero a.bfd-btn:not(.bfd-btn--ghost):hover,.bfd-pb--hero a.bfd-btn:not(.bfd-btn--ghost):focus-visible{background-position:calc(100% - 14px) 50%}
}
@keyframes bfd-m-glint{0%,62%{background-position:130% 0}84%,100%{background-position:-30% 0}}
@keyframes bfd-m-breathe{0%,100%{opacity:0;transform:scale(.985)}50%{opacity:1;transform:scale(1.012)}}