/* ==========================================================================
   price-landingpages.css
   Gemeinsames Stylesheet für alle Price Landingpages.

   Einbindung: NACH /layouts/price2/css/style.css laden.
   Bootstrap bringt das Shopsystem bereits selbst mit — hier wird keine
   weitere Bootstrap-Kopie geladen.

   WICHTIG: Alles ist auf .price-lp gescoped. Der Wrapper
   <div class="price-lp"> muss den kompletten Seiteninhalt umschliessen,
   sonst wirken die Overrides auf den ganzen Shop.

   Konvention: projekteigene Klassen tragen das Präfix "price-".
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand Tokens (global, reine Variablen ohne Wirkung)
   -------------------------------------------------------------------------- */
:root {
	--price-red: #e42312;
	--price-red-dark: #c01d0f;
	--price-black: #000000;
	--price-white: #ffffff;
	--price-blue: #00a9c9;
	--price-sand: #f1efe8;
	--price-stone: #e0e0df;
	--price-stone-line: #e0ded4;
	--price-line: #dedbd2;
	--price-text: #111111;
	--price-muted: #5f5e5a;
	--price-content: 1180px;
}

/* --------------------------------------------------------------------------
   2. Bootstrap-Theming — ausschliesslich innerhalb der Landingpages
   -------------------------------------------------------------------------- */
.price-lp {
	--bs-body-font-family: "Neulis Neue", "Trebuchet MS", Arial, sans-serif;
	--bs-body-color: var(--price-text);
	--bs-body-bg: var(--price-white);
	--bs-body-line-height: 1.65;
	--bs-link-color: var(--price-text);
	--bs-link-hover-color: var(--price-red);
	--bs-border-color: var(--price-line);
	--bs-heading-color: var(--price-text);

	font-family: var(--bs-body-font-family);
	color: var(--bs-body-color);
	line-height: var(--bs-body-line-height);
}

/* :not(.btn) ist wichtig — sonst überschreibt diese Regel die Button-Farben,
   weil die CTAs <a>-Elemente sind und .price-lp a spezifischer ist als .btn */
.price-lp a:not(.btn) {
	color: var(--bs-link-color);
}

.price-lp a:not(.btn):hover {
	color: var(--bs-link-hover-color);
}

/* Inline-Links im Fliesstext: fett mit rotem Unterstrich.
   Bewusst nur auf <p> beschränkt — Breadcrumb, Pills und Linklisten stehen
   in <li> und sollen keinen Unterstrich bekommen. */
.price-lp p a:not(.btn):not(.price-about__link) {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--price-red);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.price-lp p a:not(.btn):not(.price-about__link):hover {
	color: var(--price-red);
}

/* Auf dunklem und rotem Grund wäre ein roter Unterstrich unsichtbar.
   Die Selektoren müssen die Negationen oben wiederholen, sonst gewinnt
   die allgemeine Regel über die Spezifität. */
.price-lp .price-deep p a:not(.btn):not(.price-about__link),
.price-lp .price-about p a:not(.btn):not(.price-about__link) {
	color: var(--price-white);
	text-decoration-color: var(--price-white);
}

.price-lp .price-deep p a:not(.btn):not(.price-about__link):hover,
.price-lp .price-about p a:not(.btn):not(.price-about__link):hover {
	color: var(--price-white);
	opacity: .8;
}

.price-lp .container {
	--bs-gutter-x: 2.5rem;
	max-width: calc(var(--price-content) + var(--bs-gutter-x));
}

/* Ab lg nutzen die Produkt- und Deep-Content-Zeilen g-lg-5 (48px Rinne),
   also -24px negative Ränder. Der Container braucht mindestens ebenso viel
   Innenabstand, sonst ragen die Zeilen 4px über den Viewport hinaus und
   erzeugen horizontales Scrollen. */
@media (min-width: 992px) {
	.price-lp .container {
		--bs-gutter-x: 3rem;
	}
}

@media (max-width: 600px) {
	.price-lp .container {
		--bs-gutter-x: 1.75rem;
	}
}

/* --------------------------------------------------------------------------
   3. Typografie
   -------------------------------------------------------------------------- */
.price-lp h1,
.price-lp h2,
.price-lp h3,
.price-lp h4 {
	line-height: 1.08;
	margin-top: 0;
	font-weight: 700;
	color: var(--price-text);
}

.price-lp h1 {
	font-size: clamp(2rem, 4.4vw, 3rem);
	margin-bottom: 1.75rem;
}

.price-lp h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-bottom: 1.625rem;
}

.price-lp h3 {
	font-size: 1.625rem;
	margin-bottom: .875rem;
}

.price-lp p {
	margin: 0 0 1.125rem;
}

.price-lp img {
	max-width: 100%;
	height: auto;
}

.price-lp .price-lead {
	max-width: 47.5rem;
	font-size: 1.125rem;
	color: var(--price-text);
}

.price-lp .price-muted {
	color: var(--price-muted);
}

.price-lp .price-eyebrow {
	display: block;
	color: var(--price-blue);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .9375rem;
	font-weight: 700;
	margin-bottom: 1rem;
}

.price-lp .price-section {
	padding: 4.5rem 0;
}

.price-lp .price-section-sm {
	padding: 2.625rem 0;
}

@media (max-width: 600px) {
	.price-lp .price-section {
		padding: 3.375rem 0;
	}
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.price-lp .btn {
	--bs-btn-border-radius: 3px;
	--bs-btn-font-weight: 700;
	--bs-btn-padding-y: .75rem;
	--bs-btn-padding-x: 1.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.125rem;
}

.price-lp .btn-primary {
	--bs-btn-bg: var(--price-red);
	--bs-btn-border-color: var(--price-red);
	--bs-btn-color: var(--price-white);
	--bs-btn-hover-bg: var(--price-black);
	--bs-btn-hover-border-color: var(--price-black);
	--bs-btn-hover-color: var(--price-white);
	--bs-btn-active-bg: var(--price-black);
	--bs-btn-active-border-color: var(--price-black);
}

.price-lp .btn-outline-dark {
	--bs-btn-border-width: 2px;
	--bs-btn-color: var(--price-black);
	--bs-btn-border-color: var(--price-black);
	--bs-btn-hover-bg: transparent;
	--bs-btn-hover-color: var(--price-red);
	--bs-btn-hover-border-color: var(--price-red);
}

.price-lp .btn-price-ghost {
	--bs-btn-border-width: 2px;
	--bs-btn-color: var(--price-red);
	--bs-btn-border-color: var(--price-red);
	--bs-btn-bg: transparent;
	--bs-btn-hover-bg: var(--price-red);
	--bs-btn-hover-color: var(--price-white);
	--bs-btn-hover-border-color: var(--price-red);
	min-width: 13.75rem;
	text-transform: uppercase;
	letter-spacing: .1em;
}

.price-lp .btn-price-block {
	--bs-btn-bg: var(--price-red);
	--bs-btn-border-color: var(--price-red);
	--bs-btn-color: var(--price-white);
	--bs-btn-hover-bg: var(--price-black);
	--bs-btn-hover-border-color: var(--price-black);
	--bs-btn-hover-color: var(--price-white);
	--bs-btn-border-radius: 2px;
	text-transform: uppercase;
	letter-spacing: .12em;
}

.price-lp .price-pill {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: .5625rem 1.0625rem;
	border: 1px solid var(--price-line);
	border-radius: 3px;
	text-decoration: none;
	font-weight: 700;
}

.price-lp .price-pill:hover {
	border-color: var(--price-red);
	color: var(--price-red);
}

/* --------------------------------------------------------------------------
   5. Breadcrumb
   -------------------------------------------------------------------------- */
.price-lp .price-breadcrumb {
	background: var(--price-black);
	color: var(--price-white);
	padding: .875rem 0;
	font-size: .875rem;
}

.price-lp .price-breadcrumb .breadcrumb {
	--bs-breadcrumb-divider-color: #aaaaaa;
	--bs-breadcrumb-item-padding-x: .625rem;
	--bs-breadcrumb-margin-bottom: 0;
	--bs-breadcrumb-item-active-color: var(--price-white);
}

.price-lp .price-breadcrumb .breadcrumb a {
	color: var(--price-white);
	text-decoration: none;
}

.price-lp .price-breadcrumb .breadcrumb a:hover {
	color: var(--price-white);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   6. Kategorie-Banner
   -------------------------------------------------------------------------- */
.price-lp .price-banner {
	position: relative;
	min-height: 30rem;
	overflow: hidden;
	color: var(--price-white);
	background-color: var(--price-black);
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .18) 64%, rgba(0, 0, 0, .72) 100%), var(--price-banner-image, none);
	background-size: cover;
	background-position: 28% center;
	background-repeat: no-repeat;
}

