/* Native scroll chapters. No scroll interception; motion is optional. */
:root { --hot-pink: #ff2b93;  }
.journey { background: #19191c; color: #fff; overflow: clip; }
.journey section { scroll-margin-top: 72px; }
.journey h1, .journey h2 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 550; text-transform: none; letter-spacing: -.065em; line-height: .97; }
.journey h1, .ride-scene h2 { font-size: clamp(4.4rem, 8.5vw, 9rem); }
.journey h2 { margin-bottom: 32px; }
.journey em { font-family: 'Grand Holiday Sans', sans-serif; font-style: normal; font-weight: 400; letter-spacing: -.01em; }
.journey .eyebrow { color: inherit; font-size: .64rem; letter-spacing: .16em; margin-bottom: 30px; }
.ride-scene { position: relative; min-height: 130svh; isolation: isolate; display: flex; align-items: flex-start; padding: 0 7%; }
.scene-media { position: absolute; inset: 0; overflow: hidden; z-index: -2; background: #252528; }
.scene-media img { width: 100%; height: calc(100% + 220px); max-width: none; position: absolute; top: -110px; object-fit: cover; transform: translate3d(0, var(--scene-shift, 0px), 0); }
.scene-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #101015dc, #10101570 70%, #10101535); }
.scene-copy { position: sticky; top: 130px; padding: 70px 0 100px; max-width: 950px; z-index: 2; }
.scene-copy > p:not(.eyebrow) { font-size: 1.05rem; line-height: 1.7; color: #f0edf0; margin-bottom: 28px; }
.ride-city em { color: #ffffff; }
.ride-wild em { color: #ffffff; }
.ride-wild .scene-media::after { background: linear-gradient(90deg, #151919ed, #15191985 80%); }
.scene-word { position: absolute; right: -1%; bottom: 15px; font-size: clamp(8rem, 22vw, 24rem); font-weight: 800; letter-spacing: -.08em; line-height: .9; color: #ffffff12; pointer-events: none; }
.journey-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 45px; padding: 15px 0; border-bottom: 1px solid currentColor; text-decoration: none; font-size: .95rem; font-weight: 600; }
.journey-link:hover { color: #ff69b0; }
.scroll-cue { display: block; margin-top: 50px; font-size: .6rem; letter-spacing: .17em; color: #d2d2d5; }
.ride-product { position: relative; background: #eeeae1; color: #232323; min-height: 100svh; display: grid; grid-template-columns: .9fr 1.2fr; align-items: center; gap: 3%; padding: 100px 7%; }
.product-story { max-width: 450px; }
.product-story h2 { font-size: clamp(3rem, 5.5vw, 6rem); }
.product-story em { color: #232323; }
.product-story > p:not(.eyebrow) { max-width: 350px; color: #575052; }
.story-bike { position: relative; }
.story-bike .product-visual, .story-bike .product-image { background: transparent; }
.story-bike .product-image { padding: 20px 0; }
.story-bike img { mix-blend-mode: multiply; }
.story-bike figcaption { border: 0; padding-left: 0; }
.story-caption { display: block; margin-top: 20px; border-top: 1px solid #bcb5b0; padding-top: 20px; font-size: .65rem; letter-spacing: .15em; }
.ride-distance { background: #2b2c30; color: white; padding: 110px 7%; min-height: 110svh; display: grid; grid-template-columns: 1fr 1fr; gap: 7%; align-items: center; }
.ride-distance h2 { font-size: clamp(3.5rem, 6.8vw, 7rem); }
.ride-distance em { color: #ffffff; }
.ride-distance figure { margin: 0; transform: rotate(4deg); }
.ride-distance figure img { width: 100%; height: 62svh; object-fit: cover; }
.ride-distance figcaption { margin-top: 16px; font-size: .65rem; }
.ride-finish { min-height: 95svh; padding: 100px 7% 130px; background: #1c1c20; }
.ride-finish h2 { font-size: clamp(5rem, 10vw, 11rem); }
.ride-finish em { color: #ffffff; }
.finish-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; margin: 55px 0 45px; }
.finish-links a { border-top: 1px solid #ffffff55; padding: 22px 0; font-size: 1.3rem; text-decoration: none; }
.finish-links a:hover { color: #ff2b93; }
.finish-links span { display: block; font-size: .6rem; letter-spacing: .13em; color: #d2d2d5; margin-bottom: 20px; }
.ride-finish .note { color: #c5bcc3; }
.journey-index { position: fixed; z-index: 90; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; background: #1b1b20ed; color: #fff; border: 1px solid #ffffff40; border-radius: 50px; padding: 7px; backdrop-filter: blur(12px); overflow: hidden; box-shadow: 0 5px 30px #0003; }
.journey-index button { position: relative; z-index: 1; display: flex; gap: 8px; align-items: center; padding: 12px 16px; border: 0; background: transparent; border-radius: 30px; font-size: .65rem; color: #dedee1; white-space: nowrap; }
.journey-index button[aria-current] { background: #fff; color: #1b1b20; }
.journey-index button:hover { background: #38383e; color: white; }
.journey-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #ff3695; transform-origin: left; transform: scaleX(var(--journey-progress, 0)); }
@media (max-width: 760px) {
	.journey section { scroll-margin-top: 66px; }
	.journey h1, .ride-scene h2 { font-size: clamp(3.3rem, 13vw, 5.5rem); }
	.ride-scene { min-height: 115svh; padding: 0 7%; }
	.scene-copy { top: 90px; padding: 45px 0 85px; }
	.scene-copy > p:not(.eyebrow) { font-size: .95rem; }
	.scene-media::after { background: #101015a8; }
	.scene-word { font-size: 30vw; }
	.ride-product, .ride-distance { grid-template-columns: 1fr; padding: 65px 7%; gap: 40px; min-height: auto; }
	.product-story h2 { font-size: 3.2rem; }
	.story-bike .product-image { min-height: 230px; }
	.ride-distance h2 { font-size: 3.7rem; }
	.ride-distance figure img { height: 48svh; }
	.ride-distance figure { transform: rotate(2deg); }
	.ride-finish { padding: 70px 7% 120px; }
	.finish-links { grid-template-columns: 1fr; gap: 8px; }
	.finish-links a { font-size: 1.2rem; }
	.finish-links span { margin-bottom: 10px; }
	.journey-index { bottom: 12px; max-width: calc(100% - 24px); padding: 5px; gap: 2px; }
	.journey-index button { padding: 12px 16px; }
	.chapter-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.scene-copy { position: relative; top: auto; }
	.ride-scene { min-height: 85svh; }
	.scene-media img { transform: none; }
	.ride-distance figure { transform: none; }
}

footer .logo { background: transparent; padding: 0; border-radius: 0; }
.journey-index { top: auto; right: auto; }

.journey-index.is-ended { visibility: hidden; pointer-events: none; }

/* Neutral chapters, small electric brand signals. */
.journey .eyebrow::before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 12px;
	background: var(--hot-pink);
	vertical-align: 1px;
}
.ride-wild .eyebrow::before, .ride-distance .eyebrow::before {
	background: var(--hot-pink);
}
.journey-link { border-bottom-color: var(--hot-pink); }
.ride-wild .journey-link, .ride-distance .journey-link { border-bottom-color: var(--hot-pink); }
.journey-index button[aria-current]::after {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #e40070;
}
.finish-links a:hover { border-top-color: var(--hot-pink); }

/* Consistent electric accents throughout the catalogue and tools. */
:root { --paper: #ffffff; --surface: #ffffff; }
:focus-visible { outline-color: #d10067; }
nav a[aria-current] { text-decoration-color: #ff3695; }
.primary { background: #ff3695; color: #191919; }
.primary:hover { background: #ff57a7; color: #191919; }
.sale-badge { background: #ff2b93; color: #191919; }
.price-block.is-sale strong, .price-block.is-sale small { color: #ff3695; }
.filters .sale-filter:has(input:checked) { background: #f3f3f3; border-color: #191919; box-shadow: inset 3px 0 #ff2b93; }
.sale-filter input[type='checkbox'] { accent-color: #d10067; }
.active-filters button { background: #252529; border-color: #252529; }
.active-filters button span { color: #ff73b9; }
.answer:has(input:checked) { background: #f1f1f1; border-color: #252529; box-shadow: inset 3px 0 #ff3695; }
.compare-button.is-selected { background: #252529; border-color: #252529; box-shadow: inset 3px 0 #ff2b93; }
.page-heading:has(+ .catalog-section) .eyebrow { color: #f2f2f2; }
.page-heading:has(+ .catalog-section) .eyebrow::before { background: #ff3695; }
.ride-product { background: #eeefef; }
.explorer-layout input, .explorer-layout select { background: #f3f3f3; }

/* Sale editions: a quiet product stage with an electric price signature. */
.sale-bike .card-image { isolation: isolate; }
.sale-bike .card-image::before {
	content: '';
	position: absolute;
	width: 72%;
	height: 72%;
	left: 14%;
	top: 12%;
	border-radius: 50%;
	background: radial-gradient(ellipse, #e6e6e8 0%, #f4f4f5 60%, transparent 72%);
	z-index: -1;
}
.sale-bike .product-visual, #catalog-results .sale-bike .product-visual,
.sale-bike .product-image, #catalog-results .sale-bike .product-image { background: transparent; }
.sale-bike .product-image img { mix-blend-mode: multiply; }
.sale-bike .sale-badge, .detail-visual .sale-badge {
	display: flex;
	flex-direction: column;
	gap: 2px;
	top: 26px;
	right: 16px;
	padding: 10px 15px;
	transform: rotate(8deg);
	background: #ff2b93;
	color: #171717;
	border-radius: 0;
	box-shadow: 4px 4px 0 #171717;
	z-index: 3;
	transition: transform .25s ease;
}
.sale-badge > span { font-size: .5rem; letter-spacing: .2em; }
.sale-badge b { font-size: 1.05rem; letter-spacing: -.03em; line-height: 1; }
.sale-bike:hover .sale-badge { transform: rotate(0deg) translateY(-3px); }
.sale-bike .price-block.is-sale { position: relative; gap: .35rem .85rem; margin-top: 20px; }
.sale-bike .price-block.is-sale strong { font-size: clamp(1.9rem, 3vw, 2.6rem); color: #171717; letter-spacing: -.055em; line-height: 1.1; }
.sale-bike .price-block.is-sale del { color: #626262; }
.sale-bike .price-block.is-sale small, .detail-price .price-block.is-sale small {
	flex-basis: auto;
	width: fit-content;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #ff3695;
	color: #171717;
	padding: 6px 9px;
	margin-top: 6px;
	font-size: .7rem;
	font-weight: 650;
	border-radius: 3px;
}
.sale-bike .price-block.is-sale small { margin-right: 25%; }
.saving-mark { font-size: 1rem; font-weight: 700; }
#catalog-results .sale-bike .card-title h3 { max-width: 95%; }
#catalog-results .sale-bike .card-actions > a { text-decoration-color: #ff2b93; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 760px) {
	.sale-bike .sale-badge { right: 12px; top: 20px; }
	.sale-bike .price-block.is-sale strong { font-size: 2rem; }
	#catalog-results.is-dense .sale-bike .price-block.is-sale strong { font-size: 1.5rem; }
	.sale-bike .price-block.is-sale small { margin-right: 0; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
	.sale-bike .sale-badge { transition: none; }
	.sale-bike:hover .sale-badge { transform: rotate(8deg); }
}

/* Sale is its own edition, rather than a price label on a regular card. */
.sale-intro[hidden] { display: none; }
.sale-intro { position: relative; overflow: hidden; background: #1c1c21; color: white; padding: 38px 38px 25px; margin-bottom: 30px; border-radius: 3px; border-left: 4px solid #ff2b93; }
.sale-edition { font-size: .58rem; letter-spacing: .2em; }
.sale-intro h2 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: clamp(2.5rem, 4.7vw, 5rem); line-height: .98; font-weight: 600; letter-spacing: -.06em; margin: 30px 0 20px; position: relative; z-index: 1; }
.sale-intro h2 em { font-family: 'Grand Holiday Sans', sans-serif; font-style: normal; font-weight: 400; color: white; }
.sale-intro p { font-size: .8rem; color: #c5c5cc; }
.sale-intro::after { content: '↘'; position: absolute; right: 22px; top: 55px; font-size: 11rem; line-height: 1; color: #ff3695; transform: rotate(-10deg); opacity: .9; }
.sale-intro-foot { display: block; border-top: 1px solid #ffffff40; margin-top: 28px; padding-top: 18px; font-size: .52rem; letter-spacing: .18em; }
.sale-intro-foot span { color: #ff2b93; padding: 0 12px; }
#catalog-results .sale-bike { background: #1c1c21; color: white; padding: 0; margin: 0 0 24px; border-top: 0; border-radius: 3px; overflow: hidden; grid-template-columns: 52% 48%; }
#catalog-results .sale-bike::before { display: none; }
#catalog-results .sale-bike .card-image { background: #f3f3f4; margin: 12px 0 12px 12px; border-radius: 2px; min-height: 335px; }
#catalog-results .sale-bike .product-image { background: transparent; height: 300px; }
#catalog-results .sale-bike .card-body { padding: 35px 26px; }
#catalog-results .sale-bike .card-title h3 { font-size: clamp(1.5rem, 2.3vw, 2.2rem); color: white; }
#catalog-results .sale-bike .price-block strong { color: white; font-size: clamp(2.3rem, 3.6vw, 3.4rem); }
#catalog-results .sale-bike .price-block del { color: #b8b8c0; }
#catalog-results .sale-bike .price-block small { margin-right: 0; }
#catalog-results .sale-bike .card-body > p { color: #ccccd2; font-size: .8rem; }
#catalog-results .sale-bike .spec-mini span { background: #303037; color: #dedee4; }
#catalog-results .sale-bike .card-actions { border-color: #ffffff35; }
#catalog-results .sale-bike .compare-button { color: white; border-color: #74747b; background: transparent; }
#catalog-results .sale-bike .compare-button.is-selected { box-shadow: inset 3px 0 #ff2b93; border-color: #ff2b93; }
#catalog-results .sale-bike .tag { color: #29292e; }
#catalog-results.is-dense .sale-bike { grid-template-columns: 32% 68%; padding: 0; }
#catalog-results.is-dense .sale-bike .card-image { min-height: 190px; }
#catalog-results.is-dense .sale-bike .product-image { height: 155px; }
#catalog-results.is-dense .sale-bike .card-body { padding: 22px; }
#catalog-results.is-dense .sale-bike .price-block strong { font-size: 2.2rem; }
@media (max-width: 1000px) {
	#catalog-results .sale-bike { grid-template-columns: 1fr; }
	#catalog-results .sale-bike .card-image { margin: 12px 12px 0; }
	.sale-intro::after { font-size: 7rem; opacity: .2; }
}
@media (max-width: 760px) {
	.sale-intro { padding: 28px 22px 22px; }
	.sale-intro h2 { font-size: 2.8rem; }
	#catalog-results .sale-bike .card-image { min-height: 270px; }
	#catalog-results .sale-bike .product-image { height: 235px; }
	#catalog-results .sale-bike .card-body { padding: 25px 22px; }
	#catalog-results .sale-bike .price-block strong { font-size: 2.8rem; }
	#catalog-results.is-dense .sale-bike { grid-template-columns: 1fr; }
	#catalog-results.is-dense .sale-bike .card-image { min-height: 180px; }
	#catalog-results.is-dense .sale-bike .product-image { height: 150px; }
}

/* Catalogue bikes emerge from a clipped left edge; the frame stays in place. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	#catalog-results .bike-card .product-image {
		overflow: hidden;
		padding-left: 0;
		padding-right: 0;
	}
	#catalog-results .bike-card .product-image img {
		transform: translateX(-24%);
		transition: transform .8s cubic-bezier(.22, 1, .36, 1);
		will-change: transform;
	}
	#catalog-results .bike-card:hover .product-image img,
	#catalog-results .bike-card:focus-within .product-image img {
		transform: translateX(0);
	}
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
	#catalog-results .bike-card .product-image img {
		transform: none;
		transition: none;
	}
}

/* Original manufacturer marks, kept on a neutral white logo plate. */
.manufacturer-logo {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	width: fit-content;
	max-width: 180px;
	padding: 9px 12px;
	margin: 0 0 16px;
	background: #fff;
	border-radius: 3px;
	line-height: 1;
}
.manufacturer-logo img {
	width: auto;
	height: 25px;
	max-width: 140px;
	object-fit: contain;
	object-position: left center;
}
.detail-copy .manufacturer-logo { margin-top: 10px; margin-bottom: 20px; }
.comparison .manufacturer-logo { display: flex; margin: 12px auto; }
#catalog-results.is-dense .manufacturer-logo { margin-bottom: 9px; padding: 6px 9px; }
#catalog-results.is-dense .manufacturer-logo img { height: 19px; max-width: 110px; }

/* Unboxed manufacturer marks and product images without a lower crop. */
.manufacturer-logo {
	background: transparent;
	padding: 0;
	border-radius: 0;
}
.sale-bike .manufacturer-logo img,
.comparison .manufacturer-logo img {
	filter: none;
}
.sale-bike .manufacturer-logo img { filter: brightness(0) invert(1); }
#catalog-results.is-dense .manufacturer-logo { padding: 0; }
#catalog-results .bike-card .card-image,
#catalog-results .sale-bike .card-image {
	background: transparent;
	border-radius: 0;
}
#catalog-results .sale-bike .card-image { margin: 12px 0 12px 12px; }
#catalog-results .bike-card .product-image {
	aspect-ratio: auto;
	height: 310px;
	padding-top: 48px;
	padding-bottom: 18px;
	background: transparent;
}
#catalog-results .bike-card .product-image img {
	object-fit: contain;
	min-height: 0;
	max-height: 100%;
}
#catalog-results .sale-bike .product-image img {
	mix-blend-mode: normal;
}
#catalog-results .sale-bike .card-image::before { display: none; }
#catalog-results .sale-bike .product-visual figcaption { color: #b8b8c0; }
#catalog-results .sale-bike .tag { background: #303037; color: #dedee4; }
#catalog-results .sale-bike .product-visual { background: transparent; }
@media (max-width: 760px) {
	#catalog-results .bike-card .product-image { height: 270px; padding-top: 45px; padding-bottom: 20px; }
}
#catalog-results.is-dense .bike-card .product-image { height: 180px; padding-top: 25px; padding-bottom: 12px; }

#catalog-results .sale-bike .product-image { background: #fff; }
#catalog-results .sale-bike .product-visual figcaption { border: 0; padding: 12px 16px; }
#catalog-results .sale-bike .card-image { min-height: 0; }
#catalog-results .bike-card .product-image { overflow-y: clip; }

/* User-supplied campaign photography and family chapter. */
.ride-city .scene-media img { object-position: 50% 64%; }
.ride-wild .scene-media img { object-position: 40% 50%; }
.ride-wild .scene-media::after { background: linear-gradient(90deg, #101015b8, #10101565 55%, #10101515); }
.ride-family .scene-media img { object-position: 57% 62%; }
.ride-family .scene-media::after { background: linear-gradient(180deg, #101015b8, #10101555 55%, #10101520); }
.ride-family .scene-copy { max-width: 1100px; }
.ride-family h2 { font-size: clamp(3.4rem, 6.5vw, 7rem); }
.family-everyday { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 7%; padding: 90px 7%; background: #eeefef; color: #232323; }
.family-everyday figure { margin: 0; }
.family-everyday img { width: 100%; height: auto; }
.family-everyday figcaption { font-size: .6rem; color: #626262; margin-top: 12px; }
.family-everyday h2 { font-size: clamp(2.7rem, 4vw, 4.8rem); }
.family-everyday p { max-width: 450px; }
.family-everyday .note { margin-top: 22px; }
@media (max-width: 760px) {
	.ride-city .scene-media img { object-position: 52% 65%; }
	.ride-wild .scene-media img { object-position: 62% 50%; }
	.ride-family .scene-media img { object-position: 55% 60%; }
	.ride-family h2 { font-size: clamp(2.8rem, 11vw, 4rem); }
	.family-everyday { grid-template-columns: 1fr; gap: 30px; padding: 55px 7%; }
	.journey-index button { padding: 12px 13px; }
}

/* Subject-led framing: keep riders and wheels in the visible photo area. */
.ride-scene { min-height: 105svh; }
.scene-media img { height: calc(100% + 80px); top: -40px; }
.ride-city .scene-media img { object-position: 50% 100%; }
.ride-family .scene-media img { object-position: 55% 100%; }
.ride-wild .scene-media img { object-position: 35% 70%; }
.ride-city .scene-copy, .ride-family .scene-copy { padding-top: 35px; }
.ride-family h2 { font-size: clamp(3rem, 5.5vw, 6rem); }
.ride-wild { justify-content: flex-end; }
.ride-wild .scene-copy { max-width: 58%; }
.ride-wild .scene-media::after { background: linear-gradient(90deg, #10101515, #10101555 40%, #101015c9); }
.ride-distance figure { transform: none; }
.ride-distance figure img { height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
@media (max-width: 760px) {
	.ride-scene {
		display: flex;
		flex-direction: column;
		padding: 0;
		min-height: 0;
		background: #1c1c20;
	}
	.ride-scene .scene-copy {
		position: relative;
		top: auto;
		max-width: none;
		width: 100%;
		padding: 36px 7% 30px;
		order: 0;
	}
	.ride-scene h1, .ride-scene h2 { font-size: clamp(2.8rem, 10.5vw, 4rem); }
	.ride-scene .eyebrow { margin-bottom: 22px; }
	.ride-scene .scene-copy > p:not(.eyebrow) { margin-bottom: 15px; }
	.ride-scene .scene-media {
		position: relative;
		inset: auto;
		z-index: 0;
		width: 100%;
		aspect-ratio: 3 / 2;
		order: 1;
	}
	.ride-scene .scene-media img {
		top: -8px;
		height: calc(100% + 16px);
		width: 100%;
		object-fit: cover;
		object-position: 50% 75%;
	}
	.ride-scene .scene-media::after { background: linear-gradient(#1c1c2015, transparent 25%); }
	.ride-scene .scene-word { display: none; }
	.ride-scene .scroll-cue { margin-top: 22px; }
	.family-everyday { padding: 40px 7% 65px; }
	.family-everyday figure { margin-inline: -8.14%; }
	.family-everyday figure img { width: 100%; height: auto; }
	.family-everyday figcaption { padding-inline: 7%; }
	.ride-distance { padding: 50px 7% 65px; }
	.ride-distance figure img { height: auto; }
}

footer .logo { width: 155px; max-width: 40vw; }
@media (max-width: 760px) { footer .logo { width: 125px; } }
.manufacturer-logo img { filter: brightness(0); }
.sale-bike .manufacturer-logo img { filter: brightness(0) invert(1); }

/* Persistent compare tray. Selection remains in browser memory only. */
#compare-dock[hidden] { display: none; }
#compare-dock { position: fixed; z-index: 120; left: 4%; right: 4%; bottom: 18px; display: flex; align-items: center; gap: 22px; padding: 16px 20px; background: #202025f5; color: #fff; border: 1px solid #ffffff40; border-radius: 14px; box-shadow: 0 10px 50px #0004; backdrop-filter: blur(12px); }
.dock-heading { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.dock-heading span { font-size: .52rem; letter-spacing: .15em; color: #c7c7ce; }
.dock-heading strong { font-size: 1.2rem; }
#compare-dock ul { list-style: none; display: flex; gap: 12px; margin: 0; padding: 0; flex: 1; min-width: 0; overflow-x: auto; }
#compare-dock li { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 110px; width: 130px; padding: 5px 24px 5px 8px; background: #fff; border-radius: 5px; color: #242429; }
#compare-dock li img { height: 47px; width: 88px; object-fit: contain; }
#compare-dock li span { font-size: .6rem; text-align: center; }
#compare-dock li button { position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: #ececef; font-size: 1.15rem; }
.dock-action { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; text-align: center; }
.dock-action a { padding: 12px 16px; background: #ff3695; color: #191919; font-size: .8rem; font-weight: 700; text-decoration: none; border-radius: 5px; }
.dock-action > span { font-size: .75rem; }
.dock-action > button { color: #ddd; background: none; border: 0; padding: 4px; text-decoration: underline; font-size: .6rem; }
.has-compare-dock { padding-bottom: 140px; }
.has-compare-dock .journey-index { bottom: 155px; }
.has-compare-dock .toast { bottom: 160px; }
/* Clickable diagram points; no information requires hovering. */
.detail-stage { position: relative; }
.hotspot-layer { position: absolute; inset: 0 0 42px; pointer-events: none; }
.tech-point { position: absolute; left: var(--point-x); top: var(--point-y); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 2px solid white; border-radius: 50%; background: #1d1d23; color: white; box-shadow: 0 0 0 5px #ff369555, 0 2px 8px #0005; pointer-events: auto; }
.tech-point > span:first-child { font-size: 1.4rem; line-height: 1; }
.tech-point[aria-expanded="true"] { background: #ff3695; color: #151515; box-shadow: 0 0 0 6px #ff2b9335; }
.point-label { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); font-size: .62rem; padding: 5px 8px; border-radius: 3px; background: #1d1d23; color: #fff; white-space: nowrap; opacity: 0; transition: opacity .15s; pointer-events: none; }
.tech-point:hover .point-label, .tech-point:focus-visible .point-label, .tech-point[aria-expanded="true"] .point-label { opacity: 1; }
.hotspot-hint { text-align: center; font-size: .65rem; color: #5a5a60; margin: 12px 0 20px; }
.tech-explanation[hidden] { display: none; }
.tech-explanation { position: relative; background: #222227; color: white; border-left: 3px solid #ff3695; padding: 25px 45px 20px 25px; text-align: left; }
.tech-explanation .eyebrow { color: #ff9acb; margin-bottom: 12px; }
.tech-explanation h3 { font-size: 1.15rem; margin-bottom: 12px; }
.tech-explanation p:last-child { font-size: .8rem; color: #d9d9df; margin-bottom: 0; }
.tech-close { position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; border: 1px solid #888; border-radius: 50%; background: transparent; color: white; font-size: 1.2rem; }
/* A brief wheel-height trace as the image moves right. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	#catalog-results .bike-card .card-image::after { content: ''; position: absolute; pointer-events: none; left: 0; top: 70%; width: 28%; height: 2px; background: #ff3695; box-shadow: -15px -7px 0 #ff369580, -30px 7px 0 #ff369550; opacity: 0; transform-origin: left; z-index: 2; }
	#catalog-results .bike-card:hover .card-image::after, #catalog-results .bike-card:focus-within .card-image::after { animation: wheel-trace .8s ease-out both; }
	@keyframes wheel-trace { 0% { opacity: 0; transform: translateX(-35%) scaleX(.2); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateX(50%) scaleX(1); } }
}
@media (max-width: 760px) {
	#compare-dock { left: 10px; right: 10px; bottom: 10px; gap: 10px; padding: 12px; flex-wrap: wrap; }
	.dock-heading { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
	.dock-heading strong { font-size: .9rem; }
	#compare-dock ul { flex-basis: calc(100% - 135px); }
	#compare-dock li { min-width: 87px; width: 87px; padding: 5px 18px 5px 4px; }
	#compare-dock li img { width: 65px; height: 38px; }
	#compare-dock li span { font-size: .52rem; }
	.dock-action { max-width: 125px; }
	.dock-action a { padding: 10px; font-size: .7rem; }
	.dock-action > span { font-size: .65rem; }
	.has-compare-dock { padding-bottom: 175px; }
	.has-compare-dock .journey-index { bottom: 180px; }
	.tech-point { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
	#catalog-results .bike-card .card-image::after { display: none; }
	.point-label { transition: none; }
}

/* Leasing: a guided information page in the existing editorial language. */
.leasing-hero { display: grid; grid-template-columns: 1fr 1fr; background: #232328; color: white; }
.leasing-hero-copy { padding: 65px 9% 55px 12%; }
.leasing-hero .eyebrow { color: #cfcfd7; }
.leasing-hero h1 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: clamp(2.7rem, 4.5vw, 4.8rem); font-weight: 550; letter-spacing: -.055em; line-height: 1.05; }
.leasing-hero h1 em { font-family: 'Grand Holiday Sans', sans-serif; font-style: normal; font-weight: 400; }
.leasing-hero-copy > p:not(.eyebrow) { color: #d4d4da; max-width: 460px; font-size: .95rem; }
.leasing-hero-copy .text-link { display: block; margin-top: 22px; font-size: .8rem; }
.leasing-demo { display: block; margin-top: 35px; color: #b9b9c0; font-size: .55rem; letter-spacing: .15em; }
.leasing-hero figure { position: relative; margin: 0; min-height: 530px; overflow: hidden; }
.leasing-hero figure img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 100%; position: absolute; }
.leasing-hero figcaption { position: absolute; bottom: 22px; left: 7%; right: 7%; color: white; text-shadow: 0 1px 6px black; font-size: .7rem; }
.leasing-process .section-head h2, .leasing-prep h2, .leasing-faq h2, .leasing-outro h2 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: clamp(2.1rem, 3.4vw, 3.5rem); font-weight: 500; letter-spacing: -.05em; }
.leasing-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding: 0; margin: 45px 0 30px; }
.leasing-steps li { border-top: 1px solid #bfbfc4; padding-top: 20px; }
.leasing-step-number { display: inline-grid; place-items: center; width: 34px; height: 34px; background: #252529; color: white; border-radius: 50%; font-size: .65rem; margin-bottom: 25px; box-shadow: 3px 2px 0 #ff3695; }
.leasing-steps h3 { font-size: 1.2rem; letter-spacing: -.025em; }
.leasing-steps p { color: #55555b; font-size: .8rem; }
.leasing-prep { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; background: #ececed; }
.leasing-prep > div > p:not(.eyebrow) { max-width: 430px; font-size: .9rem; }
.leasing-prep .journey-link { font-size: .8rem; }
.leasing-checklist { background: white; padding: 30px; border-top: 3px solid #ff2b93; }
.leasing-checklist fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.leasing-checklist legend { font-size: 1.2rem; font-weight: 650; margin-bottom: 20px; }
.leasing-checklist label { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; padding: 15px 0; border-bottom: 1px solid #ddd; font-size: .82rem; font-weight: 500; }
.leasing-checklist input { width: 21px; height: 21px; min-height: 21px; padding: 0; flex-shrink: 0; margin: 0; accent-color: #d10067; }
#leasing-prep-status { font-size: .8rem; font-weight: 650; margin: 22px 0 10px; }
.leasing-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7%; }
.leasing-faq details { border-top: 1px solid #bfbfc4; padding: 0; }
.leasing-faq details:last-child { border-bottom: 1px solid #bfbfc4; }
.leasing-faq summary { padding: 22px 26px 22px 0; cursor: pointer; font-weight: 600; font-size: .95rem; }
.leasing-faq details[open] summary { color: #ff3695; }
.leasing-faq details p { font-size: .85rem; color: #55555b; padding: 0 18px 22px 0; margin: 0; }
.leasing-outro { background: #252529; color: white; padding: 65px 6%; }
.leasing-outro .eyebrow { color: #cfcfd7; }
.leasing-outro .secondary { border-color: #888; color: white; background: transparent; }
.leasing-outro .note { margin-top: 25px; color: #bdbdc7; }
@media (min-width: 761px) and (max-width: 1100px) {
	.header .logo { width: 170px; }
	.header nav { gap: 16px; }
	.header nav a { font-size: .73rem; }
	.header .nav-cta { padding-inline: 15px; }
	.leasing-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.leasing-hero, .leasing-prep, .leasing-faq { grid-template-columns: 1fr; }
	.leasing-hero-copy { padding: 40px 7%; }
	.leasing-hero h1 { font-size: clamp(2.7rem, 11vw, 4rem); }
	.leasing-hero figure { min-height: 0; aspect-ratio: 3 / 2; }
	.leasing-hero figure img { object-fit: cover; }
	.leasing-steps { grid-template-columns: 1fr; gap: 20px; }
	.leasing-step-number { margin-bottom: 18px; }
	.leasing-prep, .leasing-faq { gap: 30px; }
	.leasing-checklist { padding: 24px 20px; }
	.leasing-outro { padding: 45px 7%; }
}

.leasing-partners { background: #f0f0f1; }
.leasing-partners h2 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 550; letter-spacing: -.05em; }
.provider-intro { max-width: 780px; font-size: .95rem; color: #55555d; margin-bottom: 30px; }
.leasing-provider-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 25px; }
.leasing-provider { position: relative; padding: 32px 24px 25px; background: white; border-top: 2px solid #252529; }
.leasing-provider:hover { border-top-color: #ff3695; }
.provider-number { position: absolute; top: 12px; left: 14px; font-size: .55rem; color: #777; }
.provider-logo { display: flex; align-items: center; height: 90px; margin-bottom: 22px; }
.provider-logo img { width: auto; max-width: 100%; height: auto; max-height: 72px; object-fit: contain; }
.provider-wordmark { font-size: 1.9rem; font-weight: 700; letter-spacing: -.05em; }
.leasing-provider h3 { font-size: .85rem; margin-bottom: 25px; font-weight: 600; }
.provider-actions { display: flex; gap: 18px; justify-content: space-between; border-top: 1px solid #ddd; padding-top: 17px; }
.provider-actions a { font-size: .75rem; text-decoration: none; }
.provider-actions a:last-child { font-weight: 700; text-decoration: underline; text-decoration-color: #ff3695; }
@media (max-width: 1000px) { .leasing-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .leasing-provider-grid { grid-template-columns: 1fr; } }
.provider-logo img { width: 220px; height: 72px; object-fit: contain; object-position: left center; }

/* Leasing: optisch abgeglichene Original-Logos, unverzerrt. */
.leasing-partners .provider-logo {
	justify-content: center;
	height: 110px;
	margin-bottom: 20px;
}
.leasing-partners .provider-logo img {
	width: 200px;
	height: 64px;
	max-width: 100%;
	max-height: none;
	object-fit: contain;
	object-position: center;
}
.leasing-partners .leasing-provider:nth-child(2) img { width: 205px; }
.leasing-partners .leasing-provider:nth-child(3) img { width: 185px; }
.leasing-partners .leasing-provider:nth-child(4) img { width: 132px; height: 82px; }
.leasing-partners .leasing-provider:nth-child(5) img { width: 205px; }

/* Hauptnavigation: kompakte Segmente mit eigenständigem Aktivzustand. */
.header #navigation { gap: 5px; }
.header #navigation > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 44px;
	padding: 11px 14px;
	border: 1px solid transparent;
	border-radius: 8px;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.header #navigation > a:hover {
	background: #ededee;
	transform: translateY(-2px);
}
.header #navigation > a[aria-current="page"] {
	background: #202024;
	color: #fff;
}
.header #navigation > a[aria-current="page"]::after {
	content: "";
	position: absolute;
	bottom: 4px;
	left: calc(50% - 9px);
	width: 18px;
	height: 3px;
	border-radius: 2px;
	background: var(--orange);
}
.header #navigation > .nav-cta {
	border-color: var(--orange);
	background: var(--orange);
	color: #17171b;
}
.header #navigation > .nav-cta:hover {
	background: #202024;
	color: white;
	border-color: #ff3695;
}
.header #navigation > a:focus-visible, .header .menu-toggle:focus-visible {
	outline: 3px solid #ff3695;
	outline-offset: 3px;
}
.header .menu-toggle { border-radius: 8px; }
@media (min-width: 761px) and (max-width: 1100px) {
	.header #navigation { gap: 2px; }
	.header #navigation > a { padding-inline: 9px; font-size: .73rem; }
}
@media (max-width: 760px) {
	.header #navigation { gap: 7px; }
	.header #navigation > a { justify-content: space-between; min-height: 48px; padding: 13px 16px; }
	.header #navigation > a[aria-current="page"]::after { left: auto; right: 16px; bottom: 7px; }
	.header #navigation > .nav-cta { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
	.header #navigation > a { transition: none; }
	.header #navigation > a:hover { transform: none; }
}

/* Gemeinsames kompaktes Raster für Leasinganbieter und Fahrradmarken. */
.leasing-provider-grid, .brand-provider-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
}
.leasing-provider-grid .leasing-provider, .brand-provider {
	padding: 27px 16px 16px;
}
.leasing-partners .provider-logo, .brand-partners .provider-logo {
	justify-content: center;
	height: 85px;
	margin-bottom: 12px;
}
.leasing-partners .provider-logo img { max-width: 100%; }
.leasing-partners .leasing-provider:nth-child(4) img { height: 65px; }
.leasing-provider-grid h3 { margin-bottom: 16px; }
.leasing-provider-grid .provider-actions { flex-wrap: wrap; gap: 4px 12px; padding-top: 8px; }
.leasing-provider-grid .provider-actions a { display: inline-flex; align-items: center; min-height: 36px; }
.brand-partners { background: #f0f0f1; }
.brand-provider-grid { margin-bottom: 24px; }
.brand-provider .manufacturer-logo { display: flex; justify-content: center; width: 100%; }
.brand-provider .manufacturer-logo img {
	width: 140px;
	height: 42px;
	max-width: 100%;
	object-fit: contain;
	object-position: center;
}
.brand-provider h2 { font: 600 .9rem -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin-bottom: 8px; }
.brand-provider p { font-size: .75rem; color: #64646b; margin-bottom: 16px; }
.brand-catalog-link { display: flex; justify-content: space-between; align-items: center; min-height: 44px; border-top: 1px solid #ddd; font-size: .75rem; text-decoration: none; }
.brand-catalog-link:hover { color: var(--orange); }
@media (min-width: 761px) and (max-width: 1100px) {
	.header .logo { width: 145px; }
	.header #navigation > a { padding-inline: 7px; font-size: .7rem; }
}
@media (max-width: 1000px) {
	.leasing-provider-grid, .brand-provider-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.leasing-provider-grid, .brand-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
	.leasing-provider-grid, .brand-provider-grid { grid-template-columns: 1fr; }
}

.leasing-provider-grid .provider-text-name {
	font: 650 1.2rem -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	letter-spacing: -.04em;
}
.leasing-partners .leasing-provider:nth-child(6) img { width: 160px; height: 62px; }
.leasing-partners .leasing-provider:nth-child(9) img { width: 150px; height: 60px; }
.leasing-provider-grid .leasing-provider { display: flex; flex-direction: column; }
.leasing-provider-grid .provider-actions { margin-top: auto; }
/* Die helle Original-Wortmarke bleibt auf weißen Kacheln lesbar. */
.leasing-partners img[src$="mein-dienstrad.svg"] { filter: brightness(0); }

.dock-empty { flex: 1; margin: 0; font-size: .85rem; color: #dedee4; }
#compare-dock:has(.dock-empty) ul { display: none; }
#compare-dock .dock-open { font-size: .8rem; }
@media (max-width: 760px) {
	.dock-empty { font-size: .75rem; flex-basis: calc(100% - 130px); }
}

/* Nicht interaktive Zubehörmarken: eigenständige, kompakte Namenskacheln. */
.accessory-partners { background: #e8e8eb; }
.accessory-partners h2 { font: 550 clamp(2rem, 4vw, 3.4rem)/1.05 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: -.05em; }
.accessory-brand-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: 32px 0 24px;
}
.accessory-brand-grid li {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 110px;
	padding: 20px 14px;
	background: #fff;
	border-top: 2px solid #252529;
	text-align: center;
}
.accessory-brand-grid span:not(.top-brand-badge) { font: 650 clamp(1rem, 1.5vw, 1.35rem)/1.25 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: -.025em; overflow-wrap: anywhere; }
@media (max-width: 1000px) { .accessory-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
	.accessory-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.accessory-brand-grid li { min-height: 88px; }
}

.accessory-brand-grid li { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 22px 16px 14px; text-align: left; }
.accessory-logo { display: flex; justify-content: center; align-items: center; height: 80px; margin-bottom: 18px; }
.accessory-logo img { width: 100%; max-width: 185px; height: 60px; object-fit: contain; }
.accessory-brand-grid h3 { font: 600 .85rem/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 0 0 8px; }
.accessory-brand-grid p { color: #626269; font-size: .76rem; line-height: 1.6; margin: 0 0 16px; }
.accessory-brand-grid a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; border-top: 1px solid #ddd; margin-top: auto; font-size: .75rem; text-decoration: none; }
.accessory-brand-grid a span { font: inherit; }
.accessory-brand-grid a:hover { color: var(--orange); }
.accessory-brand-grid a:focus-visible { outline: 3px solid #ff3695; outline-offset: 3px; }
@media (max-width: 760px) { .accessory-logo img { max-width: 140px; height: 52px; } }

/* Zubehör: kleine schwarze Markenzeile und kompakte Produktgruppen. */
.accessory-logo { height: 42px; margin-bottom: 10px; }
.accessory-logo img { max-width: 135px; height: 30px; }
.accessory-logo > span { font-size: 1rem; }
.accessory-brand-grid h3 { font-size: .75rem; color: #626269; margin-bottom: 12px; }
.accessory-brand-grid .accessory-product-groups { font-size: .72rem; }
@media (max-width: 760px) {
	.accessory-logo img { max-width: 110px; height: 26px; }
}

/* Zubehör zeigt an jedem Breakpoint eine Spalte mehr als die Fahrradmarken. */
.accessory-brand-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.accessory-brand-grid li { padding: 15px 12px 9px; min-height: 170px; }
.accessory-logo { height: 35px; margin-bottom: 7px; }
.accessory-logo img { max-width: 120px; height: 27px; }
.accessory-brand-grid h3 { margin-bottom: 7px; font-size: .72rem; }
.accessory-brand-grid .accessory-product-groups { font-size: .68rem; margin-bottom: 10px; overflow-wrap: anywhere; }
.accessory-brand-grid a { min-height: 44px; font-size: .7rem; }
@media (max-width: 1000px) { .accessory-brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
	.accessory-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
	.accessory-brand-grid li { padding: 12px 8px 6px; }
	.accessory-logo img { max-width: 95px; height: 24px; }
	.accessory-logo > span { font-size: .8rem; }
	.accessory-brand-grid h3 { font-size: .68rem; overflow-wrap: anywhere; }
	.accessory-brand-grid .accessory-product-groups { font-size: .65rem; }
	.accessory-brand-grid a { font-size: .65rem; gap: 3px; }
}
@media (max-width: 360px) { .accessory-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Kurz vor dem Footer fährt die Vergleichsleiste vollständig aus dem Bild. */
#compare-dock {
	transition: transform 180ms cubic-bezier(.4, 0, 1, 1), visibility 0s;
}
#compare-dock.is-near-footer {
	transform: translateY(calc(100% + 40px));
	visibility: hidden;
	pointer-events: none;
	transition: transform 180ms cubic-bezier(.4, 0, 1, 1), visibility 0s 180ms;
}
@media (prefers-reduced-motion: reduce) {
	#compare-dock, #compare-dock.is-near-footer { transition: none; }
}

/* Kein äußerer Abstand unter dem Footer; die Leiste weicht dort aus. */
body.has-compare-dock { padding-bottom: 0; }

/* Die Invertierung wandert als gemeinsame Fläche über Logo und Inhalt. */
.leasing-provider, .accessory-brand-grid li {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #fff;
	transition: border-color 180ms ease;
}
.leasing-provider::after, .accessory-brand-grid li::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: #fff;
	mix-blend-mode: difference;
	pointer-events: none;
	transform: translateY(-101%);
	transition: transform 360ms cubic-bezier(.22, .68, .2, 1);
}
.leasing-provider:is(:hover, :focus-within),
.accessory-brand-grid li:is(:hover, :focus-within) {
	border-top-color: var(--orange);
}
.leasing-provider:is(:hover, :focus-within)::after,
.accessory-brand-grid li:is(:hover, :focus-within)::after {
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.leasing-provider, .accessory-brand-grid li,
	.leasing-provider::after, .accessory-brand-grid li::after { transition: none; }
}

/* Einheitliche Wortmarken ergeben im Wisch-Effekt klare weiße Logos. */
.leasing-provider-grid .provider-logo img { filter: brightness(0); }

/* Fahrradmarken: randbereinigte Assets und optisch abgestimmte Größen. */
.brand-partners .provider-logo { height: 112px; margin-bottom: 18px; }
.brand-provider .manufacturer-logo img {
	width: 185px;
	max-width: 100%;
	height: 76px;
	max-height: 76px;
	object-fit: contain;
}
.brand-provider .manufacturer-logo img[alt="Kettler"] { width: 82px; height: 82px; max-height: 82px; }
.brand-provider .manufacturer-logo img[alt="Hercules"] { width: 125px; }
.brand-provider .manufacturer-logo img[alt="KTM"] { width: 156px; }
.brand-provider .manufacturer-logo img[alt="Kalkhoff"],
.brand-provider .manufacturer-logo img[alt="Riese & Müller"] { width: 200px; }
@media (max-width: 760px) {
	.brand-partners .provider-logo { height: 96px; }
	.brand-provider .manufacturer-logo img { width: 165px; height: 64px; max-height: 64px; }
	.brand-provider .manufacturer-logo img[alt="Kettler"] { width: 72px; height: 72px; max-height: 72px; }
	.brand-provider .manufacturer-logo img[alt="Hercules"] { width: 110px; }
}

/* Fulland Meg navigation: quiet white panels, clear columns and photographic shortcuts. */
.header { isolation: isolate; z-index: 100; overflow: visible; background: #fff; }
.header #navigation { display: flex; align-items: center; gap: 5px; }
.header #navigation > a, .header .mega-trigger {
	min-height: 44px; padding: 11px 13px; border: 0; border-radius: 6px;
	background: transparent; color: #17171b; line-height: 1.2;
	font-family: inherit; font-size: .78rem; font-weight: 700; text-decoration: none;
	letter-spacing: .01em; cursor: pointer; white-space: nowrap;
}
.header .mega-trigger { display: inline-flex; align-items: center; gap: 8px; }
.header .mega-trigger span { transition: transform .2s; }
.header .mega-trigger[aria-expanded="true"] span { transform: rotate(180deg); }
.header .mega-trigger:hover, .header .mega-trigger[aria-expanded="true"], .header #navigation > a:hover { background: #f1f0ed; transform: none; color: #17171b; }
.header #navigation > .nav-cta { background: var(--orange); color: #17171b; }
.header #navigation > .nav-cta:hover { background: #17171b; color: white; }
.header .mega-trigger:focus-visible, .mega-panel a:focus-visible { outline: 3px solid #ff3695; outline-offset: 4px; }
.mega-panel[hidden], .nav-backdrop[hidden] { display: none !important; }
.header .mega-panel {
	position: absolute; top: calc(100% + 12px); left: 4%; right: 4%; z-index: 3;
	max-height: calc(100dvh - 170px); overflow: auto; padding: 36px 40px;
	background: #fff; color: #17171b; border-radius: 12px;
	box-shadow: 0 22px 60px #0003; animation: mega-arrive .22s ease-out;
}
.mega-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
#mega-brands .mega-columns, #mega-service .mega-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega-column { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.mega-column h2 { font-family: inherit; font-size: .73rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 17px; }
.header .mega-column a { display: block; color: #29292c; font-size: .92rem; font-weight: 400; padding: 8px 0; text-decoration: none; border: 0; }
.header .mega-column a:hover { color: var(--orange); text-decoration: none; }
.mega-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border-top: 1px solid #dededb; margin-top: 28px; padding-top: 24px; }
#mega-brands .mega-stories, #mega-service .mega-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.header .mega-story { display: block; position: relative; height: 165px; padding: 0; overflow: hidden; border-radius: 5px; background: #242424; color: #fff; }
.mega-story img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; transition: transform .6s; }
.mega-story::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent, #000c); pointer-events: none; }
.mega-story > span { position: absolute; z-index: 1; left: 20px; right: 15px; bottom: 18px; }
.mega-story small { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .08em; margin-bottom: 7px; }
.mega-story strong { display: block; font-size: 1.12rem; line-height: 1.2; }
.mega-story:hover img { transform: scale(1.045); }
.nav-backdrop { position: fixed; inset: 0; top: 100%; width: 100%; height: 100dvh; z-index: -1; border: 0; border-radius: 0; background: #0009; cursor: default; }
@keyframes mega-arrive { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (min-width: 1001px) { .header .menu-toggle { display: none; } }
@media (max-width: 1000px) {
	.header .menu-toggle { display: inline-flex; align-items: center; gap: 12px; }
	.header #navigation { display: none; position: absolute; top: 100%; left: 0; right: 0; align-items: stretch; flex-direction: column; gap: 4px; max-height: calc(100dvh - 100px); overflow-y: auto; padding: 16px 5% 24px; background: #fff; border-bottom: 1px solid #ddd; box-shadow: 0 20px 35px #0002; }
	.header #navigation.open { display: flex; }
	.header #navigation > a, .header .mega-trigger { justify-content: space-between; width: 100%; text-align: left; font-size: .9rem; padding: 14px 12px; }
	.header .mega-panel { position: static; padding: 20px 12px; margin-bottom: 12px; max-height: none; box-shadow: none; background: #f5f4f1; border-radius: 7px; }
	#mega-bikes { order: 0; }
	.header .mega-trigger[aria-controls="mega-bikes"] { order: -1; }
	/* Place each accordion panel immediately after its own trigger. */
	.header #navigation > a[href="#finder"] { order: 1; }
	.header .mega-trigger[aria-controls="mega-brands"] { order: 2; }
	#mega-brands { order: 3; }
	.header #navigation > a[href="#leasing"] { order: 4; }
	.header .mega-trigger[aria-controls="mega-service"] { order: 5; }
	#mega-service { order: 6; }
	.header #navigation > .nav-cta { order: 7; }
	.mega-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
	.mega-column h2 { margin-bottom: 8px; }
	.header .mega-column a { font-size: .85rem; min-height: 40px; }
	.mega-stories { grid-template-columns: 1fr; margin-top: 20px; padding-top: 20px; }
	#mega-brands .mega-stories, #mega-service .mega-stories { grid-template-columns: 1fr; }
	.header .mega-story { height: 145px; }
}
@media (prefers-reduced-motion: reduce) {
	.header .mega-panel { animation: none; }
	.mega-story img, .header .mega-trigger span { transition: none; }
	.mega-story:hover img { transform: none; }
}

/* Spacious black footer, organized around the local customer journey. */
footer.site-footer { display: block; padding: 64px 7% 24px; background: #050505; color: #fff; }
.site-footer .footer-invitations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; padding-bottom: 52px; border-bottom: 1px solid #363636; }
.site-footer h2 { font-family: inherit; font-size: .86rem; font-weight: 700; letter-spacing: 0; line-height: 1.4; color: #fff; margin: 0 0 22px; }
.site-footer .footer-invitations a { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 48px; padding: 12px 18px; border: 1px solid #686868; border-radius: 4px; font-size: .84rem; color: #fff; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.site-footer .footer-invitations a:hover { background: #fff; border-color: #fff; color: #111; }
.site-footer .footer-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px; padding-top: 52px; }
.site-footer .footer-columns section { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer .footer-columns a { display: inline-block; padding: 8px 0; color: #bdbdbd; font-size: .8rem; line-height: 1.5; text-decoration: none; }
.site-footer .footer-columns a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 5px; }
.site-footer .footer-columns p { margin-top: 20px; font-size: .8rem; line-height: 1.8; color: #999; }
.site-footer .footer-signature { display: block; width: 150px; margin: 65px auto 50px; }
.site-footer .footer-signature img { display: block; width: 100%; height: auto; }
.site-footer .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 22px; border-top: 1px solid #292929; }
.site-footer .footer-bottom p, .site-footer .footer-bottom a { font-size: .67rem; line-height: 1.6; color: #898989; margin: 0; }
.site-footer a:focus-visible { outline: 3px solid var(--orange); outline-offset: 5px; }
@media (max-width: 760px) {
	footer.site-footer { padding: 40px 6% 24px; }
	.site-footer .footer-invitations { grid-template-columns: 1fr; gap: 28px; padding-bottom: 36px; }
	.site-footer .footer-invitations h2 { margin-bottom: 12px; }
	.site-footer .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; padding-top: 36px; }
	.site-footer .footer-columns h2 { margin-bottom: 12px; }
	.site-footer .footer-signature { width: 125px; margin: 42px auto; }
	.site-footer .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .site-footer .footer-invitations a { transition: none; } }
.site-footer .footer-columns, .site-footer .footer-invitations { align-items: start; }
.site-footer .footer-columns section, .site-footer .footer-invitations section { padding: 0; }
.header { z-index: 200; }
@media (max-width: 1000px) { .header #navigation > * { flex-shrink: 0; } }

/* Floating navigation rail, inset from the viewport like the reference. */
.header {
	top: 16px;
	width: auto;
	margin: 16px 4%;
	min-height: 86px;
	padding: 14px 28px;
	border: 1px solid #e9e9e5;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 32px #00000014;
}
.header .logo { width: 210px; }
.header.is-compact { min-height: 68px; padding: 9px 24px; box-shadow: 0 10px 35px #00000024; }
.header.is-compact .logo { width: 175px; }
.header .mega-panel { left: 0; right: 0; top: calc(100% + 12px); }
@media (max-width: 1000px) {
	.header { top: 12px; margin: 12px 4%; padding: 13px 20px; }
	.header #navigation { top: calc(100% + 10px); border-radius: 12px; border: 1px solid #e9e9e5; }
	.header .mega-panel { position: static; }
}
@media (max-width: 760px) {
	.header { top: 10px; margin: 10px 12px; min-height: 74px; padding: 12px 16px; border-radius: 10px; gap: 12px; }
	.header .logo { width: min(180px, 48vw); }
	.header.is-compact { min-height: 62px; padding: 8px 14px; }
	.header.is-compact .logo { width: min(150px, 43vw); }
	.header #navigation { max-height: calc(100dvh - 110px); }
}

/* Two local stores become the main invitation at the beginning of the footer. */
.site-footer .footer-locations { padding: 0 0 55px; }
.footer-locations-heading { display: block; margin-bottom: 30px; }
.site-footer .footer-locations-heading > p:first-child { color: var(--orange); font-size: .65rem; font-weight: 700; letter-spacing: .16em; margin: 0 0 16px; }
.site-footer .footer-locations-heading h2 { font-size: clamp(1.8rem, 3.6vw, 3.4rem); line-height: 1.08; letter-spacing: -.035em; margin-bottom: 16px; }
.site-footer .footer-locations-heading > p:last-child { color: #a8a8a8; font-size: .88rem; }
.site-footer .footer-location-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.site-footer .footer-location { position: relative; padding: 32px; border: 1px solid #363636; border-radius: 10px; background: #141414; overflow: hidden; transition: border-color .25s, background .25s; }
.site-footer .footer-location::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--orange); }
.site-footer .footer-location:nth-child(2)::before { background: #ff3695; }
.site-footer .footer-location:hover, .site-footer .footer-location:focus-within { background: #1b1b1b; border-color: #777; }
.footer-location-number { font-size: .63rem; color: #a1a1a1; letter-spacing: .13em; }
.site-footer .footer-location h3 { color: #fff; font-family: inherit; font-size: clamp(2.5rem, 4.5vw, 4.5rem); line-height: 1.15; letter-spacing: -.04em; margin: 25px 0 18px; }
.site-footer .footer-location p { color: #b8b8b8; font-size: .85rem; line-height: 1.8; margin: 0; }
.site-footer .footer-location-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 28px; }
.footer-location-tags span { font-size: .65rem; padding: 6px 10px; border: 1px solid #454545; border-radius: 30px; color: #ccc; }
.site-footer .footer-location-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.site-footer .footer-location-actions a { display: inline-flex; align-items: center; min-height: 44px; font-size: .8rem; color: #fff; text-decoration: none; }
.site-footer .footer-location-actions a:first-child { padding: 12px 18px; background: #fff; color: #111; border-radius: 4px; font-weight: 700; }
.site-footer .footer-location-actions a:first-child:hover { background: var(--orange); }
.site-footer .footer-location-actions a:last-child:hover { text-decoration: underline; text-underline-offset: 5px; }
.site-footer .footer-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
	.site-footer .footer-location-grid { grid-template-columns: 1fr; gap: 16px; }
	.site-footer .footer-location { padding: 26px 22px; }
	.site-footer .footer-locations { padding-bottom: 36px; }
	.site-footer .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .site-footer .footer-location { transition: none; } }

/* More restrained store highlights in the footer. */
.site-footer .footer-locations { padding-bottom: 36px; }
.site-footer .footer-locations-heading { margin-bottom: 22px; }
.site-footer .footer-locations-heading h2 { font-size: clamp(1.5rem, 2.4vw, 2.15rem); margin-bottom: 10px; }
.site-footer .footer-locations-heading h2 br { display: none; }
.site-footer .footer-location { padding: 22px 26px; }
.site-footer .footer-location h3 { font-size: clamp(1.9rem, 3vw, 2.65rem); margin: 14px 0 10px; }
.site-footer .footer-location p { font-size: .8rem; line-height: 1.65; }
.site-footer .footer-location-tags { margin: 15px 0 17px; gap: 6px; }
.footer-location-tags span { font-size: .6rem; padding: 4px 8px; }
.site-footer .footer-location-actions { gap: 18px; }
.site-footer .footer-location-actions a { font-size: .76rem; }
.site-footer .footer-location-actions a:first-child { padding: 10px 14px; }
@media (max-width: 760px) {
	.site-footer .footer-location { padding: 20px; }
	.site-footer .footer-locations { padding-bottom: 28px; }
}

/* Compact, readable contact details shared by footer and location page. */
.branch-contact-details { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 17px 0 22px; }
.branch-contact-details address { font-style: normal; font-size: .82rem; line-height: 1.8; }
.branch-contact-details address a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
.branch-opening-hours { font-size: .78rem; line-height: 1.8; }
.branch-opening-hours > span { font-weight: 700; }
.branch-opening-hours dl { margin: 7px 0 0; }
.branch-opening-hours dl > div { display: flex; flex-wrap: wrap; gap: 3px 12px; justify-content: space-between; }
.branch-opening-hours dt, .branch-opening-hours dd { margin: 0; }
.site-footer .branch-contact-details { color: #c6c6c6; }
.site-footer .branch-contact-details address a { color: #fff; }
.site-footer .branch-opening-hours > span { color: #fff; }
@media (max-width: 1100px) and (min-width: 761px) { .branch-contact-details { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 440px) { .branch-contact-details { grid-template-columns: 1fr; gap: 12px; } }
.branch-opening-hours dt, .branch-opening-hours dd { font-size: inherit; line-height: inherit; color: inherit; }
.branch-opening-hours dd { font-weight: 500; }

/* Concise location cards with direct directions, on both location page and footer. */
.site-footer .footer-location { padding: 18px 22px; }
.site-footer .footer-location h3 { font-size: clamp(1.65rem, 2.3vw, 2.1rem); margin: 9px 0 5px; }
.site-footer .footer-location-number { font-size: .58rem; }
.site-footer .branch-contact-details { margin: 10px 0 12px; gap: 15px; }
.site-footer .branch-contact-details address { font-size: .77rem; line-height: 1.6; }
.site-footer .branch-opening-hours { font-size: .73rem; line-height: 1.6; }
.site-footer .branch-opening-hours dl { margin-top: 4px; }
.site-footer .footer-location-actions { gap: 18px; }
.site-footer .footer-location-actions a:first-child { padding: 9px 14px; }
.branch-grid .branch { padding: 24px; }
.branch-grid .branch h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 12px 0; }
.branch-grid .branch-contact-details { margin: 14px 0; }
.branch-actions { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.branch-actions a { display: inline-flex; min-height: 44px; align-items: center; font-size: .82rem; }
.branch-actions a:first-child { padding: 9px 16px; border-radius: 5px; background: #202024; color: #fff; text-decoration: none; }
.branch-actions a:first-child:hover { background: var(--orange); color: #17171b; }
@media (max-width: 760px) {
	.site-footer .footer-location { padding: 17px 20px; }
	.branch-grid .branch { padding: 20px; }
}

/* Shared compact control system: consistent geometry across routes. */
:root { --control-height: 38px; --control-radius: 5px; --control-font: .78rem; }
body :is(.button, .compare-button, .dock-action, .menu-toggle, .mega-trigger),
body .header #navigation > a,
body .header #navigation > .mega-trigger,
body .site-footer .footer-invitations a,
body .site-footer .footer-location-actions a,
body .branch-actions a {
	box-sizing: border-box;
	min-height: var(--control-height);
	padding: 8px 14px;
	border-radius: var(--control-radius);
	font-size: var(--control-font);
	line-height: 20px;
	gap: 10px;
	align-items: center;
	justify-content: center;
}
body .header.is-compact #navigation > .nav-cta { padding: 8px 14px; }
body :is(select, input[type="search"], input[type="email"], input[type="tel"], input[type="text"]),
body .explorer-layout :is(select, input[type="search"]) {
	box-sizing: border-box;
	min-height: var(--control-height);
	height: var(--control-height);
	padding: 8px 12px;
	border: 1px solid #a7a7a7;
	border-radius: var(--control-radius);
	font-size: var(--control-font);
	line-height: 20px;
	background-color: #fff;
	color: #222;
}
body select, body .explorer-layout select {
	appearance: none;
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23222222' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
}
body select:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
body .active-filters button, body .explorer-toolbar > button, body .filters > button {
	min-height: var(--control-height); padding: 8px 12px; border-radius: var(--control-radius); font-size: var(--control-font); line-height: 20px;
}
@media (pointer: coarse) {
	:root { --control-height: 44px; }
	body select, body input[type="search"], body input[type="email"], body input[type="tel"], body input[type="text"] { font-size: 16px; }
}
@media (forced-colors: active) { body select, body .explorer-layout select { appearance: auto; background-image: none; } }
body button.text-link, body button.remove, body .dock-action .button {
	min-height: var(--control-height); padding: 8px 14px; border-radius: var(--control-radius); font-size: var(--control-font); line-height: 20px;
}

/* Visible keyboard focus remains independent of pointer hover. */
body :is(.button, .compare-button, .menu-toggle, .mega-trigger, button.text-link, button.remove):focus-visible,
body .header #navigation > a:focus-visible,
body .header #navigation > .mega-trigger:focus-visible,
body .site-footer :is(.footer-invitations, .footer-location-actions) a:focus-visible,
body .branch-actions a:focus-visible {
	outline: 3px solid var(--orange);
	outline-offset: 3px;
}

/* Viewport scrim sits outside the floating header's containing block. */
body > .nav-backdrop {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100dvh;
	z-index: 190;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #0009;
}

/* Restrained location contact blocks rather than promotional cards. */
.site-footer .footer-locations { padding-bottom: 26px; }
.site-footer .footer-locations-heading { margin-bottom: 16px; }
.site-footer .footer-locations-heading > p:first-child { margin-bottom: 8px; }
.site-footer .footer-locations-heading h2 { font-size: 1.15rem; letter-spacing: -.015em; margin: 0; }
.site-footer .footer-locations-heading > p:last-child { display: none; }
.site-footer .footer-location-grid { gap: 20px; }
.site-footer .footer-location {
	padding: 14px 18px;
	border: 1px solid #303030;
	border-radius: 5px;
	background: transparent;
}
.site-footer .footer-location::before, .site-footer .footer-location-number { display: none; }
.site-footer .footer-location:hover, .site-footer .footer-location:focus-within { background: transparent; border-color: #484848; }
.site-footer .footer-location h3 { font-size: 1.1rem; letter-spacing: 0; line-height: 1.3; margin: 0 0 8px; }
.site-footer .branch-contact-details { margin: 0 0 6px; gap: 12px; }
.site-footer .branch-contact-details address, .site-footer .branch-opening-hours { font-size: .72rem; line-height: 1.5; }
.site-footer .branch-contact-details address a { min-height: 32px; }
.site-footer .branch-opening-hours dl { margin-top: 2px; }
.site-footer .footer-location-actions { gap: 16px; }
.site-footer .footer-location-actions a, .site-footer .footer-location-actions a:first-child {
	min-height: 32px; padding: 4px 0; font-size: .7rem; line-height: 20px;
	background: transparent; color: #ddd; border: 0; border-radius: 0; font-weight: 400;
}
.site-footer .footer-location-actions a:first-child { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.site-footer .footer-location-actions a:first-child:hover { background: transparent; }
.branch-grid .branch { padding: 18px 20px; border-radius: 5px; }
.branch-grid .branch h3 { font-size: 1.35rem; margin: 7px 0; }
.branch-grid .branch > .eyebrow { font-size: .58rem; }
.branch-grid .branch > p { font-size: .76rem; margin-bottom: 10px; }
.branch-grid .branch-contact-details { margin: 8px 0; }
.branch-grid .branch-contact-details address, .branch-grid .branch-opening-hours { font-size: .76rem; }
@media (max-width: 1100px) and (min-width: 761px) {
	.site-footer .branch-contact-details { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
	.site-footer .footer-location-grid { gap: 10px; }
	.site-footer .footer-location { padding: 13px 16px; }
	.site-footer .branch-contact-details { grid-template-columns: 1fr 1fr; }
}
@media (pointer: coarse) {
	.site-footer .footer-location-actions a, .site-footer .footer-location-actions a:first-child,
	.site-footer .branch-contact-details address a { min-height: 44px; }
}

/* Footer flows directly from the store contacts to the link columns. */
.site-footer .footer-locations { padding-bottom: 30px; border-bottom: 1px solid #303030; }
.site-footer .footer-columns { padding-top: 30px; }

/* Final footer details and CI navigation typography. */
.site-footer .footer-locations { border-bottom: 0; }
body .header #navigation > a,
body .header #navigation > .mega-trigger,
body .header .menu-toggle {
	font-family: 'Grand Holiday Sans', sans-serif;
	font-weight: 400;
	font-size: .95rem;
	letter-spacing: .015em;
}
.branch-contact-details .branch-email { overflow-wrap: anywhere; font-size: .72rem; }
.site-footer .branch-contact-details .branch-email { min-height: 24px; }
@media (pointer: coarse) { .site-footer .branch-contact-details .branch-email { min-height: 44px; } }
@media (min-width: 1001px) and (max-width: 1200px) {
	.header .logo, .header.is-compact .logo { width: 155px; flex-shrink: 0; }
	.header { padding-inline: 18px; gap: 16px; }
	body .header #navigation > a, body .header #navigation > .mega-trigger,
	body .header.is-compact #navigation > .nav-cta { font-size: .8rem; padding-inline: 9px; gap: 6px; }
}

/* The floating rail gains elevation only in its compact scroll state. */
.header:not(.is-compact) { box-shadow: none; }
.header.is-compact { box-shadow: 0 10px 35px #00000024; }

/* Smaller CI lettering in the main navigation. */
body .header #navigation > a,
body .header #navigation > .mega-trigger,
body .header .menu-toggle { font-size: .85rem; }
@media (min-width: 1001px) and (max-width: 1200px) {
	body .header #navigation > a,
	body .header #navigation > .mega-trigger,
	body .header.is-compact #navigation > .nav-cta { font-size: .74rem; }
}

/* Active navigation uses its surface without an underline marker. */
.header #navigation > a[aria-current="page"]::after { display: none; }

/* Floating navigation without an outer stroke. */
.header { border: 0; }

/* Slightly smaller header logo in both scroll states. */
.header .logo { width: 180px; }
.header.is-compact .logo { width: 150px; }
@media (min-width: 1001px) and (max-width: 1200px) {
	.header .logo { width: 140px; }
	.header.is-compact .logo { width: 130px; }
}
@media (max-width: 760px) {
	.header .logo { width: min(155px, 44vw); }
	.header.is-compact .logo { width: min(135px, 39vw); }
}

/* Three clear information columns within each store contact card. */
.branch-contact-details,
.site-footer .branch-contact-details { grid-template-columns: .9fr 1.15fr 1.2fr; gap: 14px; align-items: start; }
.branch-contact-links { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.branch-contact-links a { display: inline-flex; align-items: center; min-height: 26px; font-size: .75rem; line-height: 1.5; overflow-wrap: anywhere; text-underline-offset: 4px; }
.site-footer .branch-contact-links a { color: #ddd; font-size: .7rem; }
.site-footer .branch-contact-links .branch-email { min-height: 26px; }
.site-footer .footer-location-actions { margin-top: 10px; gap: 7px; }
.site-footer .footer-location-actions a,
.site-footer .footer-location-actions a:first-child,
.branch-actions a,
.branch-actions a:first-child {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 30px; padding: 4px 10px; border: 1px solid #555;
	border-radius: 30px; background: transparent; color: #ddd;
	font-size: .68rem; line-height: 20px; font-weight: 400; text-decoration: none;
}
.branch-actions a, .branch-actions a:first-child { border-color: #888; color: #222; }
.site-footer .footer-location-actions a:hover,
.site-footer .footer-location-actions a:first-child:hover { background: transparent; text-decoration: none; border-color: #aaa; }
@media (max-width: 1100px) and (min-width: 761px) {
	.branch-contact-details, .site-footer .branch-contact-details { grid-template-columns: .9fr 1.15fr 1.2fr; gap: 10px; }
	.site-footer .footer-location-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.branch-contact-details, .site-footer .branch-contact-details { grid-template-columns: 1fr 1.2fr; gap: 12px; }
	.branch-opening-hours { grid-column: 1 / -1; }
	.branch-opening-hours dl { max-width: 250px; }
}
@media (pointer: coarse) {
	.branch-contact-links a, .site-footer .branch-contact-links .branch-email,
	.site-footer .footer-location-actions a, .site-footer .footer-location-actions a:first-child,
	.branch-actions a, .branch-actions a:first-child { min-height: 44px; }
}
body .site-footer .footer-location-actions a,
body .site-footer .footer-location-actions a:first-child,
body .branch-actions a,
body .branch-actions a:first-child { border-radius: 30px; min-height: 30px; padding: 4px 10px; font-size: .68rem; }
@media (pointer: coarse) {
	body .site-footer .footer-location-actions a,
	body .site-footer .footer-location-actions a:first-child,
	body .branch-actions a, body .branch-actions a:first-child { min-height: 44px; }
}

/* Small shared line icons; labels remain the accessible source of meaning. */
.ui-icon { display: inline-block; width: 16px; height: 16px; flex: 0 0 16px; vertical-align: -.2em; pointer-events: none; }
.branch-contact-links a, .branch-opening-hours > span { gap: 6px; }
.branch-opening-hours > span { display: inline-flex; align-items: center; }
.site-footer .branch-contact-links .ui-icon { width: 13px; height: 13px; flex-basis: 13px; }
.site-footer .footer-location-actions a, .branch-actions a { gap: 5px; }
.site-footer .footer-location-actions .ui-icon { width: 13px; height: 13px; flex-basis: 13px; }
.footer-columns h2 .ui-icon, .filters > label > .ui-icon, .page-heading .eyebrow .ui-icon { margin-right: 7px; }
.header #navigation > a .ui-icon { width: 14px; height: 14px; flex-basis: 14px; }
@media (min-width: 1001px) and (max-width: 1200px) { .header #navigation > a .ui-icon { display: none; } }

/* Slightly larger main-navigation icons. */
.header #navigation > a .ui-icon { width: 17px; height: 17px; flex-basis: 17px; }

/* All primary navigation labels share the same icon alignment. */
body .header #navigation > a,
body .header #navigation > .mega-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 20px;
}
.header #navigation > a .ui-icon,
.header #navigation > .mega-trigger .ui-icon {
	display: block;
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	align-self: center;
	vertical-align: middle;
}
@media (min-width: 1001px) and (max-width: 1200px) {
	body .header #navigation > a,
	body .header #navigation > .mega-trigger,
	body .header.is-compact #navigation > .nav-cta { padding-inline: 7px; gap: 5px; }
	.header #navigation > a .ui-icon,
	.header #navigation > .mega-trigger .ui-icon { width: 15px; height: 15px; flex-basis: 15px; }
}
@media (max-width: 1000px) {
	body .header #navigation > a,
	body .header #navigation > .mega-trigger { justify-content: flex-start; }
	.header #navigation > .mega-trigger > span { margin-left: auto; }
}

/* Matching decorative icons for each megamenu link. */
.header .mega-column a { display: inline-flex; align-items: center; gap: 9px; }
.header .mega-column a .ui-icon { width: 16px; height: 16px; flex: 0 0 16px; color: #666; }
.header .mega-column a:hover .ui-icon { color: inherit; }

/* Full technical highlights appear immediately above their plus marker. */
.tech-point { z-index: 2; }
.tech-point:hover, .tech-point:focus-within, .tech-point[aria-expanded="true"] { z-index: 5; }
.tech-point .point-label {
	width: 230px; max-width: 65vw; white-space: normal; text-align: left;
	padding: 14px; bottom: calc(100% + 12px); border-radius: 7px;
	font-family: inherit; font-size: .75rem; line-height: 1.5;
	box-shadow: 0 8px 28px #0003; visibility: hidden; pointer-events: none;
}
.tech-point .point-label::after { content: ''; position: absolute; left: calc(50% - 6px); top: 100%; border: 6px solid transparent; border-top-color: #1d1d23; }
.tech-point .point-label strong, .tech-point .point-label b, .tech-point .point-label > span { display: block; }
.tech-point .point-label strong { color: #ff3695; margin-bottom: 5px; }
.tech-point .point-label b { margin-bottom: 7px; }
.tech-point:hover .point-label, .tech-point:focus-visible .point-label, .tech-point[aria-expanded="true"] .point-label { opacity: 1; visibility: visible; pointer-events: auto; }
.tech-point .point-label::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.tech-point.tip-dismissed .point-label { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 560px) { .tech-point .point-label { width: 180px; font-size: .7rem; padding: 10px; } }

/* Megamenu icons introduce column headings, leaving category links quiet. */
.mega-column h2 { display: flex; align-items: center; gap: 9px; }
.mega-column h2 .ui-icon { width: 17px; height: 17px; flex: 0 0 17px; color: currentColor; }

/* White lettering on accent buttons and a clear technical-data surface. */
body .button.primary,
body .header #navigation > .nav-cta,
body .header #navigation > .nav-cta:hover,
body .branch-actions a:first-child:hover { color: #fff; }
body .button.primary .ui-icon, body .header #navigation > .nav-cta .ui-icon { color: inherit; }
.detail-visual > .tag { background: #17171b; color: #fff; border: 0; padding: 8px 12px; border-radius: 0; }
.detail-tech { background: #f1f1f1; margin: 0 -5vw 45px; padding: 42px 5vw; }
.detail-tech .spec-grid { margin-bottom: 0; background: transparent; }
.detail-tech .spec-grid > div { background: transparent; border-color: #d4d4d4; }
.detail-tech .section-head { margin-bottom: 28px; }
@media (max-width: 760px) { .detail-tech { padding-block: 30px; margin-bottom: 32px; } }

/* Compact technical data in the dark teaser tone. */
.detail-tech { background: #232328; color: #f5f5f5; padding-block: 28px; margin-bottom: 32px; }
.detail-tech .section-head { margin-bottom: 18px; }
.detail-tech .section-head h2 { color: #fff; font-size: clamp(1.65rem, 3vw, 2.6rem); margin: 0; }
.detail-tech .eyebrow { color: #bdbdc4; margin-bottom: 10px; }
.detail-tech .spec-grid { gap: 0 22px; }
.detail-tech .spec-grid > div { padding: 13px 8px 13px 0; border-color: #45454c; }
.detail-tech .spec-grid dt { color: #bcbcc4; font-size: .68rem; margin-bottom: 5px; }
.detail-tech .spec-grid dd { color: #f5f5f5; font-size: .84rem; line-height: 1.45; margin: 0; }
@media (max-width: 760px) {
	.detail-tech { padding-block: 24px; margin-bottom: 26px; }
	.detail-tech .spec-grid > div { padding-block: 11px; }
}

/* Light model introduction, followed by the dark technical section. */
.detail-grid { background: #f1f1f1; margin-inline: -5vw; padding: 30px 5vw 34px; }
.detail-visual, .detail-stage, .detail-visual .bike-art { background: transparent; }
.detail-visual .product-image { mix-blend-mode: multiply; }
body .sale-badge,
body .sale-bike .sale-badge,
body .detail-visual .sale-badge,
body .sale-bike .price-block.is-sale small,
body .detail-price .price-block.is-sale small,
body .dock-action a,
body .tech-point[aria-expanded="true"] { color: #fff; }
body .sale-badge :is(span, b),
body .price-block.is-sale small :is(span, b) { color: inherit; }
@media (max-width: 760px) { .detail-grid { padding-block: 24px; } }
.detail-visual .product-visual, .detail-visual .product-image { background: transparent; }
.detail-visual .product-visual { mix-blend-mode: multiply; }

/* One clear comparison action; model and technical surfaces meet directly. */
.detail-grid { margin-bottom: 0; }
.compare-icon { display: inline-block; width: 17px; height: 17px; flex: 0 0 17px; vertical-align: middle; }
.compare-button > span { display: inline-flex; align-items: center; }
body .detail-copy .compare-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: #ff3695; border-color: #ff3695; color: #fff;
	font-family: 'Grand Holiday Sans', sans-serif; font-size: .9rem; font-weight: 400;
}
body .detail-copy .compare-button.is-selected { background: #ff3695; border-color: #ff3695; color: #fff; box-shadow: none; }
body .detail-copy .compare-button:hover { background: #ff3695; color: #fff; border-color: #ff3695; }
body .detail-copy .compare-button.is-selected:hover { background: #ff3695; border-color: #ff3695; }

/* Catalog comparison actions match the model detail action. */
body #catalog-results .bike-card .compare-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: #ff3695; border-color: #ff3695; color: #fff;
	font-family: 'Grand Holiday Sans', sans-serif; font-size: .9rem; font-weight: 400;
	box-shadow: none;
}
body #catalog-results .bike-card .compare-button:hover { background: #ff3695; border-color: #ff3695; color: #fff; }
body #catalog-results .bike-card .compare-button.is-selected,
body #catalog-results .bike-card .compare-button.is-selected:hover { background: #ff3695; border-color: #ff3695; color: #fff; box-shadow: none; }

/* Catalog model links share CI lettering and a detail-exploration icon. */
body #catalog-results .card-actions > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Grand Holiday Sans', sans-serif;
	font-size: .9rem;
	font-weight: 400;
	line-height: 20px;
}
.model-discover-icon { display: block; width: 17px; height: 17px; flex: 0 0 17px; }

/* User-provided urban FLYER leasing photograph, focused on rider and bike. */
.leasing-hero figure img { object-position: 60% 70%; }
.mega-story[href="#leasing"] img { object-position: 60% 72%; }
@media (max-width: 760px) {
	.leasing-hero figure { min-height: 0; aspect-ratio: 3 / 2; }
	.leasing-hero figure img { object-position: 60% 70%; }
}

/* Blend the leasing photograph into the adjacent dark teaser panel. */
.leasing-hero figure { position: relative; isolation: isolate; }
.leasing-hero figure::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, #232328 0%, #23232899 12%, #23232838 30%, #23232800 52%);
	pointer-events: none;
}
.leasing-hero figure figcaption { z-index: 2; }

/* Longer, softer transition from the leasing copy into the photograph. */
.leasing-hero figure::after {
	background: linear-gradient(90deg, #232328 0%, #232328ed 8%, #232328c7 20%, #2323288c 35%, #2323284d 50%, #2323281a 66%, #23232800 82%);
}
.leasing-hero figure { border: 0; }

/* Full-width leasing photograph fade, transparent only at the far right. */
.leasing-hero figure::after {
	background: linear-gradient(90deg, #232328 0%, #232328eb 12%, #232328c2 28%, #2323288c 46%, #23232852 65%, #23232824 83%, #23232800 100%);
}

/* Leasing photo without a fade overlay. */
.leasing-hero figure::after { display: none; }

/* Leasing actions use CI lettering and meaningful icons rather than arrows. */
body main .leasing-action {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: 'Grand Holiday Sans', sans-serif; font-weight: 400; font-size: .9rem;
	line-height: 1.4;
}
body .leasing-partners .provider-actions { flex-wrap: wrap; gap: 10px; }
body .leasing-partners .provider-actions .leasing-action { font-size: .75rem; gap: 5px; }
.leasing-action .ui-icon { width: 17px; height: 17px; flex-basis: 17px; }
.leasing-partners .leasing-action .ui-icon { width: 14px; height: 14px; flex-basis: 14px; }

/* Center the detail savings badge against the price line. */
.detail-price .price-block.is-sale { align-items: center; }
.detail-price .price-block.is-sale small { align-self: center; margin-top: 0; margin-bottom: 0; }

/* Catalog savings badges follow the same centered price alignment. */
#catalog-results .price-block.is-sale { align-items: center; }
#catalog-results .price-block.is-sale small { align-self: center; margin-top: 0; margin-bottom: 0; }
#catalog-results .sale-bike .price-block.is-sale small { margin-right: 0; }
@media (min-width: 761px) {
	#catalog-results .price-block.is-sale { flex-wrap: nowrap; gap: 10px; }
	#catalog-results .price-block.is-sale small { flex-shrink: 1; }
}

/* Category chips use the shared line-icon system. */
.bike-card .tag, .detail-visual > .tag { display: inline-flex; align-items: center; gap: 6px; }
.bike-card .tag .ui-icon, .detail-visual > .tag .ui-icon { width: 13px; height: 13px; flex: 0 0 13px; color: inherit; }

/* CI lettering on bike category chips. */
.bike-card .tag, .detail-visual > .tag {
	font-family: 'Grand Holiday Sans', sans-serif;
	font-weight: 400;
	font-size: .7rem;
	line-height: 1.3;
	letter-spacing: .03em;
}

/* Megamenu headings match the bike category chips. */
.header .mega-column h2 {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	width: fit-content;
	padding: 8px 12px;
	border: 0;
	border-radius: 0;
	background: #17171b;
	color: #fff;
	font-family: 'Grand Holiday Sans', sans-serif;
	font-size: .7rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: .03em;
}
.header .mega-column h2 .ui-icon { width: 13px; height: 13px; flex-basis: 13px; color: inherit; }

/* CI lettering for the individual megamenu destinations. */
.header .mega-column a {
	font-family: 'Grand Holiday Sans', sans-serif;
	font-size: .88rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: .01em;
}

/* Consistent CI lettering and line icons throughout footer links. */
body .site-footer .footer-columns a,
body .site-footer .footer-bottom > a,
body .site-footer .branch-contact-links a,
body .site-footer .footer-location-actions a,
body .site-footer .footer-location-actions a:first-child {
	display: inline-flex; align-items: center; gap: 7px;
	font-family: 'Grand Holiday Sans', sans-serif;
	font-weight: 400; font-size: .8rem; line-height: 1.5;
}
.site-footer .footer-columns a .ui-icon,
.site-footer .footer-bottom > a .ui-icon { width: 14px; height: 14px; flex: 0 0 14px; }
body .site-footer .branch-contact-links a,
body .site-footer .footer-location-actions a,
body .site-footer .footer-location-actions a:first-child { font-size: .72rem; }

/* Sale destinations have a distinct black label and percentage icon. */
body .header .mega-column a.sale-nav-link,
body .site-footer .footer-columns a.sale-nav-link {
	background: #17171b; color: #fff; padding: 7px 11px;
	border-radius: 0; gap: 7px; width: fit-content;
}
body .header .mega-column a.sale-nav-link .ui-icon,
body .site-footer .footer-columns a.sale-nav-link .ui-icon { color: #fff; }
body .site-footer .footer-columns a.sale-nav-link { border: 1px solid #444; }

/* Percentage icons replace arrows on bike sale labels. */
.sale-badge b { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.sale-badge b .ui-icon { width: 17px; height: 17px; flex: 0 0 17px; color: inherit; }

/* Carry the model introduction surface up to the main navigation. */
.detail { padding-top: 0; }
.detail-back { margin-inline: -5vw; padding: 35px 5vw 20px; background: #f1f1f1; }

/* Tighter start to model detail pages. */
.detail-back { padding-top: 14px; padding-bottom: 4px; }
.detail-grid { padding-top: 12px; }
@media (max-width: 760px) {
	.detail-back { padding-top: 12px; padding-bottom: 2px; }
	.detail-grid { padding-top: 10px; }
}


/* Local size orientation, integrated into the model detail flow. */
.size-advisor[hidden] { display: none; }
.size-advisor { display: grid; grid-template-columns: 1fr 1fr; gap: 7%; margin-inline: -5vw; padding: 32px 5vw; background: #e9e9e9; scroll-margin-top: 110px; }
.size-advisor h2 { font-size: 2rem; margin-bottom: 16px; }
.size-advisor p, .size-advisor summary { font-size: .85rem; line-height: 1.6; }
.size-advisor form { display: grid; gap: 10px; }
.size-advisor form > label { font-size: .8rem; font-weight: 600; }
.size-advisor input { min-height: 40px; padding: 8px 12px; }
.size-advisor button { justify-self: start; margin-top: 6px; }
.size-result:not(:empty) { padding: 18px; background: white; border-left: 3px solid #ff3695; font-size: .86rem; line-height: 1.6; }
.size-advisor-link, .size-advisor .button, .size-advisor form > a { font-family: 'Grand Holiday Sans', sans-serif; font-size: .9rem; }
.size-advisor-link { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 12px; border: 1px solid #888; border-radius: 5px; text-decoration: none; }
@media (max-width: 760px) { .size-advisor { grid-template-columns: 1fr; gap: 24px; } }

/* Footer sale destination reverses to a white chip on the dark surface. */
body .site-footer .footer-columns a.sale-nav-link { background: #fff; color: #17171b; border-color: #fff; }
body .site-footer .footer-columns a.sale-nav-link .ui-icon { color: #17171b; }

/* Compact frame silhouettes supplement the written variant labels. */
.frame-shape { display: inline-flex; align-items: center; gap: 9px; }
.frame-shape-icon { width: 30px; height: 25px; flex: 0 0 30px; color: #303034; }

/* Distinct frame silhouettes with quiet wheels for spatial context. */
.frame-shape { gap: 12px; }
.frame-shape-icon { width: 62px; height: 41px; flex: 0 0 62px; color: #222; }
.frame-icon-context { opacity: .28; }
@media (max-width: 760px) { .frame-shape-icon { width: 54px; height: 36px; flex-basis: 54px; } }

/* Smaller frame-form icons, retaining the corrected proportions. */
.frame-shape { gap: 8px; }
.frame-shape-icon { width: 44px; height: 30px; flex-basis: 44px; }
@media (max-width: 760px) { .frame-shape-icon { width: 40px; height: 27px; flex-basis: 40px; } }

/* Direct links to specifications and the branch variant list. */
.detail-back { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.detail-jump-links { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-jump-links button { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 13px; border: 1px solid #999; border-radius: 5px; background: transparent; color: #222; font-family: 'Grand Holiday Sans', sans-serif; font-size: .85rem; }
#detail-tech, #detail-availability { scroll-margin-top: 110px; }
@media (pointer: coarse) { .detail-jump-links button { min-height: 44px; } }

/* Keep all model actions together alongside comparison and size advice. */
.detail-copy .button-row { gap: 8px; }
.detail-copy .detail-jump-links { display: contents; }
.detail-copy .button-row > *, .detail-copy .detail-jump-links button { white-space: nowrap; }

/* Equal-height model actions aligned in one responsive row. */
.detail-copy .button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
body .detail-copy .button-row .compare-button,
body .detail-copy .button-row .detail-jump-links button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	height: 40px;
	margin: 0;
	padding: 9px 13px;
	border-width: 1px;
	border-style: solid;
	border-radius: 5px;
	font-family: 'Grand Holiday Sans', sans-serif;
	font-size: .85rem;
	font-weight: 400;
	line-height: 20px;
	white-space: nowrap;
}
@media (pointer: coarse) {
	body .detail-copy .button-row .compare-button,
	body .detail-copy .button-row .detail-jump-links button { height: 44px; min-height: 44px; }
}
@media (min-width: 1101px) {
	.detail-copy .button-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	body .detail-copy .button-row .compare-button,
	body .detail-copy .button-row .detail-jump-links button { width: 100%; padding-inline: 7px; gap: 5px; font-size: .76rem; }
}

/* Two catalog models per row, with vertically composed product cards. */
#catalog-results, #catalog-results.is-dense { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; align-items: stretch; }
#catalog-results .bike-card, #catalog-results.is-dense .bike-card { display: flex; flex-direction: column; min-width: 0; padding: 0; }
#catalog-results .card-image { min-height: 250px; }
#catalog-results .product-image { height: 230px; }
#catalog-results .card-body, #catalog-results.is-dense .card-body { flex: 1; padding: 22px; }
#catalog-results .card-title h3 { font-size: clamp(1.35rem, 1.8vw, 1.9rem); }
#catalog-results .card-actions { margin-top: auto; padding-top: 18px; gap: 12px; }
#catalog-results .price-block.is-sale { flex-wrap: wrap; }
#catalog-results.is-dense .card-image { min-height: 160px; }
#catalog-results.is-dense .product-image { height: 145px; }
@media (max-width: 760px) {
	#catalog-results, #catalog-results.is-dense { grid-template-columns: 1fr; }
}

/* Consistent black category labels on every catalog bike. */
body #catalog-results .bike-card .tag,
body #catalog-results .sale-bike .tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #17171b;
	color: #fff;
	border: 0;
	border-radius: 0;
	padding: 8px 12px;
	font-family: 'Grand Holiday Sans', sans-serif;
	font-size: .7rem;
	font-weight: 400;
	line-height: 1.3;
}
body #catalog-results .bike-card .tag .ui-icon { color: inherit; }

/* Quieter catalog hierarchy with consistent two-column product cards. */
.page-heading:has(+ .catalog-section) { padding-top: 30px; padding-bottom: 30px; }
.page-heading:has(+ .catalog-section) h1 { font-size: clamp(2.1rem, 4.2vw, 4rem); line-height: 1.05; margin-bottom: 16px; }
.page-heading:has(+ .catalog-section) h1 br { display: none; }
.page-heading:has(+ .catalog-section) .lead { font-size: .85rem; max-width: 740px; }
.catalog-section { padding-top: 30px; }
#catalog-results { gap: 24px; }
#catalog-results .bike-card { border: 1px solid #dedee0; border-radius: 7px; overflow: hidden; }
#catalog-results .sale-bike { border-color: #303037; }
#catalog-results .bike-card::before { display: none; }
#catalog-results .card-image { min-height: 260px; background: #f5f5f5; }
#catalog-results .product-image { height: 240px; background: #f5f5f5; }
#catalog-results .product-visual figcaption { display: none; }
#catalog-results .card-body, #catalog-results .sale-bike .card-body { padding: 20px; }
#catalog-results .manufacturer-logo { height: 28px; margin-bottom: 10px; }
#catalog-results .manufacturer-logo img { max-height: 24px; }
#catalog-results .card-title h3 { font-size: 1.4rem; line-height: 1.2; min-height: 3.36rem; margin: 0 0 14px; }
#catalog-results .card-body > p:not(.match) { display: none; }
#catalog-results .price-block { margin: 0 0 14px; min-height: 66px; gap: 6px 10px; }
#catalog-results .price-block strong, #catalog-results .sale-bike .price-block strong { font-size: 1.8rem; line-height: 1.15; }
#catalog-results .price-block.is-sale { flex-wrap: wrap; }
#catalog-results .price-block.is-sale small { font-size: .62rem; padding: 5px 7px; }
#catalog-results .spec-mini { margin: 0 0 14px; gap: 6px; min-height: 40px; }
#catalog-results .spec-mini span { font-size: .68rem; line-height: 1.4; }
#catalog-results .card-actions { border-top: 1px solid #dedee0; padding-top: 15px; justify-content: space-between; }
#catalog-results .sale-bike .card-actions { border-color: #494950; }
body #catalog-results .card-actions > a, body #catalog-results .bike-card .compare-button { font-size: .78rem; }
#catalog-results .sale-badge { transform: rotate(5deg); }
@media (max-width: 1000px) and (min-width: 761px) {
	.explorer-layout { grid-template-columns: 1fr; }
	.explorer-layout .filters { position: static; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 0 0 22px; border-right: 0; border-bottom: 1px solid #ddd; }
	.filters > .eyebrow { grid-column: 1/-1; margin-bottom: 0; }
}
@media (max-width: 760px) {
	.page-heading:has(+ .catalog-section) { padding-block: 25px; }
	#catalog-results .card-title h3 { min-height: 0; }
}
body #catalog-results .bike-card .card-title h3 { font-size: 1.4rem; line-height: 1.2; min-height: 3.36rem; }
body #catalog-results .bike-card .card-image { margin: 0; border: 0; padding: 0; }
@media (max-width: 760px) { body #catalog-results .bike-card .card-title h3 { min-height: 0; } }

/* Compact catalog cards with identical row geometry for sale and regular bikes. */
.page-heading:has(+ .catalog-section) { padding-block: 20px; }
.page-heading:has(+ .catalog-section) h1 { font-size: clamp(1.8rem, 3vw, 2.7rem); margin-bottom: 10px; }
.page-heading:has(+ .catalog-section) .eyebrow { margin-bottom: 12px; }
.page-heading:has(+ .catalog-section) .lead { font-size: .78rem; line-height: 1.5; }
.catalog-section { padding-top: 20px; }
body #catalog-results .bike-card .card-image,
body #catalog-results.is-dense .bike-card .card-image { height: 190px; min-height: 190px; flex: 0 0 190px; }
body #catalog-results .bike-card .product-image,
body #catalog-results.is-dense .bike-card .product-image { height: 190px; }
body #catalog-results .bike-card .card-body,
body #catalog-results.is-dense .bike-card .card-body { display: flex; flex-direction: column; padding: 14px 16px; }
body #catalog-results .manufacturer-logo { height: 22px; margin-bottom: 6px; }
body #catalog-results .manufacturer-logo img { max-height: 20px; max-width: 120px; }
body #catalog-results .bike-card .card-title h3 { font-size: 1.12rem; min-height: 2.7rem; margin-bottom: 8px; }
body #catalog-results .bike-card .price-block { display: flex; align-items: center; flex-wrap: wrap; min-height: 52px; height: 52px; margin: 0 0 8px; gap: 4px 8px; }
body #catalog-results .bike-card .price-block strong { font-size: 1.5rem; line-height: 1.1; }
body #catalog-results .bike-card .price-block small { font-size: .58rem; }
body #catalog-results .bike-card .spec-mini { height: 32px; min-height: 32px; margin: 0 0 8px; overflow: hidden; }
body #catalog-results .bike-card .spec-mini span { font-size: .6rem; }
body #catalog-results .bike-card .card-actions { margin-top: auto; padding-top: 10px; gap: 8px; }
body #catalog-results .bike-card .compare-button { height: 34px; min-height: 34px; padding: 6px 10px; font-size: .72rem; }
body #catalog-results .card-actions > a { font-size: .72rem; }
body #catalog-results .bike-card .sale-badge { top: 12px; right: 12px; padding: 8px 10px; }
body #catalog-results .sale-badge b { font-size: .83rem; }
body #catalog-results .sale-badge > span { font-size: .42rem; }
body #catalog-results .bike-card .tag { top: 12px; left: 12px; padding: 6px 8px; font-size: .6rem; }
@media (pointer: coarse) { body #catalog-results .bike-card .compare-button { min-height: 44px; height: 44px; } }
body #catalog-results .bike-card { height: 380px; margin: 0; align-self: stretch; }
body #catalog-results .bike-card .card-image,
body #catalog-results.is-dense .bike-card .card-image { height: 170px; min-height: 170px; flex-basis: 170px; }
body #catalog-results .bike-card .product-image,
body #catalog-results.is-dense .bike-card .product-image { height: 170px; }
body #catalog-results .bike-card .card-body { min-height: 0; padding: 12px 16px; }
body #catalog-results .bike-card .spec-mini { display: none; }
body #catalog-results .bike-card .price-block { height: 42px; min-height: 42px; }
body #catalog-results .bike-card .card-actions { flex-shrink: 0; }
body #catalog-results .bike-card .price-block:not(.is-sale) small { margin: 0; }
@media (max-width: 760px) { body #catalog-results .bike-card { height: 395px; } }

/* Three-across catalog with a compact filter toolbar above the models. */
@media (min-width: 1101px) {
	.catalog-section .explorer-layout { grid-template-columns: 1fr; gap: 20px; }
	.catalog-section .explorer-layout .filters {
		position: static; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 12px 16px; padding: 0 0 20px; border-right: 0; border-bottom: 1px solid #dedee0;
	}
	.catalog-section .filters > .eyebrow { grid-column: 1 / -1; margin: 0; }
	.catalog-section .filters > label { margin: 0; }
	.catalog-section .filters .sale-filter { align-self: end; min-height: 38px; }
	.catalog-section .filters > button { align-self: end; justify-self: start; }
	#catalog-results, #catalog-results.is-dense { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
	body #catalog-results .bike-card { height: 405px; }
	body #catalog-results .bike-card .card-image,
	body #catalog-results.is-dense .bike-card .card-image { height: 195px; min-height: 195px; flex-basis: 195px; }
	body #catalog-results .bike-card .product-image,
	body #catalog-results.is-dense .bike-card .product-image { height: 195px; }
}

/* Stronger sale image framing and CI model names. */
body #catalog-results .sale-bike .card-image {
	box-sizing: border-box;
	border: 10px solid #202024;
}
body #catalog-results .sale-bike .product-image { height: 170px; }
body #catalog-results .bike-card .card-title h3,
body #catalog-results .bike-card .card-title h3 a {
	font-family: 'Grand Holiday Sans', sans-serif;
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.2;
}
@media (min-width: 1101px) {
	body #catalog-results .sale-bike .product-image { height: 175px; }
}
@media (max-width: 1100px) {
	body #catalog-results .sale-bike .product-image { height: 150px; }
}

/* One catalog view with square product cards. */
body #catalog-results .bike-card,
body #catalog-results .bike-card .card-image,
body #catalog-results .bike-card .card-body { border-radius: 0; }

/* Lower-profile comparison dock. */
#compare-dock { padding: 9px 14px; gap: 16px; bottom: 12px; border-radius: 8px; }
#compare-dock .dock-heading { gap: 3px; }
#compare-dock .dock-heading strong { font-size: 1rem; }
#compare-dock .dock-action { padding: 0; gap: 4px; min-height: 0; }
#compare-dock .dock-action > span { display: none; }
#compare-dock .dock-action a { min-height: 34px; padding: 7px 12px; font-size: .75rem; line-height: 20px; }
#compare-dock li { flex-direction: row; gap: 5px; min-width: 130px; width: 155px; padding: 4px 24px 4px 6px; }
#compare-dock li img { width: 48px; height: 32px; }
#compare-dock li span { text-align: left; font-size: .55rem; }
#compare-dock .dock-empty { font-size: .72rem; margin: 0; }
@media (max-width: 760px) {
	#compare-dock { gap: 7px; padding: 8px 10px; }
	#compare-dock .dock-heading { width: auto; gap: 8px; }
	#compare-dock .dock-heading > span { display: none; }
	#compare-dock ul { flex-basis: 100%; order: 3; }
	#compare-dock .dock-action { margin-left: auto; max-width: none; }
	#compare-dock .dock-empty { flex: 1; font-size: .63rem; }
	#compare-dock .dock-action a { min-height: 40px; padding: 8px 10px; }
}

/* Extra-slim comparison rail. */
#compare-dock { padding: 5px 10px; gap: 12px; bottom: 10px; }
#compare-dock .dock-heading { flex-direction: row; align-items: center; gap: 8px; }
#compare-dock .dock-heading > span { display: none; }
#compare-dock .dock-heading strong { font-size: .85rem; }
#compare-dock .dock-action a { min-height: 30px; padding: 5px 10px; font-size: .7rem; }
#compare-dock .dock-empty { font-size: .67rem; }
#compare-dock li { padding-block: 2px; }
#compare-dock li img { height: 26px; width: 40px; }
@media (pointer: coarse) { #compare-dock .dock-action a { min-height: 40px; } }
@media (max-width: 1000px) {
	#compare-dock { flex-wrap: wrap; }
	#compare-dock > p { display: none; }
	#compare-dock .dock-action { margin-left: auto; }
}

/* CI lettering and comparison icon on the dock action. */
#compare-dock .dock-action a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: 'Grand Holiday Sans', sans-serif; font-weight: 400; }
#compare-dock .dock-action a .compare-icon { width: 15px; height: 15px; flex-basis: 15px; }

/* Motion trails also follow the bike on its rightward exit. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	#catalog-results .bike-card.bike-exiting .card-image::after {
		animation: bike-exit-trace 540ms ease-in forwards;
	}
	@keyframes bike-exit-trace {
		0% { opacity: .85; transform: translateX(0) scaleX(.35); }
		65% { opacity: .85; transform: translateX(180%) scaleX(1.15); }
		100% { opacity: 0; transform: translateX(400%) scaleX(.6); }
	}
}

/* Softer, slower bike motion with matching trailing lines. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	#catalog-results .bike-card .product-image img { transition-duration: 1.1s; transition-timing-function: cubic-bezier(.22,.7,.2,1); }
	#catalog-results .bike-card.bike-exiting .card-image::after { animation-duration: 840ms; animation-timing-function: cubic-bezier(.4,0,.2,1); }
}

/* CI lettering for footer block headings and store names. */
.site-footer h2,
.site-footer .footer-location h3 {
	font-family: 'Grand Holiday Sans', sans-serif;
	font-weight: 400;
}

/* Top bicycle brands as balanced, linked original logos in the megamenu. */
.mega-top-caption { font-family: 'Grand Holiday Sans', sans-serif; font-size: .86rem; margin: 0 0 15px; }
.mega-brand-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; width: 100%; }
.header .mega-column a.mega-brand-logo { display: flex; justify-content: center; align-items: center; width: 110px; height: 62px; padding: 10px; border: 1px solid #e4e4e4; border-radius: 0; }
.mega-brand-logo img { width: 90px; height: 38px; object-fit: contain; }
.header .mega-column a.mega-brand-logo:hover { background: #f2f2f2; }
.header .mega-column .mega-all-brands { margin-top: 15px; text-decoration: none; }
@media (max-width: 760px) {
	#mega-brands .mega-columns { grid-template-columns: 1fr; }
	.mega-brand-logos { gap: 8px; }
	.header .mega-column a.mega-brand-logo { width: 90px; height: 54px; }
	.mega-brand-logo img { width: 72px; height: 32px; }
}

/* Contact details use the normal, easily readable text face. */
body .site-footer .branch-contact-links a {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	font-weight: 400;
}
.header .mega-column a.mega-all-brands,
.header .mega-column a.mega-all-brands:hover { text-decoration: none; }

/* Frameless, optically balanced top-brand wordmarks. */
.header .mega-column a.mega-brand-logo {
	width: 116px; height: 66px; padding: 8px 4px; border: 0; background: transparent;
}
.header .mega-column a.mega-brand-logo:hover { background: transparent; }
.mega-brand-logo img { width: 104px; height: 36px; object-fit: contain; }
.mega-brand-logo img[alt="Riese & Müller"] { width: 116px; height: 40px; }
.mega-brand-logo img[alt="KTM"] { width: 90px; height: 36px; }
.mega-brand-logo img[alt="Kalkhoff"] { width: 112px; height: 38px; }
@media (max-width: 760px) {
	.header .mega-column a.mega-brand-logo { width: 96px; height: 54px; }
	.mega-brand-logo img { width: 88px; height: 30px; }
	.mega-brand-logo img[alt="Riese & Müller"], .mega-brand-logo img[alt="Kalkhoff"] { width: 94px; height: 32px; }
	.mega-brand-logo img[alt="KTM"] { width: 76px; height: 30px; }
}
@media (min-width: 1001px) {
	.mega-brand-logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
	.header .mega-column a.mega-brand-logo { width: 100%; min-width: 0; }
	.mega-brand-logo img { max-width: 100%; }
}

/* Gift-card entry integrated with Fulland's local design system. */
.voucher-page { display: grid; grid-template-columns: 1fr 1fr; background: #f1f1f1; }
.voucher-intro { background: #232328; color: white; padding: 55px 10%; overflow: hidden; }
.voucher-intro h1 { font-size: clamp(2.4rem,4vw,4.4rem); line-height: 1.08; }
.voucher-intro h1 em { font-family: 'Grand Holiday Sans',sans-serif; font-style: normal; }
.voucher-intro > p { max-width: 420px; color: #ccc; line-height: 1.7; }
.voucher-card-art { max-width: 360px; margin: 40px 0 10px; padding: 28px; aspect-ratio: 1.6; background: #ff3695; box-shadow: 9px 10px 0 #111; transform: rotate(-4deg); display: flex; flex-direction: column; justify-content: space-between; color: white; }
.voucher-card-art > span,.voucher-card-art small { font-size: .6rem; letter-spacing: .1em; }
.voucher-card-art strong { font-family: 'Grand Holiday Sans',sans-serif; font-size: 2rem; line-height: 1.1; }
.voucher-check { padding: 55px 10%; }
.voucher-check h2 { font-family: 'Grand Holiday Sans',sans-serif; font-size: 2rem; margin: 18px 0; }
.voucher-symbol { display: inline-grid; place-items: center; width: 40px; height: 40px; background: #17171b; color: white; font-size: 1.5rem; }
.voucher-check p { font-size: .85rem; line-height: 1.65; }
.voucher-check form { margin-top: 28px; }
.voucher-check label { display: block; font-size: .8rem; margin-bottom: 9px; }
.voucher-check input { min-height: 46px; font-size: 1.1rem; letter-spacing: .12em; }
.voucher-check .button { font-family: 'Grand Holiday Sans',sans-serif; margin: 12px 0; }
.voucher-check details { border-top: 1px solid #ccc; padding-top: 20px; margin-top: 24px; }
@media(max-width:760px) { .voucher-page { grid-template-columns: 1fr; } .voucher-intro,.voucher-check { padding: 30px 6%; } .voucher-card-art { max-width: 280px; } }

/* Original Fulland gift-card artwork supplied by the user. */
.voucher-real-card { margin: 36px 0 12px; max-width: 440px; transform: rotate(-3deg); filter: drop-shadow(8px 10px 0 #111); }
.voucher-real-card img { display: block; width: 100%; height: auto; }
.voucher-code-help img { display: block; width: 100%; max-width: 440px; height: auto; margin-top: 14px; }
.voucher-check .voucher-code-help { margin-top: 14px; padding-top: 14px; }
@media(max-width:760px) { .voucher-real-card { max-width: 340px; margin-top: 26px; } }

/* Rounded corners for the original gift-card artwork. */
.voucher-real-card img, .voucher-code-help img { border-radius: 14px; }

/* No text decoration anywhere in the footer, including link states. */
body .site-footer *,
body .site-footer a,
body .site-footer a:hover,
body .site-footer a:focus,
body .site-footer .footer-columns a:hover,
body .site-footer .footer-location-actions a:first-child,
body .site-footer .footer-location-actions a:last-child:hover {
	text-decoration: none;
}

/* Navigation hover matches the orange primary navigation action. */
@media (hover: hover) {
	body .header #navigation > a:hover,
	body .header #navigation > .mega-trigger:hover { background: var(--orange); color: #fff; }
	body .header .mega-column a:hover { color: var(--orange); }
	body .header .mega-column a:hover .ui-icon { color: inherit; }
	body .header .mega-column a.sale-nav-link:hover { background: var(--orange); color: #fff; }
	body .header .mega-column a.sale-nav-link:hover .ui-icon { color: #fff; }
}

/* Lokale Designansicht für Katalog und Modellseiten. */
.catalog-design-preview .price-block:not(.is-sale) > small,
.catalog-design-preview .sale-badge > span,
.catalog-design-preview .model-source-note,
.catalog-design-preview .variant-stock-note {
	display: none;
}

/* Einheitliche Filtertypografie und orange Akzentlinien. */
.catalog-section .filters > .eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Grand Holiday Sans', sans-serif;
	font-size: .88rem;
	font-weight: 400;
	letter-spacing: .025em;
}
.catalog-section .filters > label {
	font-family: 'Grand Holiday Sans', sans-serif;
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .015em;
}
.catalog-section .filters > label input,
.catalog-section .filters > label select {
	font-family: inherit;
	font-size: .85rem;
}
body .page-heading .eyebrow::before,
body .page-heading:has(+ .catalog-section) .eyebrow::before {
	background: var(--orange);
}

/* Beim Verlassen des Footers sofort wieder sichtbar. */
#compare-dock:not(.is-near-footer) {
	transition: none;
}

/* Gemeinsamer Hover-Effekt wie beim primären Leasing-Header-Button. */
body :is(.button, .compare-button, .dock-action a, .detail-jump-links button, .filters > button, .active-filters button, .footer-location-actions a, .branch-actions a, .finder-actions button, .menu-toggle, .mega-trigger, .nav-cta) {
	transition: background-color .18s ease, transform .18s ease, color .18s ease, border-color .18s ease;
}
@media (hover: hover) {
	body :is(.button, .compare-button, .dock-action a, .detail-jump-links button, .filters > button, .active-filters button, .footer-location-actions a, .branch-actions a, .finder-actions button, .menu-toggle, .mega-trigger, .nav-cta):not(:disabled):hover {
		background: #ff57a7 !important;
		border-color: #ff57a7 !important;
		color: #fff !important;
		transform: translateY(-2px) !important;
	}
}
@media (prefers-reduced-motion: reduce) {
	body :is(.button, .compare-button, .dock-action a, .detail-jump-links button, .filters > button, .active-filters button, .footer-location-actions a, .branch-actions a, .finder-actions button, .menu-toggle, .mega-trigger, .nav-cta) {
		transition: none;
		transform: none !important;
	}
}

/* Vergleichs-Icon dreht sich beim Hover um die vertikale Achse. */
.compare-button .compare-icon,
#compare-dock .dock-action a .compare-icon {
	transform-origin: center;
	transition: transform .5s cubic-bezier(.22, .7, .2, 1);
}
@media (hover: hover) {
	.compare-button:hover .compare-icon,
	#compare-dock .dock-action a:hover .compare-icon {
		transform: perspective(120px) rotateY(180deg);
	}
}
@media (prefers-reduced-motion: reduce) {
	.compare-button .compare-icon,
	#compare-dock .dock-action a .compare-icon {
		transition: none;
		transform: none !important;
	}
}

/* Sale-Filter: Schwarz im Grundzustand, Pink bei aktiver Auswahl. */
body .catalog-section .filters .sale-filter {
	background: #17171b;
	border: 1px solid #17171b;
	color: #fff;
	box-shadow: none;
	gap: 10px;
	padding: 8px 12px;
	font-size: .85rem;
	min-height: 38px;
}
body .catalog-section .sale-filter input[type="checkbox"] {
	appearance: none;
	position: relative;
	width: 34px;
	min-width: 34px;
	height: 20px;
	min-height: 20px;
	padding: 0;
	margin: 0;
	border: 1px solid #ffffffa0;
	border-radius: 20px;
	background: #0003;
	cursor: pointer;
	transition: background-color .2s;
}
body .catalog-section .sale-filter input::after {
	content: '';
	position: absolute;
	left: 3px;
	top: 3px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	transition: transform .2s ease;
}
body .catalog-section .filters .sale-filter:has(input:checked) {
	background: #ff3695;
	border-color: #ff3695;
	color: #fff;
}
body .catalog-section .sale-filter input[type="checkbox"] { background: #17171b; }
body .catalog-section .sale-filter input:checked { background: #ff3695; }
body .catalog-section .sale-filter input:checked::after { transform: translateX(14px); }
body .catalog-section .sale-filter input:focus-visible { outline: 2px solid #17171b; outline-offset: 3px; }
@media (pointer: coarse) {
	body .catalog-section .filters .sale-filter { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
	body .catalog-section .sale-filter input,
	body .catalog-section .sale-filter input::after { transition: none; }
}

/* Klarer Reset-Button neben dem Sale-Switch. */
body .catalog-section .filters .filter-reset {
	align-self: end;
	min-height: 38px;
	padding: 8px 12px;
	gap: 8px;
	border: 1px solid #17171b;
	background: #fff;
	color: #17171b;
	font-family: 'Grand Holiday Sans', sans-serif;
	font-size: .85rem;
	font-weight: 400;
	text-decoration: none;
}
.filter-reset .ui-icon { width: 16px; height: 16px; flex-shrink: 0; }
@media (pointer: coarse) {
	body .catalog-section .filters .filter-reset { min-height: 44px; }
}

body .catalog-section .filters .filter-reset {
	background: #17171b;
	border-color: #17171b;
	color: #fff;
}
@media (hover: hover) {
	body .catalog-section .filters .filter-reset:hover {
		background: #ff3695 !important;
		border-color: #ff3695 !important;
		color: #fff !important;
	}
}

/* Veröffentlichte redaktionelle Seiten und zeitgesteuerte Hinweise. */
.cms-page { max-width: 1100px; margin-inline: auto; }
.cms-page > img { width: 100%; max-height: 520px; object-fit: cover; margin-block: 24px; }
.cms-page > p { white-space: pre-line; max-width: 75ch; }
#cms-popup { width: min(600px, calc(100% - 32px)); max-height: calc(100dvh - 48px); overflow: auto; padding: 26px; border: 0; background: #fff; color: #17171b; }
#cms-popup::backdrop { background: #0009; }
#cms-popup > img { width: 100%; max-height: 320px; object-fit: cover; }
#cms-popup > p { white-space: pre-line; }
#cms-popup > button { float: right; }
#cms-popup h2 { clear: both; padding-top: 20px; }
.mega-story[hidden], .leasing-provider[hidden] { display: none !important; }

/* Redaktionelle Informations- und Rechtstextseiten. */
.cms-page h1 { font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: 32px; }
.cms-page h2 { font-size: 1.4rem; line-height: 1.35; margin: 32px 0 14px; max-width: 65ch; }
.cms-page h3 { font-size: 1.1rem; margin: 24px 0 12px; }
.cms-page li { line-height: 1.7; max-width: 75ch; }

/* Schließbare Information, keine Cookie-Einwilligungsabfrage. */
#cookie-information {
	position: fixed;
	z-index: 150;
	right: 18px;
	bottom: var(--cookie-notice-bottom, 18px);
	width: min(330px, calc(100vw - 36px));
	box-sizing: border-box;
	padding: 18px;
	background: #fff;
	color: #17171b;
	border: 1px solid #ddd;
	border-left: 3px solid var(--orange);
	box-shadow: 0 6px 28px #0002;
	font-size: .8rem;
	line-height: 1.5;
}
#cookie-information > strong { display: block; font-family: 'Grand Holiday Sans', sans-serif; font-size: .95rem; font-weight: 400; }
#cookie-information > p { margin: 8px 0; }
#cookie-information > a { color: inherit; text-underline-offset: 3px; }
#cookie-information > button { display: block; margin-top: 12px; min-height: 38px; padding: 8px 14px; border: 0; background: #17171b; color: #fff; font-family: 'Grand Holiday Sans', sans-serif; font-size: .85rem; cursor: pointer; }
#cookie-information > button:hover { background: var(--orange); }
#cookie-information :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (pointer: coarse) { #cookie-information > button { min-height: 44px; } }
@media print { #cookie-information { display: none; } }

#cookie-information > strong { display: flex; align-items: center; gap: 8px; }
#cookie-information > strong > img { width: 20px; height: 20px; flex: 0 0 20px; }

/* Footer-Linkgruppen gleichmäßig über die gesamte Breite zentrieren. */
.site-footer .footer-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.site-footer .footer-columns section { justify-self: center; align-items: flex-start; text-align: left; width: max-content; max-width: 100%; min-width: 0; }
.site-footer .footer-columns a { justify-content: flex-start; max-width: 100%; }
@media (max-width: 760px) {
	.site-footer .footer-columns { grid-template-columns: 1fr; gap: 28px; }
}

.voucher-result { margin-top: 20px; padding: 20px; background: #f0f0ee; color: #17171b; border-left: 3px solid var(--orange); }
.voucher-result[hidden] { display: none; }
.voucher-result > strong { display: block; margin: 6px 0; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.15; }
.voucher-result > p { margin: 8px 0 0; }
#voucher-form button:disabled { cursor: wait; opacity: .65; }

/* Die redaktionelle Topmarken-Auswahl bleibt auch bei Invertierung sichtbar. */
.brand-provider-grid .is-top-brand, .accessory-brand-grid .is-top-brand { border-top: 5px solid var(--orange); box-shadow: none; }
.brand-provider-grid .top-brand-badge, .accessory-brand-grid .top-brand-badge { box-sizing: border-box; white-space: nowrap; flex: 0 0 auto; position: relative; z-index: 3; display: inline-flex; width: fit-content; align-items: center; padding: 4px 9px; margin: 0 0 10px; background: var(--orange); color: #fff; font: 400 .7rem/1.3 'Grand Holiday Sans', sans-serif; letter-spacing: .04em; }

.content-load-error .header, .content-load-error .site-footer { display: none; }

.heading-accent { font-family: 'Grand Holiday Sans', sans-serif; font-style: normal; font-weight: 400; letter-spacing: -.01em; }

.finder-step-copy { min-width: 0; }
.finder-step-copy > strong { display: block; font: inherit; }
.finder-step-answer { display: block; margin-top: 4px; color: color-mix(in srgb, var(--orange) 55%, white); font-size: .78rem; font-weight: 400; line-height: 1.4; overflow-wrap: anywhere; }
@media (max-width: 760px) {
	.finder-step-answer { font-size: .65rem; }
}

.finder-sidebar li:has(.finder-step-edit) { padding: 0; }
.finder-sidebar .finder-step-edit { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 44px; padding: 18px 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.finder-sidebar .finder-step-edit:hover { color: color-mix(in srgb, var(--orange) 55%, white); background: transparent; }
.finder-sidebar .finder-step-edit:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (max-width: 760px) {
	.finder-sidebar .finder-step-edit { flex-direction: column; gap: 8px; padding: 8px 0; text-align: center; }
}

.branch-map-unit { --branch-corner: 5px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.branch-map-unit > .branch { flex: 1; border-radius: var(--branch-corner); }
.branch-map-unit > :is(.branch-store-photo, .branch-location-map) { border-radius: var(--branch-corner); overflow: hidden; }
.branch-location-map { height: 280px; width: 100%; background: #f2f2f0; isolation: isolate; z-index: 0; font-family: inherit; }
/* Nur die Kartenbilder entsättigen: Marker, Bedienelemente und Quellen bleiben unverändert. */
.branch-location-map .leaflet-tile-pane { filter: grayscale(1) brightness(1.09) contrast(.78); }
.branch-location-map .leaflet-control-attribution { font-size: 10px; line-height: 1.5; }
.branch-location-map .leaflet-popup-content p { white-space: pre-line; margin: 8px 0 0; }
.branch-map-marker { background: transparent; border: 0; }
.branch-map-marker > span { display: block; width: 28px; height: 28px; background: var(--orange); border: 3px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 6px #0005; }
.branch-map-marker > span::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #17171b; }
.branch-map-note { margin-top: 16px; }
@media (max-width: 760px) { .branch-location-map { height: 240px; } }

.branch-store-photo { aspect-ratio: 16 / 9; width: 100%; overflow: hidden; background: #f0f0ee; display: grid; place-items: center; color: #626267; }
.branch-store-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.branch-store-photo [hidden] { display: none; }
.branch-store-photo span { font-size: .85rem; }

/* Gespeicherter Bildfokus hat Vorrang vor alten Parallax- und Hover-Zuschnitten. */
.scene-media img[data-managed-crop] { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: none; }
.mega-story img[data-managed-crop] { transform: none; }
.branch-store-photo { position: relative; }
.branch-store-photo img[data-managed-crop] { position: absolute; inset: 0; width: 100%; height: 100%; }
.ride-distance figure, .family-everyday figure, .leasing-hero figure { overflow: hidden; }
.ride-distance figure img[data-managed-crop], .family-everyday figure img[data-managed-crop] { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

.model-description:not(.is-expanded){display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.model-description-toggle{display:inline-flex;align-items:center;padding:0;margin:0 0 16px;border:0;background:transparent;color:inherit;font-family:'Grand Holiday Sans',sans-serif;cursor:pointer}
.model-description-toggle[hidden]{display:none}
.model-description-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:4px}


/* Aktive Filter direkt rechts neben Zurücksetzen, Trefferanzahl am rechten Rand. */
.catalog-section .filters > .filter-summary {
	grid-column: 3 / -1;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.catalog-section .filter-summary > .active-filters {
	flex: 1 1 auto;
	min-width: 0;
}
.catalog-section .filter-summary > #result-count {
	flex: 0 0 auto;
	margin: 0 0 0 auto;
	text-align: right;
	font-size: .85rem;
	line-height: 1.4;
}
@media (max-width: 760px) {
	.catalog-section .filters > .filter-summary {
		grid-column: 1 / -1;
		flex-wrap: wrap;
	}
}

/* Rahmengröße als deutlich lesbare, runde Plakette in der Verfügbarkeitstabelle. */
.variant-table .variant-size {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 32px;
	min-height: 28px;
	padding: 4px 8px;
	border-radius: 999px;
	background: #000;
	color: #fff;
	font-size: .78rem;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
}

/* Existing product-story layout; only manual carousel controls are added. */
.home-model-controls { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.home-model-controls .button { min-width: 40px; padding: 8px 12px; }
.home-model-controls > span { font-variant-numeric: tabular-nums; font-size: .85rem; }

/* Contain the sideways model transition without changing the story grid. */
.ride-product.has-model-carousel { overflow: hidden; }

/* Product image credit on the homepage. */
.ride-product .story-bike figcaption { text-align: right; padding-right: 0; }

/* Manual model dots sit below the existing two-column story. */
.ride-product.has-model-carousel { padding-bottom: 100px; }
.home-model-controls.home-model-dots { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); margin: 0; gap: 4px; justify-content: center; white-space: nowrap; }
.home-model-dots .home-model-dot { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; border: 0; background: transparent; border-radius: 50%; cursor: pointer; }
.home-model-dot > span { width: 8px; height: 8px; background: #232323; border-radius: 50%; opacity: .3; }
.home-model-dot[aria-current="true"] > span { background: var(--orange); opacity: 1; }
.home-model-dot:focus-visible, .home-model-pause:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.home-model-dots .home-model-pause { background: transparent; border: 0; padding: 8px; color: inherit; font: inherit; font-size: .75rem; cursor: pointer; }
@media (max-width: 760px) {
	.home-model-controls.home-model-dots { bottom: 22px; }
}

.detail .detail-stage .product-visual figcaption { text-align: right; padding-right: 0; }

/* Blend the moving image group itself so white photo backgrounds stay invisible during transforms. */
.ride-product.has-model-carousel { isolation: isolate; }
.ride-product.has-model-carousel > .story-bike { mix-blend-mode: multiply; background: transparent; }

/* Keep the active model dot centered; surrounding dots move around it. */
.home-model-dot-track { position: relative; height: 32px; }
.home-model-dots .home-model-dot-track .home-model-dot { position: absolute; left: 50%; top: 0; transform: translateX(calc(var(--dot-offset) * 36px - 16px)); }

/* Nearby model dots are larger; hover and keyboard focus reveal the model name. */
.home-model-dot-track .home-model-dot > span:first-child { transform: scale(var(--dot-scale, 1)); transition: transform .25s ease, opacity .25s ease, background-color .25s ease; }
.home-model-dot-track .home-model-dot:hover > span:first-child,
.home-model-dot-track .home-model-dot:focus-visible > span:first-child { transform: scale(1.2); opacity: 1; background: var(--orange); }
.home-model-dot-track .home-model-dot > .home-model-dot-label { position: absolute; left: 50%; bottom: calc(100% + 6px); width: max-content; max-width: min(260px, 75vw); height: auto; padding: 7px 10px; border-radius: 4px; background: #232323; color: #fff; font-size: .72rem; line-height: 1.35; white-space: normal; text-align: center; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.home-model-dot-track .home-model-dot:hover > .home-model-dot-label,
.home-model-dot-track .home-model-dot:focus-visible > .home-model-dot-label { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.home-model-dot-track .home-model-dot:hover,
.home-model-dot-track .home-model-dot:focus-visible { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
	.home-model-dot-track .home-model-dot > span { transition: none; }
}

/* Markenlogo und Modellbezeichnung in der Karussell-Bildunterschrift. */
.story-caption.story-caption-with-logo {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.story-caption-with-logo .manufacturer-logo {
	margin: 0;
	width: 112px;
	min-height: 0;
}
.story-caption-with-logo .manufacturer-logo img {
	display: block;
	width: 112px;
	height: 26px;
	object-fit: contain;
	object-position: left center;
}

/* Katalogfilter als zusammenhängende Fläche mit klaren Auswahlzuständen. */
body .catalog-section .explorer-layout .filters {
	background: #f1f1f1;
	border: 0;
	padding: clamp(14px, 2vw, 22px);
}
body .catalog-section .filters > label > :is(select, input[type="search"]) {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	font-weight: 400;
	letter-spacing: normal;
	color: #17171b;
	border: 1px solid #17171b;
}
body .catalog-section .filters > label > select.is-filter-active {
	font-weight: 700;
	color: #ff3695;
	border-color: #ff3695;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23ff3695' stroke-width='1.5'/%3E%3C/svg%3E");
}
body .catalog-section .filters select option {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	font-weight: 400;
	color: #17171b;
	background: #fff;
}
@media (forced-colors: active) {
	body .catalog-section .filters > label > select.is-filter-active {
		color: Highlight;
		border-color: Highlight;
		background-image: none;
	}
}

/* Exakte CI-Farbe auf transparenten Markenlogos; Originaldateien bleiben erhalten. */
.brand-orange-filter { flood-color: var(--orange); }
body .header .mega-column .mega-brand-logo:is(:hover, :focus-visible) {
	color: var(--orange);
}
body .header .mega-column .mega-brand-logo:is(:hover, :focus-visible) .manufacturer-logo img {
	filter: url("#fulland-brand-orange");
}
@media (forced-colors: active) {
	body .header .mega-column .mega-brand-logo:is(:hover, :focus-visible) .manufacturer-logo img {
		filter: none;
	}
}

/* Einheitliche Links in sämtlichen Navigationszuständen. */
body nav a,
body nav a:is(:hover, :focus, :focus-visible, :active, [aria-current]),
body .header #navigation a,
body .header #navigation a:is(:hover, :focus, :focus-visible, :active, [aria-current]) {
	text-decoration: none;
}

/* Schwebender Katalogfilter: gleiche Außenkanten und Rundung wie der Header. */
body .catalog-section {
	width: 100%;
	max-width: none;
	padding-inline: var(--catalog-filter-inset, 4vw);
}
body .catalog-section .explorer-layout {
	display: block;
}
body .catalog-section .explorer-layout .filters {
	position: sticky;
	top: var(--catalog-filter-top, 96px);
	z-index: 150;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px 16px;
	margin-bottom: 20px;
	border-radius: var(--catalog-filter-radius, 12px);
	box-shadow: none;
	max-height: calc(100svh - var(--catalog-filter-top, 96px) - 120px);
	overflow-y: auto;
	scroll-padding: 12px;
}
body .catalog-section .filters.is-pinned {
	box-shadow: 0 10px 35px #00000024;
}
body .catalog-section .filters > .eyebrow {
	grid-column: 1 / -1;
}
@media (max-width: 1100px) {
	body .catalog-section .explorer-layout .filters {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 760px) {
	body .catalog-section .explorer-layout .filters {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		max-height: min(45svh, calc(100svh - var(--catalog-filter-top, 84px) - 24px));
	}
}
@media print {
	body .catalog-section .explorer-layout .filters {
		position: static;
		max-height: none;
		overflow: visible;
		box-shadow: none;
	}
}

/* Kompakter Suchkriterien-Block mit gut bedienbaren Touch-Flächen. */
body .catalog-section .explorer-layout .filters {
	gap: 8px 10px;
	padding: 12px 14px;
	margin-bottom: 16px;
}
body .catalog-section .filters > .eyebrow {
	font-size: .76rem;
	line-height: 1.2;
	gap: 8px;
}
body .catalog-section .filters > .eyebrow .ui-icon {
	width: 14px;
	height: 14px;
}
body .catalog-section .filters > label {
	font-size: .66rem;
	line-height: 1.2;
	gap: 4px;
}
body .catalog-section .filters > label > :is(select, input[type="search"]) {
	min-height: 30px;
	height: 30px;
	padding: 4px 10px;
	font-size: .76rem;
	line-height: 20px;
}
body .catalog-section .filters > label > select {
	padding-right: 27px;
	background-position: right 9px center;
	background-size: 10px 7px;
}
body .catalog-section .filters .sale-filter,
body .catalog-section .filters .filter-reset {
	min-height: 30px;
	padding: 4px 9px;
	font-size: .74rem;
	line-height: 20px;
	gap: 7px;
}
body .catalog-section .filters .filter-reset .ui-icon {
	width: 14px;
	height: 14px;
}
body .catalog-section .filter-summary {
	gap: 8px;
}
body .catalog-section .filter-summary > .active-filters {
	gap: 5px;
	font-size: .7rem;
}
body .catalog-section .filter-summary .active-filters button {
	min-height: 26px;
	padding: 3px 8px;
	font-size: .68rem;
	line-height: 18px;
}
body .catalog-section .filter-summary .active-filters button span {
	margin-left: 6px;
}
body .catalog-section .filter-summary > #result-count {
	font-size: .74rem;
	line-height: 1.3;
}
@media (pointer: coarse) {
	body .catalog-section .filters > label > :is(select, input[type="search"]) {
		min-height: 44px;
		height: 44px;
		padding-block: 10px;
		font-size: 16px;
	}
	body .catalog-section .filters .sale-filter,
	body .catalog-section .filters .filter-reset,
	body .catalog-section .filter-summary .active-filters button {
		min-height: 44px;
	}
}

/* Beim Andocken bleiben Titel und Aktionszeile sichtbar. */
body .catalog-section .filters.is-pinned:not(:has(> label:not(.sale-filter):focus-within)) > label:not(.sale-filter) {
	display: none;
}
.filter-collapse-space {
	height: 0;
	pointer-events: none;
}
body .catalog-section .filter-summary > #result-count {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 4px 8px;
}
body .catalog-section #result-count > span {
	font-size: .62rem;
	font-weight: 400;
	letter-spacing: .035em;
}
body .catalog-section #result-count > strong {
	font-size: .9rem;
	font-weight: 750;
	line-height: 1.2;
	white-space: nowrap;
}
@media print {
	body .catalog-section .filters.is-pinned > label:not(.sale-filter) { display: flex; }
	.filter-collapse-space { display: none; }
}