/* Fahrzeugkontor framework: tokens, themes and presentation presets. */
.fk-site-main,
.fk-site-main * {
	box-sizing: border-box;
}

/*
 * A small, scoped baseline keeps theme and builder resets from changing
 * Fahrzeugkontor components. Component rules below remain the source of truth.
 */
.fk-site-main :where( h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol ) {
	margin: 0;
}

.fk-site-main :where( ul, ol ) {
	padding: 0;
}

.fk-site-main :where( a ) {
	color: inherit;
	text-decoration: none;
}

.fk-site-main :where( button, input, optgroup, select, textarea ) {
	margin: 0;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-transform: none;
}

.fk-site-main :where( button, [type="button"], [type="submit"], [type="reset"] ) {
	appearance: none;
	width: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-align: inherit;
}

.fk-site-main :where( img ) {
	max-width: 100%;
	border: 0;
}

.fk-site-main {
	/* Colors */
	--fk-color-accent: #1f5eff;
	--fk-color-on-accent: #ffffff;
	--fk-color-page: #f7f8fa;
	--fk-color-surface: #ffffff;
	--fk-color-surface-soft: #f1f3f6;
	--fk-color-heading: #141922;
	--fk-color-text: #343b47;
	--fk-color-muted: #687180;
	--fk-color-border: #dde2e8;
	--fk-color-border-strong: #c7ced8;

	/* Root-independent fluid type scale for compatibility with themes and builders. */
	--fk-font-body: inherit;
	--fk-font-heading: inherit;
	--fk-text-2xs: clamp( 11px, calc( 10.7136px + 0.0893vw ), 12px );
	--fk-text-xs: clamp( 12px, calc( 11.7136px + 0.0893vw ), 13px );
	--fk-text-sm: clamp( 14px, calc( 13.7136px + 0.0893vw ), 15px );
	--fk-text-base: clamp( 16px, calc( 15.4288px + 0.1786vw ), 18px );
	--fk-text-lg: clamp( 18px, calc( 16.8576px + 0.3571vw ), 22px );
	--fk-text-xl: clamp( 22px, calc( 20.2864px + 0.5357vw ), 28px );
	--fk-text-2xl: clamp( 28px, calc( 25.1424px + 0.8929vw ), 38px );
	--fk-text-3xl: clamp( 34px, calc( 28.8576px + 1.6071vw ), 52px );
	--fk-text-4xl: clamp( 42px, calc( 34.5712px + 2.3214vw ), 68px );

	/* Fluid spacing for layout rhythm. Compact controls remain deliberately stable. */
	--fk-space-4xs: 2px;
	--fk-space-3xs: 3px;
	--fk-space-2xs: clamp( 4px, calc( 3.4288px + 0.1786vw ), 6px );
	--fk-space-xs: clamp( 8px, calc( 7.4288px + 0.1786vw ), 10px );
	--fk-space-sm: clamp( 12px, calc( 11.4288px + 0.1786vw ), 14px );
	--fk-space-md: clamp( 16px, calc( 15.4288px + 0.1786vw ), 18px );
	--fk-space-lg: clamp( 24px, calc( 22.8576px + 0.3571vw ), 28px );
	--fk-space-xl: clamp( 36px, calc( 33.7136px + 0.7143vw ), 44px );
	--fk-space-2xl: clamp( 44px, calc( 38.2864px + 1.7857vw ), 64px );
	--fk-space-3xl: clamp( 64px, calc( 57.1424px + 2.1429vw ), 88px );
	--fk-space-4xl: clamp( 88px, calc( 78.8576px + 2.8571vw ), 120px );

	/* Shapes and elevation */
	--fk-radius-control: 10px;
	--fk-radius-card: 14px;
	--fk-radius-panel: 16px;
	--fk-radius-media: 12px;
	--fk-shadow-card: 0 14px 38px rgba( 20, 31, 48, 0.09 );
	--fk-shadow-panel: 0 20px 55px rgba( 20, 31, 48, 0.1 );
	--fk-card-border: transparent;
	--fk-component-outline-size: 1px;

	/* Layout and component dimensions */
	--fk-container-width: 1440px;
	--fk-grid-columns: 3;
	--fk-grid-gap: clamp( 14px, calc( 12.8576px + 0.3571vw ), 18px );
	--fk-card-padding: clamp( 18px, calc( 16.8576px + 0.3571vw ), 22px );
	--fk-button-height: 48px;
	--fk-image-ratio: 4 / 3;
	--fk-detail-title-size: var( --fk-text-2xl );
	--fk-icon-sm: 16px;
	--fk-icon-md: 20px;
	--fk-icon-lg: 24px;
	--fk-motion-duration: 240ms;

	min-width: 0;
	background: var( --fk-color-page );
	color: var( --fk-color-text );
	font-family: var( --fk-font-body );
	font-size: var( --fk-text-base );
	line-height: 1.6;
}