.price-lp .price-banner__inner {
	min-height: 30rem;
	/* padding-block statt Kurzschreibweise: sonst überschreibt der Banner das
	   seitliche Padding des Containers und der Titel klebt am Bildschirmrand. */
	padding-block: 4rem;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	text-align: right;
}

.price-lp .price-banner__title {
	position: relative;
	display: inline-block;
	padding-bottom: 1.625rem;
	margin: 0;
	/* Lange Titel wie «E-BIKE MODELLE» müssen auf schmalen Screens mitskalieren,
	   sonst laufen sie über den Rand. Ab Tablet bleibt es bei 3rem. */
	font-size: clamp(2rem, 7.5vw, 3rem);
	font-weight: 700;
	line-height: .85;
	letter-spacing: -.04em;
	text-shadow: 0 3px 18px rgba(0, 0, 0, .35);
}

.price-lp .price-banner__title::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: clamp(3.5rem, 6vw, 5.375rem);
	height: 4px;
	background: var(--price-red);
}

@media (max-width: 600px) {
	.price-lp .price-banner {
		min-height: 0;
		aspect-ratio: 390 / 594;
		background-position: 42% center;
	}

	.price-lp .price-banner__inner {
		min-height: 0;
		height: 100%;
		padding-block: 2.125rem;
	}

	.price-lp .price-banner__title {
		padding-bottom: 1.125rem;
	}
}

/* --------------------------------------------------------------------------
   7. Produkt-Feature
   -------------------------------------------------------------------------- */
.price-lp .price-product {
	padding: 2rem 0 0 0;
	margin-top: 2rem;
	border-top: 1px solid var(--price-line);
}

.price-lp .price-product__media {
	min-height: 28.75rem;
	background: var(--price-sand);
	display: grid;
	place-items: center;
	padding: 0.125rem;
	position: relative;
	overflow: hidden;
}

.price-lp .price-product__media::after {
	content: attr(data-label);
	font-size: clamp(1.625rem, 4vw, 3.375rem);
	font-weight: 700;
	text-align: center;
	line-height: 1.05;
	max-width: 80%;
}

.price-lp .price-product__media.has-image::after {
	content: none;
}

.price-lp .price-product__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	position: relative;
	z-index: 1;
}

@media (max-width: 600px) {
	.price-lp .price-product__media {
		min-height: 20rem;
	}
}

/* --------------------------------------------------------------------------
   8. Kontakt-Steps
   -------------------------------------------------------------------------- */
.price-lp .price-steps {
	position: relative;
	background: #f3f3f3;
	overflow: hidden;
}

.price-lp .price-steps__way {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	opacity: .11;
}

.price-lp .price-steps__way path {
	stroke-linecap: round;
	stroke-linejoin: round;
}

.price-lp .price-steps__grid {
	position: relative;
	z-index: 1;
	border-left: 1px solid var(--price-white);
	border-right: 1px solid var(--price-white);
}

.price-lp .price-step {
	min-height: 14.6875rem;
	padding: 2.25rem clamp(1.25rem, 3vw, 2.75rem);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Oben ausrichten statt zentrieren: nur so beginnen die Textblöcke beider
	   Spalten auf derselben Höhe. Der Button rutscht per margin-top: auto nach
	   unten, dadurch stehen auch die Buttons auf einer Linie. */
	justify-content: flex-start;
}

.price-lp .price-step + .price-step {
	border-left: 1px solid var(--price-white);
}

.price-lp .price-step h3 {
	max-width: 26.875rem;
	margin-bottom: .75rem;
}

.price-lp .price-step__copy {
	max-width: 32.5rem;
	margin-bottom: 1.125rem;
	color: var(--price-muted);
}

.price-lp .price-step .btn {
	margin-top: auto;
}

/* Nicht mehr verwendet: die E-Mail-Adresse steht nur noch hinter dem Button. */
.price-lp .price-step__details {
	margin: 0 0 1.125rem;
	font-weight: 700;
	color: var(--price-black);
}

.price-lp .price-step__details a {
	text-decoration: none;
	border-bottom: 1px solid var(--price-red);
}

@media (min-width: 768px) {
	/* Platz für zwei Zeilen Überschrift reservieren. Bricht die eine Überschrift
	   um und die andere nicht, bleiben die Texte darunter trotzdem bündig.
	   Wert = 2 Zeilen bei line-height 1.08 und font-size 1.625rem. */
	.price-lp .price-step h3 {
		min-height: 3.51rem;
	}
}

@media (max-width: 767.98px) {
	.price-lp .price-step + .price-step {
		border-left: 0;
		border-top: 1px solid var(--price-white);
	}

	.price-lp .price-step {
		min-height: 13.75rem;
		padding-block: 1.75rem;
	}
}

/* --------------------------------------------------------------------------
   9. Kategorie-Karten
   -------------------------------------------------------------------------- */
.price-lp .price-cat-card {
	--bs-card-border-color: #e4e4e4;
	--bs-card-border-radius: 0;
	--bs-card-inner-border-radius: 0;
	--bs-card-spacer-y: 1.5rem;
	--bs-card-spacer-x: 1.5rem;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .04);
	height: 100%;
}

.price-lp .price-cat-card__media {
	position: relative;
	height: 11.875rem;
	padding: 1.25rem;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background-color: #dbdbdb;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .22)), var(--price-card-image, none);
	background-size: cover;
	background-position: center center;
}

.price-lp .price-cat-card__media span {
	position: relative;
	z-index: 1;
	font-size: 2.375rem;
	line-height: .95;
	font-weight: 700;
	color: var(--price-white);
	text-shadow: 0 2px 10px rgba(0, 0, 0, .38);
	max-width: 70%;
}

.price-lp .price-cat-card .card-body {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: .875rem;
}

.price-lp .price-cat-card .card-body h3 {
	margin-bottom: 0;
}

.price-lp .price-cat-card .card-body p {
	color: var(--price-muted);
	margin-bottom: 0;
}

.price-lp .price-cat-card .btn {
	margin-top: auto;
}

/* --------------------------------------------------------------------------
   10. Deep Content
   -------------------------------------------------------------------------- */
.price-lp .price-deep {
	background: var(--price-black);
	color: var(--price-white);
}

.price-lp .price-deep h2 {
	color: var(--price-white);
	margin-bottom: 1.25rem;
}

.price-lp .price-deep p {
	color: rgba(255, 255, 255, .88);
	line-height: 1.7;
}

.price-lp .price-deep a {
	color: var(--price-white);
	text-decoration-color: rgba(255, 255, 255, .7);
}

.price-lp .price-deep__visual {
	background: #111111;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}

.price-lp .price-deep__visual img {
	display: block;
	width: 100%;
}

/* --------------------------------------------------------------------------
   11. FAQ — bewusst ohne Bootstrap-JS, funktioniert versionsunabhängig
   -------------------------------------------------------------------------- */
.price-lp .price-faq {
	background: #fafafa;
}

.price-lp .price-faq details {
	border-top: 1px solid var(--price-line);
	padding: 1.375rem 0;
}

.price-lp .price-faq details:last-of-type {
	border-bottom: 1px solid var(--price-line);
}

.price-lp .price-faq summary {
	cursor: pointer;
	font-size: 1.25rem;
	font-weight: 700;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.price-lp .price-faq summary::-webkit-details-marker {
	display: none;
}

.price-lp .price-faq summary::after {
	content: "+";
	color: var(--price-blue);
	font-size: 1.5rem;
	line-height: 1;
}

.price-lp .price-faq details[open] summary::after {
	content: "−";
}

.price-lp .price-faq details p {
	max-width: 53.125rem;
	margin: 1rem 0 0;
}

/* --------------------------------------------------------------------------
   12. Verwandte Kategorien / Suchanfragen
   -------------------------------------------------------------------------- */
.price-lp .price-linklist {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.price-lp .price-linklist a {
	display: inline-block;
	padding: .625rem .875rem;
	border: 1px solid var(--price-line);
	text-decoration: none;
	font-weight: 700;
}

.price-lp .price-linklist a:hover {
	color: var(--price-red);
	border-color: var(--price-red);
}

/* --------------------------------------------------------------------------
   13. About-Teaser + Fakten-Leiste
   -------------------------------------------------------------------------- */
.price-lp .price-about {
	background: var(--price-red);
	color: var(--price-white);
	padding-bottom: 0;
	overflow: hidden;
}

.price-lp .price-about h2 {
	color: var(--price-white);
	margin-bottom: 1.25rem;
}

.price-lp .price-about p {
	color: rgba(255, 255, 255, .9);
	line-height: 1.7;
}

.price-lp .price-about__link {
	display: inline-block;
	width: fit-content;
	padding-bottom: 3px;
	border-bottom: 2px solid var(--price-white);
	color: var(--price-white);
	font-weight: 700;
	text-decoration: none;
}

.price-lp .price-about__link:hover {
	color: var(--price-white);
	opacity: .8;
}

.price-lp .price-about__media {
	background: #b91d11;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .18);
	box-shadow: 0 12px 34px rgba(100, 0, 0, .24);
}

.price-lp .price-about__media img {
	display: block;
	width: 100%;
	aspect-ratio: 1.755 / 1;
	object-fit: cover;
}

@media (max-width: 991.98px) {
	.price-lp .price-about__media img {
		aspect-ratio: 16 / 9;
	}
}

.price-lp .price-facts {
	margin-top: clamp(1.875rem, 4vw, 3rem);
	background: var(--price-black);
	color: var(--price-white);
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.price-lp .price-fact {
	display: flex;
	align-items: center;
	gap: .875rem;
	min-height: 4.5rem;
	padding: .75rem clamp(1.125rem, 2.4vw, 1.875rem);
}

.price-lp .price-fact + .price-fact {
	border-left: 1px solid rgba(255, 255, 255, .25);
}

.price-lp .price-fact__icon {
	flex: 0 0 3rem;
	width: 3rem;
	height: 3rem;
	padding: .6875rem;
	border: 1px solid rgba(255, 255, 255, .75);
	border-radius: 50%;
}

.price-lp .price-fact__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.price-lp .price-fact strong {
	display: block;
	margin-bottom: 3px;
	font-size: 1.0625rem;
}

.price-lp .price-fact span {
	display: block;
	color: rgba(255, 255, 255, .78);
	font-size: .875rem;
	line-height: 1.35;
}

@media (max-width: 767.98px) {
	.price-lp .price-fact + .price-fact {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .25);
	}
}

/* --------------------------------------------------------------------------
   14. Hinweis-Badge für Entwurfsseiten
   -------------------------------------------------------------------------- */
.price-lp .price-badge-draft {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: #fff4e5;
	border: 1px solid #f0c987;
	color: #7a4b00;
	font-size: .8125rem;
	font-weight: 700;
	padding: .375rem .75rem;
	border-radius: 3px;
	margin-bottom: 1.375rem;
}

/* --------------------------------------------------------------------------
   15. Startseite: Hero-Slider
   Bewusst ohne Bootstrap-Carousel umgesetzt, damit die Seite unabhängig von
   der Bootstrap-Version im Shop funktioniert (gleiche Überlegung wie beim
   FAQ mit <details>). Das Skript liegt am Ende des Fragments.
   -------------------------------------------------------------------------- */
.price-lp .price-hero {
	position: relative;
	background: var(--price-black);
	overflow: hidden;
}

.price-lp .price-hero__slide {
	display: none;
}

.price-lp .price-hero__slide.is-active {
	display: block;
	animation: price-hero-fade .45s ease;
}

@keyframes price-hero-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.price-lp .price-hero__slide.is-active {
		animation: none;
	}
}

.price-lp .price-hero__frame {
	position: relative;
	min-height: clamp(26rem, 60vh, 38.75rem);
	display: flex;
	align-items: flex-end;
}

.price-lp .price-hero__media {
	position: absolute;
	inset: 0;
	background-color: var(--price-black);
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .55) 100%), var(--price-hero-image, none);
	background-size: cover;
	background-position: center 44%;
	background-repeat: no-repeat;
}

.price-lp .price-hero__body {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-bottom: clamp(2.375rem, 6vw, 4.5rem);
	color: var(--price-white);
}

.price-lp .price-hero__body h2 {
	color: var(--price-white);
	font-size: clamp(2rem, 5vw, 4rem);
	line-height: 1.05;
	margin-bottom: .875rem;
	text-shadow: 0 3px 18px rgba(0, 0, 0, .35);
}

.price-lp .price-hero__body p {
	color: var(--price-white);
	font-weight: 700;
	line-height: 1.55;
	max-width: 52ch;
	margin-bottom: 1.625rem;
}

.price-lp .price-hero__body .price-eyebrow {
	color: #ff7466;
	margin-bottom: .875rem;
}

.price-lp .price-hero__nav {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(.875rem, 2.5vw, 1.375rem);
	z-index: 2;
	pointer-events: none;
}