.fk-theme--dark {
	--fk-color-page: #101318;
	--fk-color-surface: #181c22;
	--fk-color-surface-soft: #20252d;
	--fk-color-heading: #f5f7fa;
	--fk-color-text: #d9dde3;
	--fk-color-muted: #a6adb8;
	--fk-color-border: #303640;
	--fk-color-border-strong: #434b58;
	--fk-shadow-card: 0 16px 42px rgba( 0, 0, 0, 0.24 );
	--fk-shadow-panel: 0 22px 60px rgba( 0, 0, 0, 0.32 );
	color-scheme: dark;
}

@media ( prefers-color-scheme: dark ) {
	.fk-theme--system {
		--fk-color-page: #101318;
		--fk-color-surface: #181c22;
		--fk-color-surface-soft: #20252d;
		--fk-color-heading: #f5f7fa;
		--fk-color-text: #d9dde3;
		--fk-color-muted: #a6adb8;
		--fk-color-border: #303640;
		--fk-color-border-strong: #434b58;
		--fk-shadow-card: 0 16px 42px rgba( 0, 0, 0, 0.24 );
		--fk-shadow-panel: 0 22px 60px rgba( 0, 0, 0, 0.32 );
		color-scheme: dark;
	}
}

.fk-preset--app {
	--fk-radius-control: 14.4px;
	--fk-radius-card: 20px;
	--fk-radius-panel: 24px;
	--fk-radius-media: 16px;
	--fk-grid-gap: 24px;
	--fk-card-padding: 22.4px;
	--fk-card-border: color-mix( in srgb, var( --fk-color-border ) 72%, transparent );
	--fk-shadow-card: 0 1px 2px rgba( 20, 31, 48, 0.05 ), 0 16px 42px rgba( 20, 31, 48, 0.11 );
	--fk-shadow-panel: 0 2px 5px rgba( 20, 31, 48, 0.06 ), 0 24px 64px rgba( 20, 31, 48, 0.13 );
}

.fk-preset--app :is( .fk-vehicle-card, .fk-quick-search, .fk-catalog-filters, .fk-detail-panel, .fk-detail-summary, .fk-inquiry, .fk-location-card ) {
	border-color: color-mix( in srgb, var( --fk-color-border ) 72%, transparent );
	background: color-mix( in srgb, var( --fk-color-surface ) 97%, var( --fk-color-accent ) 3% );
	box-shadow: inset 0 1px 0 color-mix( in srgb, var( --fk-color-surface ) 85%, transparent ), var( --fk-shadow-card );
}

.fk-preset--app .fk-vehicle-card {
	transition: transform var( --fk-motion-duration ) ease, box-shadow var( --fk-motion-duration ) ease;
}

.fk-preset--app .fk-vehicle-card:hover {
	transform: translateY( -3px );
	box-shadow: inset 0 1px 0 color-mix( in srgb, var( --fk-color-surface ) 90%, transparent ), var( --fk-shadow-panel );
}

.fk-preset--app .fk-button--primary {
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.24 ), 0 8px 20px color-mix( in srgb, var( --fk-color-accent ) 28%, transparent );
}

.fk-preset--sport {
	--fk-radius-control: 4.8px;
	--fk-radius-card: 6.4px;
	--fk-radius-panel: 8px;
	--fk-radius-media: 4px;
	--fk-card-border: var( --fk-color-border-strong );
	--fk-component-outline-size: 2px;
	--fk-card-padding: 18.4px;
	--fk-grid-gap: 17.6px;
	--fk-shadow-card: 0 10px 28px rgba( 20, 31, 48, 0.09 );
	--fk-shadow-panel: 0 16px 38px rgba( 20, 31, 48, 0.11 );
}

.fk-preset--compact {
	--fk-grid-columns: 4;
	--fk-grid-gap: 14px;
	--fk-card-padding: 16px;
	--fk-radius-control: 6.4px;
	--fk-radius-card: 8px;
	--fk-radius-panel: 10px;
	--fk-radius-media: 6px;
	--fk-button-height: 42.4px;
	--fk-shadow-card: 0 8px 24px rgba( 20, 31, 48, 0.08 );
}

.fk-preset--sharp {
	--fk-radius-control: 0;
	--fk-radius-card: 0;
	--fk-radius-panel: 0;
	--fk-radius-media: 0;
	--fk-card-border: var( --fk-color-border-strong );
	--fk-shadow-card: none;
	--fk-shadow-panel: none;
}