.price-lp .price-hero__nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.price-lp .price-hero__dots,
.price-lp .price-hero__arrows {
	display: flex;
	gap: .5rem;
	pointer-events: auto;
}

.price-lp .price-hero__dot {
	width: 2.75rem;
	height: 4px;
	padding: 0;
	border: none;
	cursor: pointer;
	background: rgba(255, 255, 255, .34);
	transition: background-color .2s ease;
}

.price-lp .price-hero__dot:hover {
	background: rgba(255, 255, 255, .6);
}

.price-lp .price-hero__dot.is-active {
	background: var(--price-red);
}

.price-lp .price-hero__arrows button {
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	background: rgba(0, 0, 0, .42);
	color: var(--price-white);
	border: 1px solid rgba(255, 255, 255, .45);
	transition: background-color .18s ease, border-color .18s ease;
}

.price-lp .price-hero__arrows button:hover {
	background: var(--price-red);
	border-color: var(--price-red);
}

/* --------------------------------------------------------------------------
   16. Startseite: USP-Leiste unter dem Hero
   -------------------------------------------------------------------------- */
.price-lp .price-uspbar {
	background: var(--price-stone);
	border-top: 1px solid var(--price-stone-line);
	border-bottom: 1px solid var(--price-stone-line);
}

.price-lp .price-uspbar__item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.375rem 1.5rem;
	min-height: 6.75rem;
}

.price-lp .price-uspbar__icon {
	flex: 0 0 3.375rem;
	width: 3.375rem;
	height: 3.375rem;
	color: var(--price-red);
}

.price-lp .price-uspbar__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.price-lp .price-uspbar__label {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
}

/* Trennlinien folgen den Bootstrap-Breakpoints der row-cols-Klassen */
@media (min-width: 1200px) {
	.price-lp .price-uspbar__item {
		border-left: 1px solid var(--price-stone-line);
	}

	.price-lp .price-uspbar .col:first-child .price-uspbar__item {
		border-left: 0;
	}
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	.price-lp .price-uspbar__item {
		border-left: 1px solid var(--price-stone-line);
	}

	.price-lp .price-uspbar .col:nth-child(3n+1) .price-uspbar__item {
		border-left: 0;
	}

	.price-lp .price-uspbar .col:nth-child(n+4) .price-uspbar__item {
		border-top: 1px solid var(--price-stone-line);
	}
}

@media (max-width: 767.98px) {
	.price-lp .price-uspbar .col + .col .price-uspbar__item {
		border-top: 1px solid var(--price-stone-line);
	}
}

/* --------------------------------------------------------------------------
   17. Startseite: Intro mit Kennzahlen-Kacheln
   -------------------------------------------------------------------------- */
.price-lp .price-intro h1 {
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: -.015em;
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	line-height: 1.08;
}

.price-lp .price-intro p {
	color: var(--price-muted);
}

.price-lp .price-keyfacts {
	margin: 0;
}

.price-lp .price-keyfacts > .col > div {
	background: var(--price-blue);
	color: var(--price-white);
	padding: 1.5rem 1.375rem;
	min-height: 9.25rem;
	height: 100%;
}

.price-lp .price-keyfacts dt {
	font-size: clamp(2.125rem, 4vw, 2.875rem);
	font-weight: 800;
	line-height: 1;
	margin-bottom: .75rem;
}

.price-lp .price-keyfacts dd {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   18. Startseite: Kategorie-Teaser mit Foto
   Bewusst mit <img> statt Hintergrundbild, damit Alt-Text und natives
   Lazyloading greifen. Die reine Bildkachel der Landingpages heisst
   .price-cat-card und bleibt davon unberührt.
   -------------------------------------------------------------------------- */
.price-lp .price-teaser {
	--bs-card-border-color: var(--price-stone-line);
	--bs-card-border-radius: 0;
	--bs-card-inner-border-radius: 0;
	--bs-card-spacer-y: 1.25rem;
	--bs-card-spacer-x: 1.25rem;
	height: 100%;
	transition: border-color .18s ease;
}

.price-lp .price-teaser:hover {
	border-color: var(--price-black);
}

.price-lp .price-teaser__media {
	aspect-ratio: 4 / 3;
	background: var(--price-stone);
	overflow: hidden;
}

.price-lp .price-teaser__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.price-lp .price-teaser .card-body {
	display: flex;
	flex-direction: column;
}

.price-lp .price-teaser h3 {
	margin-bottom: .75rem;
	font-size: 1.1875rem;
}

.price-lp .price-teaser h3 a {
	text-decoration: none;
}

.price-lp .price-teaser h3 a:hover {
	color: var(--price-red);
}

.price-lp .price-teaser__desc {
	flex: 1;
	color: var(--price-muted);
	line-height: 1.7;
}

.price-lp .price-teaser__more {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-size: .875rem;
	font-weight: 700;
	color: var(--price-red);
	text-decoration: none;
}

.price-lp .price-teaser__more:hover {
	color: var(--price-red);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   19. Startseite: Händlerfinder
   -------------------------------------------------------------------------- */
.price-lp .price-dealers {
	background: var(--price-stone);
}

.price-lp .price-dealers .price-lead {
	max-width: 52ch;
	margin-bottom: 1.625rem;
}

/* .price-finder umschliesst jetzt nur noch den Button — das Eingabefeld ist
   entfallen, weil die Händlersuche eine eigene Seite hat. Die input-Regeln
   bleiben ungenutzt stehen, falls das Feld je zurückkommt. */
.price-lp .price-finder {
	display: flex;
	gap: .625rem;
	flex-wrap: wrap;
	margin-bottom: .875rem;
}

.price-lp .price-finder input {
	flex: 1 1 13rem;
	min-width: 0;
	padding: .875rem 1rem;
	font: inherit;
	font-size: .9375rem;
	border: 1px solid var(--price-stone-line);
	background: var(--price-white);
}

.price-lp .price-finder input::placeholder {
	color: #a9a79d;
}

.price-lp .price-dealers__note {
	font-size: 1rem;
	color: var(--price-muted);
}

.price-lp .price-map {
	background: var(--price-white);
	border: 1px solid var(--price-stone-line);
	padding: 1.125rem;
}

.price-lp .price-map svg {
	width: 100%;
	height: auto;
	display: block;
}

.price-lp .price-map__legend {
	display: flex;
	gap: 1.125rem;
	flex-wrap: wrap;
	margin-top: .75rem;
	font-size: .78125rem;
	color: var(--price-muted);
}

.price-lp .price-map__legend span {
	display: inline-flex;
	align-items: center;
	gap: .4375rem;
}

.price-lp .price-map__key {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	display: inline-block;
}

/* --------------------------------------------------------------------------
   20. Startseite: USP-Mosaik
   Bewusst als CSS-Grid statt Bootstrap-Grid: die grosse Kachel überspannt
   zwei Zeilen, das lässt sich mit row/col nicht abbilden.
   -------------------------------------------------------------------------- */
.price-lp .price-mosaic {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 1.125rem;
}

.price-lp .price-mosaic__card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 15rem;
	padding: 1.75rem;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid rgba(0, 0, 0, .08);
	background-color: var(--price-black);
	background-image: var(--price-mosaic-image, none);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	transition: transform .18s ease, box-shadow .18s ease;
}

.price-lp .price-mosaic__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 30px rgba(0, 0, 0, .1);
}

.price-lp .price-mosaic__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .4) 45%, rgba(0, 0, 0, .82) 100%);
}

.price-lp .price-mosaic__card--lead {
	grid-column: span 6;
	grid-row: span 2;
}

.price-lp .price-mosaic__card--wide {
	grid-column: span 6;
}

.price-lp .price-mosaic__card--half {
	grid-column: span 3;
}

.price-lp .price-mosaic__num {
	display: block;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: .04em;
	color: var(--price-red);
	margin-bottom: 1.25rem;
}

.price-lp .price-mosaic__card h3 {
	color: var(--price-white);
	font-size: clamp(1.75rem, 2.6vw, 2.625rem);
	line-height: 1.04;
	margin-bottom: .875rem;
	max-width: 16ch;
}

/* Die beiden schmalen Kacheln sind nur ein Viertel breit, dort muss die
   Überschrift kleiner ausfallen, sonst laufen lange Wörter aus der Kachel. */
.price-lp .price-mosaic__card--half h3 {
	font-size: clamp(1.25rem, 1.9vw, 1.625rem);
	max-width: none;
}

.price-lp .price-mosaic__card h3,
.price-lp .price-mosaic__card p {
	overflow-wrap: break-word;
}

.price-lp .price-mosaic__card p {
	color: rgba(255, 255, 255, .94);
	line-height: 1.6;
	max-width: 30ch;
	margin: 0;
}

@media (max-width: 991.98px) {
	.price-lp .price-mosaic__card--lead {
		grid-column: 1 / -1;
		grid-row: span 1;
		min-height: 22.5rem;
	}

	.price-lp .price-mosaic__card--wide,
	.price-lp .price-mosaic__card--half {
		grid-column: span 6;
		min-height: 18.75rem;
	}
}

@media (max-width: 639.98px) {
	.price-lp .price-mosaic__card {
		grid-column: 1 / -1 !important;
		min-height: 18.75rem;
	}
}

/* --------------------------------------------------------------------------
   21. Startseite: News-Teaser
   -------------------------------------------------------------------------- */
.price-lp .price-news__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin-bottom: 2.375rem;
}

.price-lp .price-news-card {
	--bs-card-border-color: var(--price-stone-line);
	--bs-card-border-radius: 0;
	--bs-card-inner-border-radius: 0;
	--bs-card-spacer-y: 1.25rem;
	--bs-card-spacer-x: 1.25rem;
	height: 100%;
	transition: border-color .18s ease;
}

.price-lp .price-news-card:hover {
	border-color: var(--price-black);
}

.price-lp .price-news-card__media {
	aspect-ratio: 16 / 10;
	background: var(--price-stone);
	display: grid;
	place-items: center;
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #a9a79d;
	overflow: hidden;
}

.price-lp .price-news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.price-lp .price-news-card time {
	display: block;
	font-size: .8125rem;
	color: var(--price-muted);
	margin-bottom: .5rem;
}

.price-lp .price-news-card h3 {
	font-size: 1.09375rem;
	margin-bottom: .625rem;
}

.price-lp .price-news-card h3 a {
	text-decoration: none;
}

.price-lp .price-news-card h3 a:hover {
	color: var(--price-red);
}

.price-lp .price-news-card p {
	color: var(--price-muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   22. Kleinteile, die mehrere Startseiten-Blöcke nutzen
   -------------------------------------------------------------------------- */
.price-lp .price-sec-head {
	margin-bottom: 2.375rem;
	max-width: 60ch;
}

.price-lp .price-sec-head h2 {
	margin-bottom: 0;
}

.price-lp .price-sec-head p {
	margin-top: .75rem;
	color: var(--price-muted);
}

.price-lp .price-eyebrow--sub {
	margin: .625rem 0 1.375rem;
	color: var(--price-red);
}

/* Nicht mehr verwendet: die kleinen Pfeile in den CTAs sind auf Kundenwunsch
   entfernt. Regeln bleiben stehen, falls sie zurückkommen. */
.price-lp .price-arrow {
	display: inline-block;
	transition: transform .18s ease;
}

.price-lp .btn:hover .price-arrow {
	transform: translateX(4px);
}

.price-lp .price-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   23. Kategorie-Banner: optionales Mobilbild
   Liegt ein eigener Hochkant-Zuschnitt vor, wird er über
   --price-banner-image-mobile gesetzt. Ohne diese Variable bleibt es beim
   Desktop-Bild, bestehende Seiten ändern sich dadurch nicht.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.price-lp .price-banner {
		background-image: linear-gradient(180deg, rgba(0, 0, 0, .02) 0%, rgba(0, 0, 0, .08) 58%, rgba(0, 0, 0, .45) 100%),
		var(--price-banner-image-mobile, var(--price-banner-image, none));
	}
}

/* --------------------------------------------------------------------------
   24. Bild-Slider in der Produktkachel
   Läuft im Container .price-product__media und ersetzt dort das einzelne
   Bild, sobald mehrere Modellbilder vorliegen. Bewusst ohne Bootstrap-JS,
   damit es unabhängig von der Bootstrap-Version funktioniert.
   Bei nur einem Slide blendet das Skript Pfeile und Punkte aus.
   -------------------------------------------------------------------------- */
.price-lp .price-slider {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.price-lp .price-slider__track {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.price-lp .price-slider__slide {
	display: none;
	margin: 0;
	width: 100%;
}

.price-lp .price-slider__slide.is-active {
	display: block;
	animation: price-slider-fade .35s ease;
}

@keyframes price-slider-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.price-lp .price-slider__slide.is-active {
		animation: none;
	}
}

.price-lp .price-slider__slide img {
	width: 100%;
	height: auto;
	max-height: 24rem;
	object-fit: contain;
}

.price-lp .price-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	color: var(--price-black);
	background: rgba(255, 255, 255, .85);
	border: 1px solid var(--price-line);
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.price-lp .price-slider__arrow:hover {
	background: var(--price-red);
	border-color: var(--price-red);
	color: var(--price-white);
}

.price-lp .price-slider__arrow--prev {
	left: -1.25rem;
}

.price-lp .price-slider__arrow--next {
	right: -1.25rem;
}

/* Auf kleinen Screens stören die Pfeile über dem Velo. Dort genügen
   Wischgeste und Punkte. */
@media (max-width: 767.98px) {
	.price-lp .price-slider__arrow {
		display: none;
	}
}

/* Klickbarer Slide: Bild plus Modellname und Preis, führt zur Produktseite */
.price-lp .price-slider__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.price-lp .price-slider__caption {
	margin-top: .875rem;
	min-height: 3.25rem;
	text-align: center;
}

.price-lp .price-slider__title {
	display: block;
	font-weight: 700;
	font-size: .9375rem;
	line-height: 1.3;
	color: var(--price-text);
}

.price-lp .price-slider__price {
	display: block;
	margin-top: .1875rem;
	font-size: .875rem;
	font-weight: 700;
	color: var(--price-red);
}

.price-lp .price-slider__link:hover .price-slider__title,
.price-lp .price-slider__link:focus-visible .price-slider__title {
	color: var(--price-red);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.price-lp .price-slider__dots {
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin-top: 1rem;
}

.price-lp .price-slider__dot {
	width: 2rem;
	height: 4px;
	padding: 0;
	border: none;
	cursor: pointer;
	background: rgba(0, 0, 0, .18);
	transition: background-color .2s ease;
}

.price-lp .price-slider__dot:hover {
	background: rgba(0, 0, 0, .35);
}

.price-lp .price-slider__dot.is-active {
	background: var(--price-red);
}

.price-lp .price-slider[data-price-slider-single] .price-slider__arrow,
.price-lp .price-slider[data-price-slider-single] .price-slider__dots {
	display: none;
}

/* --------------------------------------------------------------------------
   25. Rahmenform-Guide
   -------------------------------------------------------------------------- */
.price-lp .price-frame-guide {
	border-top: 1px solid var(--price-line);
	border-bottom: 1px solid var(--price-line);
}

.price-lp .price-frame-guide__head {
	max-width: 51.25rem;
	margin-bottom: 1.875rem;
}

.price-lp .price-frame-guide__head h2 {
	margin-bottom: .75rem;
}

.price-lp .price-frame-card {
	position: relative;
	height: 100%;
	padding: 1.625rem 1.5rem 1.5rem;
	background: var(--price-white);
	border: 1px solid #e5e0d8;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .04);
	display: flex;
	flex-direction: column;
}

.price-lp .price-frame-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: var(--price-red);
}

.price-lp .price-frame-card--trapez::before {
	background: var(--price-blue);
}

.price-lp .price-frame-card--tiefeinsteiger::before {
	background: var(--price-black);
}

.price-lp .price-frame-card__kicker {
	display: inline-block;
	margin-bottom: .75rem;
	color: var(--price-muted);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.price-lp .price-frame-card h3 {
	margin-bottom: .625rem;
	font-size: 1.75rem;
	line-height: 1.05;
}

.price-lp .price-frame-card__intro {
	margin-bottom: 1rem;
	color: var(--price-muted);
}

.price-lp .price-frame-card__points {
	list-style: none;
	padding: 0;
	margin: 0 0 1.125rem;
	display: grid;
	gap: .625rem;
	flex: 1;
	align-content: start;
}

.price-lp .price-frame-card__points li {
	position: relative;
	padding-left: 1.125rem;
}

.price-lp .price-frame-card__points li::before {
	content: "•";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--price-red);
	font-weight: 700;
}

.price-lp .price-frame-card__bike {
	padding-top: 1.125rem;
	border-top: 1px solid var(--price-line);
	min-height: 13.75rem;
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Die Rahmenformen sind der Kern dieser Kacheln, deshalb möglichst gross.
   Die Höhe begrenzt die Darstellung, damit alle drei gleich hoch bleiben. */
.price-lp .price-frame-card__bike img {
	width: auto;
	max-width: 100%;
	max-height: 12.5rem;
	object-fit: contain;
}

@media (max-width: 991.98px) {
	.price-lp .price-frame-card__bike {
		min-height: 11rem;
	}

	.price-lp .price-frame-card__bike img {
		max-height: 10rem;
	}
}

.price-lp .price-frame-card__note {
	margin: 0;
	padding-top: .75rem;
	font-size: .9375rem;
	color: var(--price-muted);
}

/* Zwei bis drei Zeilen reserviert, damit die drei Velos auf gleicher Höhe stehen */
@media (min-width: 992px) {
	.price-lp .price-frame-card__note {
		min-height: 5rem;
	}
}

.price-lp .price-frame-card__note strong {
	color: var(--price-black);
}

/* --------------------------------------------------------------------------
   26. Modellübersicht: Karten je Modell, nach Serien gruppiert
   Verwendet auf der Zwischenseite «Alle E-Bike Modelle».
   -------------------------------------------------------------------------- */
.price-lp .price-series {
	border-top: 1px solid var(--price-line);
	padding: 3rem 0;
}

.price-lp .price-series:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.price-lp .price-series__head {
	max-width: 51.25rem;
	margin-bottom: 1.75rem;
}

.price-lp .price-series__head h2 {
	margin-bottom: .75rem;
}

.price-lp .price-series__head p {
	color: var(--price-muted);
	margin-bottom: 0;
}

.price-lp .price-model-card {
	height: 100%;
	border: 1px solid var(--price-line);
	background: var(--price-white);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.price-lp .price-model-card:hover {
	border-color: var(--price-black);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
}

.price-lp .price-model-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.price-lp .price-model-card__media {
	background: var(--price-sand);
	aspect-ratio: 620 / 391;
	display: grid;
	place-items: center;
	padding: .75rem;
}

.price-lp .price-model-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.price-lp .price-model-card__body {
	display: flex;
	flex-direction: column;
	gap: .375rem;
	flex: 1;
	padding: 1.125rem 1.25rem 1.25rem;
}

.price-lp .price-model-card__badge {
	align-self: flex-start;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--price-muted);
	border: 1px solid var(--price-line);
	padding: .125rem .4375rem;
}

.price-lp .price-model-card__title {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
	margin-top: .125rem;
}

.price-lp .price-model-card__price {
	margin-top: auto;
	padding-top: .5rem;
	font-weight: 700;
	color: var(--price-red);
}

.price-lp .price-model-card__link:hover .price-model-card__title,
.price-lp .price-model-card__link:focus-visible .price-model-card__title {
	color: var(--price-red);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Sprungmarken: Abstand für den sticky Header des Shops */
.price-lp .price-series[id] {
	scroll-margin-top: 5rem;
}

/* --------------------------------------------------------------------------
   27. Modellkarte: Auszeichnung «Neu»
   Gleiche Grundform wie das Badge «Modelljahr 2025», nur farblich hervorgehoben.
   Entspricht dem «new»-Label der Kategorieseiten im Shop.
   -------------------------------------------------------------------------- */
.price-lp .price-model-card__badge--neu {
	color: var(--price-white);
	background: var(--price-red);
	border-color: var(--price-red);
}

/* --------------------------------------------------------------------------
   28. Kategorie-Teaser: ganze Karte klickbar
   Der Titel-Link spannt per ::after eine unsichtbare Fläche über die gesamte
   Karte. Dadurch ist das ganze Widget anklickbar, ohne dass die Karte selbst
   ein <a> werden muss — das Markup bleibt semantisch korrekt und es gibt
   weiterhin genau einen Link pro Karte für Screenreader.
   Bewusst nicht Bootstrap .stretched-link, weil die Bootstrap-Version im Shop
   noch nicht feststeht.
   -------------------------------------------------------------------------- */
.price-lp .price-teaser {
	position: relative;
}

.price-lp .price-teaser__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.price-lp .price-teaser:hover {
	border-color: var(--price-black);
}

.price-lp .price-teaser:hover .price-teaser__link,
.price-lp .price-teaser:hover .price-teaser__more {
	color: var(--price-red);
}

.price-lp .price-teaser:has(.price-teaser__link:focus-visible) {
	outline: 2px solid var(--price-red);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   29. Produkt-Labels «Neu» und «Sale»
   Sitzen oben links im Bildbereich einer Modell- oder Produktkachel und
   entsprechen den Labels der Kategorieseiten im Shop.

   Farbwahl nach Brand Identity Guideline, Kapitel «Farbe»:
   Price Blue ist dort ausdrücklich die Sekundärfarbe für Störer und
   Hervorhebungen, Price Red die Primärfarbe. Die Guideline nennt als No-Go
   «keine zusätzlichen Störerfarben» — deshalb Neu in Price Blue statt Grün.
   Soll es doch Grün sein, genügt es, --price-flag-neu-bg zu überschreiben.
   -------------------------------------------------------------------------- */
.price-lp {
	--price-flag-neu-bg: var(--price-blue);
	--price-flag-sale-bg: var(--price-red);
}

.price-lp .price-model-card__media,
.price-lp .price-product__media {
	position: relative;
}

.price-lp .price-flag {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	padding: .25rem .75rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--price-white);
	background: var(--price-flag-neu-bg);
}

.price-lp .price-flag--sale {
	background: var(--price-flag-sale-bg);
}

/* In der grossen Produktkachel der Kategorieseiten sitzt das Bild mit
   Innenabstand — das Label rückt entsprechend mit ein. */
.price-lp .price-product__media .price-flag {
	top: 1rem;
	left: 1rem;
}

@media (max-width: 600px) {
	.price-lp .price-flag {
		font-size: .6875rem;
		padding: .1875rem .625rem;
		min-height: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   30. Zeitstrahl der Markengeschichte
   Verwendet auf der Seite «Über PRICE».
   -------------------------------------------------------------------------- */
.price-lp .price-timeline {
	margin: 1.875rem 0 0;
	padding: 0;
	list-style: none;
}

.price-lp .price-timeline > li {
	display: grid;
	grid-template-columns: 6rem 1fr;
	gap: 1.25rem;
	padding: 1.125rem 0;
	border-top: 1px solid var(--price-line);
}

.price-lp .price-timeline > li:first-child {
	border-top: 0;
}

.price-lp .price-timeline b {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--price-red);
	line-height: 1.2;
}

.price-lp .price-timeline p {
	margin: 0;
	color: var(--price-text);
}

@media (max-width: 600px) {
	.price-lp .price-timeline > li {
		grid-template-columns: 4rem 1fr;
		gap: .875rem;
	}
}

/* Aufzählung mit rot ausgezeichnetem Begriff, für Werte und Merkmale */
.price-lp .price-valuelist {
	list-style: none;
	margin: 1.375rem 0 0;
	padding: 0;
}

.price-lp .price-valuelist li {
	padding: .75rem 0;
	border-top: 1px solid var(--price-line);
}

.price-lp .price-valuelist li:first-child {
	border-top: 0;
}

.price-lp .price-valuelist strong {
	color: var(--price-red);
}

/* Bild mit Unterschrift, z. B. Einblicke in die Produktion */
.price-lp .price-figure {
	margin: 0;
}

.price-lp .price-figure img {
	width: 100%;
	height: auto;
	display: block;
}

.price-lp .price-figure figcaption {
	margin-top: .625rem;
	font-size: .875rem;
	font-weight: 700;
	color: var(--price-muted);
}

/* --------------------------------------------------------------------------
   31. Vergleichstabelle
   Bewusst eine echte <table> mit <th scope>: so bleibt der Inhalt für
   Screenreader, Suchmaschinen und KI-Antwortsysteme eindeutig zuordenbar.
   Auf schmalen Displays scrollt sie in ihrem eigenen Container.
   -------------------------------------------------------------------------- */
.price-lp .price-tablewrap {
	overflow-x: auto;
	margin-top: 1.5rem;
}

.price-lp .price-table {
	width: 100%;
	min-width: 44rem;
	border-collapse: collapse;
	font-size: .9375rem;
}

.price-lp .price-table th,
.price-lp .price-table td {
	border: 1px solid var(--price-line);
	padding: .875rem 1rem;
	text-align: left;
	vertical-align: top;
}

.price-lp .price-table thead th {
	background: var(--price-black);
	color: var(--price-white);
	font-weight: 700;
	border-color: var(--price-black);
}

.price-lp .price-table tbody th {
	background: var(--price-sand);
	font-weight: 700;
	width: 30%;
}

.price-lp .price-table tbody tr:hover td {
	background: #faf9f6;
}

.price-lp .price-table a {
	font-weight: 700;
}

.price-lp .price-table__note {
	margin-top: .75rem;
	font-size: .875rem;
	color: var(--price-muted);
}

/* Kurzcheck-Karten mit Schrittnummer */
.price-lp .price-check {
	height: 100%;
	border: 1px solid var(--price-line);
	padding: 1.5rem;
}

.price-lp .price-check__step {
	display: block;
	margin-bottom: .625rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--price-red);
}

.price-lp .price-check h3 {
	font-size: 1.25rem;
	margin-bottom: .625rem;
}

.price-lp .price-check p {
	margin: 0;
	color: var(--price-muted);
	font-size: .9375rem;
}

/* «Passt zu dir, wenn» — Liste mit blauen Haken */
.price-lp .price-fitlist {
	list-style: none;
	margin: 1.125rem 0 0;
	padding: 0;
	display: grid;
	gap: .625rem;
}

.price-lp .price-fitlist li {
	position: relative;
	padding-left: 1.75rem;
}

.price-lp .price-fitlist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: .875rem;
	height: .5rem;
	border-left: 2.5px solid var(--price-blue);
	border-bottom: 2.5px solid var(--price-blue);
	transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   32. Glossar als Definitionsliste
   Nicht mehr in Gebrauch: Bike-ABC und Buddy-Berater zeigen die Begriffe als
   Kacheln (Abschnitt 34). Die Regeln bleiben für den Fall stehen, dass eine
   zweispaltige Definitionsliste wieder gebraucht wird.
   -------------------------------------------------------------------------- */
.price-lp .price-glossary {
	margin: 1.75rem 0 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 3rem;
}

.price-lp .price-glossary > div {
	padding: 1.125rem 0;
	border-top: 1px solid var(--price-line);
}

.price-lp .price-glossary dt {
	font-weight: 700;
	margin-bottom: .25rem;
}

.price-lp .price-glossary dd {
	margin: 0;
	color: var(--price-muted);
	font-size: .9375rem;
}

@media (max-width: 767.98px) {
	.price-lp .price-glossary {
		grid-template-columns: 1fr;
	}
}

/* Hinweiszeile unter einer Modellgruppe, z. B. zu Vorjahresmodellen */
.price-lp .price-note {
	margin-top: 1.25rem;
	font-size: .9375rem;
	color: var(--price-muted);
}

/* Flächiger Sandhintergrund für einen ganzen Abschnitt */
.price-lp .price-sandbg {
	background: var(--price-sand);
}

/* Sprungmarken-Leiste über einer langen Modellübersicht */
.price-lp .price-anchornav {
	margin: 1.25rem 0 2.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .75rem;
}

.price-lp .price-anchornav a {
	display: inline-block;
	padding: .375rem .875rem;
	border: 1px solid var(--price-line);
	font-size: .875rem;
	font-weight: 700;
	color: var(--price-black);
	text-decoration: none;
	background-image: none;
}

.price-lp .price-anchornav a:hover {
	border-color: var(--price-black);
	color: var(--price-red);
}

/* --------------------------------------------------------------------------
   33. Erklär-Illustrationen (Inline-SVG)
   Verwendet auf der Seite «Welche Velo Rahmengrösse passt zu dir?».
   Die Grafiken sind bewusst Inline-SVG in CI-Farben: sie skalieren
   verlustfrei und benötigen keine zusätzliche Bilddatei.
   -------------------------------------------------------------------------- */
.price-lp .price-illufig {
	margin: 0;
}

.price-lp .price-illu {
	display: block;
	width: 100%;
	height: auto;
	font-family: inherit;
}

.price-lp .price-illufig figcaption {
	margin-top: .75rem;
	font-size: .875rem;
	color: var(--price-muted);
}

/* --------------------------------------------------------------------------
   34. Begriffskarte «Bike-ABC»
   -------------------------------------------------------------------------- */
.price-lp .price-term {
	height: 100%;
	border: 1px solid var(--price-line);
	background: var(--price-white);
	padding: 1.5rem;
}

.price-lp .price-term h3 {
	font-size: 1.125rem;
	margin-bottom: .5rem;
}

.price-lp .price-term p {
	margin: 0;
	color: var(--price-muted);
	font-size: .9375rem;
}

.price-lp .price-term__hint {
	display: block;
	margin-top: .625rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--price-red);
}

/* --------------------------------------------------------------------------
   35. Zusammengeführte Beratungsseite
   Auf der Seite «Finde das passende Bike für dich» rutscht die Gliederung um
   eine Ebene nach unten: aus h2 wird h3, aus h3 wird h4. Damit die Optik
   gleich bleibt, erben die tieferen Ebenen die Grössen der höheren.
   -------------------------------------------------------------------------- */
.price-lp .price-series__head h3 {
	margin-bottom: .75rem;
}

.price-lp .price-product h4 {
	font-size: 1.75rem;
	line-height: 1.1;
	margin-bottom: .75rem;
}

@media (max-width: 767.98px) {
	.price-lp .price-product h4 {
		font-size: 1.375rem;
	}
}

/* Sprungmarken direkt unter dem Intro: gleiche Optik wie die Standardleiste,
   nur grösser. Die drei Marken sind der Einstieg in die Seite und passen auf
   dem Desktop in eine Zeile. */
.price-lp .price-anchornav--lead {
	gap: .75rem;
	margin-top: 2rem;
}

.price-lp .price-anchornav--lead a {
	padding: .8125rem 1.375rem;
	font-size: 1.0625rem;
}

/* Nummerierte Aufzählung im Fliesstext, etwas luftiger als der Browserstandard */
.price-lp .price-numlist {
	margin: 1.125rem 0 1.125rem 1.25rem;
	padding: 0;
}

.price-lp .price-numlist li {
	padding-left: .375rem;
	margin-bottom: .625rem;
}

.price-lp .price-numlist li::marker {
	font-weight: 700;
	color: var(--price-red);
}

/* Beschriftung über einer Sprungmarken-Leiste */
.price-lp .price-anchornav__label {
	margin: 1.75rem 0 0;
	font-weight: 700;
}

.price-lp .price-anchornav__label + .price-anchornav {
	margin-top: .625rem;
}

.price-lp .price-anchornav__label + .price-anchornav {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   36. Schrittmarke
   Für Seiten mit einer Abfolge, z. B. «Welche Velo Rahmengrösse passt zu dir?».
   Bewusst anders als der blaue Kategorie-Kicker: eine rote Marke signalisiert
   einen Schritt in einer Reihenfolge, kein Themenlabel.
   -------------------------------------------------------------------------- */
.price-lp .price-eyebrow--step {
	display: inline-block;
	margin-bottom: 1.125rem;
	padding: .3125rem .8125rem;
	background: var(--price-red);
	color: var(--price-white);
	font-size: .8125rem;
	letter-spacing: .1em;
}

/* Kleine Zusatzangabe in einer Begriffskachel, z. B. der Felgendurchmesser */
.price-lp .price-term__meta {
	margin: 0 0 .625rem;
	font-size: .875rem;
	font-weight: 700;
	color: var(--price-red);
}

/* Illustration in einem breiten Abschnitt nicht über die volle Breite ziehen */
.price-lp .price-illufig--narrow {
	max-width: 40rem;
}

/* --------------------------------------------------------------------------
   37. Button auf rotem Grund
   Im PRICE-Way-Block steht der CTA auf Rot. Weisse Fläche, schwarze Schrift.
   -------------------------------------------------------------------------- */
.price-lp .btn-price-onred {
	--bs-btn-color: var(--price-black);
	--bs-btn-bg: var(--price-white);
	--bs-btn-border-color: var(--price-white);
	--bs-btn-hover-color: var(--price-black);
	--bs-btn-hover-bg: #f1efe8;
	--bs-btn-hover-border-color: #f1efe8;
	font-weight: 700;
}

/* Kacheln und Sprungmarken bleiben weiss, auch auf sandfarbenem Grund */
.price-lp .price-check {
	background: var(--price-white);
}

.price-lp .price-anchornav a {
	background: var(--price-white);
}

/* Die drei grossen Sprungmarken unter dem Intro: schwarzer Rahmen */
.price-lp .price-anchornav--lead a {
	border-color: var(--price-black);
}

/* --------------------------------------------------------------------------
   38. Modellname über einem Produktblock
   Auf den Kategorieseiten steht über jedem Produktblock der Modellname. Er
   bleibt in Price Blue und in Versalien, ist aber deutlich grösser als ein
   normaler Kicker — kleiner als eine H2, damit die Gliederung stimmt.
   -------------------------------------------------------------------------- */
.price-lp .price-eyebrow--model {
	font-size: 1.375rem;
	letter-spacing: .04em;
	line-height: 1.2;
	margin-bottom: .875rem;
}

@media (max-width: 767.98px) {
	.price-lp .price-eyebrow--model {
		font-size: 1.1875rem;
	}
}

/* Sprungmarken stehen oft auf Weiss. Schwarzer Rahmen, damit sie sichtbar sind. */
.price-lp .price-anchornav a {
	border-color: var(--price-black);
}

/* --------------------------------------------------------------------------
   39. Querverweis-Widget
   Kompakter Teaser auf eine verwandte Ratgeberseite. Steht als eigener Block
   zwischen zwei Abschnitten: links Kicker, Überschrift und ein Satz, rechts
   der Button. Ab der Umbruchbreite stehen Text und Button nebeneinander,
   darunter gestapelt.
   -------------------------------------------------------------------------- */
.price-lp .price-crosslink {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 2.5rem;
	border: 1px solid var(--price-line);
	background: var(--price-white);
	padding: 1.75rem 2rem;
}

.price-lp .price-crosslink__text {
	flex: 1 1 24rem;
}

.price-lp .price-crosslink h2 {
	font-size: 1.5rem;
	margin-bottom: .5rem;
}

.price-lp .price-crosslink p:last-child {
	margin-bottom: 0;
}

.price-lp .price-crosslink .btn {
	flex: 0 0 auto;
}

@media (max-width: 575.98px) {
	.price-lp .price-crosslink {
		padding: 1.25rem;
	}

	.price-lp .price-crosslink h2 {
		font-size: 1.3125rem;
	}

	.price-lp .price-crosslink .btn {
		width: 100%;
	}
}

/* Sprungmarken auf Abschnittsebene brauchen denselben Abstand wie die Serien */
.price-lp .price-section[id] {
	scroll-margin-top: 5rem;
}