/* ==================================================
--------- ANPASSUNGEN externer Seiten
==================================================
- Digital 35
- C-Page mit Widgets
- C-Page - Volltextsuche
- Stellenangebote (Carsonal)
- Fahrzeugkarussell als Liste
*/



/* =========================================================
C-Page
========================================================= */
#c-page custom-elements-wrapper {
	display: block !important;
	box-sizing: border-box !important;
	padding: 0 !important;
	width: 100% !important;
	max-width:100% !important;
	}
#c-page .c-element:has(custom-elements-wrapper) {
	padding-left: 27px !important;
	padding-right: 27px !important;
	}
@media (max-width: 992px) and (min-width: 767px) {
	#c-page .c-element:has(custom-elements-wrapper) {
		padding-left: 22px !important;
		padding-right: 22px !important;
	}
}	
/* -- end C-Page
========================================================= */




/* =========================================================
C-Page - Volltextsuche
========================================================= */
#c-page custom-elements-wrapper #searchTermWrapper {
	height: auto !important;
	}
#c-page custom-elements-wrapper #searchTermWrapper > div {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	}	
#c-page custom-elements-wrapper #searchTermWrapper .btn,
#c-page custom-elements-wrapper #searchTermWrapper .btn small {
	display: inline-flex !important;
	width: auto !important;
	height: 100% !important;
	margin: 0 !important;
	justify-content: center !important;
	align-items: center !important;
	position: relative !important;
	align-items: stretch
	}
#c-page custom-elements-wrapper #searchTermWrapper .btn small {
	padding: 0 1em !important
	}
#c-page custom-elements-wrapper #searchTerm:focus ~ label[for="searchTerm"] {
	opacity: 0 !important;
	visibility: hidden !important;
	}	
/* -- end C-Page - Volltextsuche
========================================================= */
	
	
	
		

/* =========================================================
Fahrzeugsuche Startseite
========================================================= */
.start .fahrzeugsuche {
	background: #fff;
	box-shadow: 0 .8em 1em rgba(0, 0, 0, 0.2);
	}
.start .fahrzeugsuche {
	}
.start .fahrzeugsuche .container {
	padding-top: 30px;
	padding-bottom: 40px;
	}
	@media (max-width: 767px) {
		.start .fahrzeugsuche .container {
		padding-bottom: 30px;
		}
	}
.start .fahrzeugsuche :is(h1,h2,h3,.h1,.h2,.h3) {
	color: #000 !important;
	margin-bottom: .5em !important;
	}

.start .fahrzeugsuche #webshop-widget {
	}
.start .fahrzeugsuche #webshop-widget .btn {
	margin-bottom: 0 !important
	}
.start .fahrzeugsuche #gearBoxTypesWrapper,
.start .fahrzeugsuche #vehicleDealerLocationsWrapper,
.start .fahrzeugsuche #monthlyFinancingRateExampleMaxWrapper {
	display: none
	}
	
#webshop-widget .btn-primary small {
	color: #fff !important;
	}	


#webshop-widget li.select-none svg.h-5.w-5 {
  width: 18px !important;
  height: 18px !important;
}

#webshop-widget .border {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

#webshop-widget .px-\[var\(--app-padding-x\)\] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#webshop-widget .mb-1\.5 {
  margin-bottom: 1rem !important;
}

#webshop-widget div.\!pb-5 {
  padding-bottom: 2.5rem !important;
}

.content:has(#webshop-widget) {
  gap: 0 !important;
}

#webshop-widget button span.absolute svg.h-5.w-5 {
  width: 18px !important;
  height: 18px !important;
}

.row:has(#webshop-widget) > * {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#webshop-widget li.select-none {
  padding-left: 0 !important;
}

#webshop-widget li.select-none.px-2 {
  padding-left: 0.5rem !important;
}
/* -- end Fahrzeugsuche Startseite
========================================================= */	
	
	



	
/* =========================================================
Stellenangebote (Carsonal)
========================================================= */
carsonal-website-widget-application-container {
	}
carsonal-website-widget-application-container h1,
.job-detail-description-title h1 {
	text-transform: none !important;
	letter-spacing: 0 !important;
	}
button[color="accent"],
button[color="primary"],
.mdc-button__label {
	color: #fff !important;
	}

@media (min-width: 992px) {
	.job-application-create-form-groups {
		display: block !important;
		}
		.job-application-create-form-groups > div:nth-child(1) {
			float: left !important;
			width: calc(65% - 50px) !important;
			margin-right: 50px
		}
		.job-application-create-form-groups > div:nth-child(2) {
			float: left !important;
			width: 35% !important;
		}
		.job-application-create-form-groups > .job-application-create-form-footer.d-none-md {
			display: block !important;
			width: 100% !important
		}
}	

/* ------------------------------------------------------
Stellenangebote - Eingabefelder Label
--------------------------------------------------------- */	
.mdc-floating-label {
	transition:
		transform .28s cubic-bezier(.4,0,.2,1),
		color .2s ease !important;
	will-change: transform;
	}
.mdc-floating-label--float-above {
	transform: translateY(-106%) scale(.75) !important;
	transform-origin: left top !important;
	}
.mat-mdc-form-field.mat-focused .mdc-floating-label {
	color: #888 !important;
	}
/* -- end Stellenangebote
========================================================= */	
	
	
	
	
/* =========================================================
Fahrzeug-Karussell - Kinderlemente links ausgerichtet
========================================================= */	
.ssr-carousel-track {
	justify-content: flex-start !important;
	}
/* =========================================================
Fahrzeug-Karussell als Liste, vollst�ndig sichtbar
========================================================= */
/* Gesamten Widget-Bereich in der Hoehe mitwachsen lassen */
#karussell-als-liste custom-elements-wrapper,
#karussell-als-liste #webshop-widget,
#karussell-als-liste #webshop-widget > div,
#karussell-als-liste .ssr-carousel,
#karussell-als-liste .ssr-carousel-slides,
#karussell-als-liste .ssr-carousel-mask {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}

/* komplette Karusell-Ansicht untereinander, wenn Slider nicht laufen soll
@media (max-width: 639px) {
	#karussell-als-liste-mobil custom-elements-wrapper .ssr-carousel,
	custom-elements-wrapper .ssr-carousel-slides,
	custom-elements-wrapper .ssr-carousel-mask {
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}
	#karussell-als-liste-mobil custom-elements-wrapper .ssr-carousel-track {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		width: 100% !important;
		height: auto !important;
		transform: none !important;
		translate: none !important;
		gap: 20px;
	}
	#karussell-als-liste-mobil custom-elements-wrapper .ssr-carousel-slide {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		order: unset !important;
	}
	#karussell-als-liste-mobil custom-elements-wrapper .car-card-link {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		height: auto !important;
	}
	#karussell-als-liste-mobil custom-elements-wrapper .ssr-carousel-arrows,
	#karussell-als-liste-mobil custom-elements-wrapper .ssr-carousel-dots {
		display: none !important;
	}
	#karussell-als-liste-mobil custom-elements-wrapper .ssr-peek-values {
		display: none !important;
	}
}*/



/* Fahrzeug-Wrapper */
#karussell-als-liste .ssr-carousel-track {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	transform: none !important;
	translate: none !important;
	gap: 30px !important;
	overflow: visible !important;
	}
/* Fahrzeug-Item */
#karussell-als-liste .ssr-carousel-track > .ssr-carousel-slide,
#karussell-als-liste .ssr-carousel-slide {
	display: flex !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	height: auto !important;
	flex: 0 0 auto !important;
	margin: 0 !important;
	transform: none !important;
	border: 2px solid #eee !important;
	overflow: hidden !important;
	}
/* Fahrzeug-Link und Karte ebenfalls auf volle Breite */
#karussell-als-liste .ssr-carousel-slide > .car-card-link,
#karussell-als-liste .ssr-carousel-slide .car-card-link {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
}


/* ------------------------------------------------------
Fahrzeug-Item: Bild rechts + Info links
--------------------------------------------------------- */
/* Fahrzeug-Item (Bild rechts + Info links) */
#karussell-als-liste .ssr-carousel-slide .car-card-link {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 42%) !important;	
	border: none !important;
	}
	#karussell-als-liste .ssr-carousel-slide .car-card-link > * {
		border: none !important
		}
	/* Fahrzeug-Item - Infos */
	#karussell-als-liste .ssr-carousel-slide .car-card-link > div:nth-child(2) {
		grid-column: 1 !important;
		grid-row: 1 !important;
		padding: 20px !important
		}
	/* Fahrzeug-Item - Bild */
	#karussell-als-liste .ssr-carousel-slide .car-card-link > div:first-child {
		grid-column: 2 !important;
		grid-row: 1 !important;
		overflow: hidden;
		
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 0 !important;
		max-width: 100% !important;
		}
	#karussell-als-liste .ssr-carousel-slide .car-card-link > div:first-child img {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		object-fit: contain !important;
		object-position: center center !important;
		
		height: auto !important;
		max-height: 100% !important;
		}
	/* 2. Bild ausblenden */	
	#karussell-als-liste .ssr-carousel-slide .car-card-link > div > div > div > div img:nth-child(2) {
		display: none !important;�
		}

/* ------------------------------------------------------
Fahrzeug-Item Mobil: (Bild + Info untereinander)
--------------------------------------------------------- */
@media (max-width: 767px) {
	#karussell-als-liste .ssr-carousel-slide .car-card-link {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		}
	/* Bildbereich */
	#karussell-als-liste .ssr-carousel-slide .car-card-link > div:first-child {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
		}
	/* Alle vom Widget gesetzten Bild-Wrapper neutralisieren */
	#karussell-als-liste .ssr-carousel-slide .car-card-link > div:first-child > div,
	#karussell-als-liste .ssr-carousel-slide .car-card-link > div:first-child > div > div,
	#karussell-als-liste .ssr-carousel-slide .car-card-link > div:first-child > div > div > div {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		aspect-ratio: auto !important;
		overflow: visible !important;
		}
	/* Fahrzeugbild */
	#karussell-als-liste .ssr-carousel-slide .car-card-link > div:first-child img {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		min-height: 0 !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		object-fit: contain !important;
		object-position: center center !important;
		}
	/* zweites, vom Widget verborgenes Fahrzeugbild weiterhin ausblenden */
		#karussell-als-liste .ssr-carousel-slide .car-card-link > div:first-child img:nth-of-type(2) {
		display: none !important;
		}
	/* Infos darunter */
		#karussell-als-liste .ssr-carousel-slide .car-card-link > div:nth-child(2) {
		width: 100% !important;
		margin: 0 !important;
		padding: 20px !important;
		}
}

/* Keine Carousel-Navigation mehr anzeigen */
#karussell-als-liste .ssr-carousel-arrows,
#karussell-als-liste .ssr-carousel-dots,
#karussell-als-liste .ssr-peek-values {
	display: none !important;
	}

/* Falls das Widget Overflow auf weiteren Zwischenebenen setzt */
#karussell-als-liste .ssr-carousel *,
#karussell-als-liste .ssr-carousel-track * {
	box-sizing: border-box;
	}


@media (max-width: 1535px) {
	#karussell-als-liste .ssr-carousel-slide {
		width: 100% !important;
		min-width: 0 !important;
		margin-right: 0 !important;
	}
}
@media (max-width: 1279px) {
	#karussell-als-liste .ssr-carousel-slide {
		width: 100% !important;
		min-width: 0 !important;
		margin-right: 0 !important;
	}
}
@media (max-width: 1023px) {
	#karussell-als-liste .ssr-carousel-slide {
		width: 100% !important;
		min-width: 0 !important;
		margin-right: 0 !important;
	}
}
@media (max-width: 639px) {
	#karussell-als-liste .ssr-carousel-slide {
		width: 100% !important;
		min-width: 0 !important;
		margin-right: 0 !important;
	}
}


/* ------------------------------------------------------
Fahrzeug-Item Spaltigkeit: (Bild + Info untereinander)
--------------------------------------------------------- */
#karussell-als-liste:is(.col2,.col3,.col4) .ssr-carousel-track {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 30px !important;
	width: 100% !important;
	}
	#karussell-als-liste.col2 .ssr-carousel-track { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	#karussell-als-liste.col3 .ssr-carousel-track { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	#karussell-als-liste.col4 .ssr-carousel-track { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
	
	@media (max-width: 767px) {
		#karussell-als-liste:is(.col2,.col3,.col4) .ssr-carousel-track { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
		}
	@media (max-width: 575px) {
		#karussell-als-liste:is(.col2,.col3,.col4) .ssr-carousel-track { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
		}	
			
	#karussell-als-liste:is(.col2,.col3,.col4) .ssr-carousel-slide {
		display: flex !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		}
	#karussell-als-liste:is(.col2,.col3,.col4) .ssr-carousel-slide .car-card-link {
		width: 100% !important;
		height: 100% !important;
		}
	#karussell-als-liste:is(.col2,.col3,.col4) .ssr-carousel-slide .car-card-link {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		}
/* Bildbereich */
#karussell-als-liste:is(.col2,.col3,.col4) .ssr-carousel-slide .car-card-link > div:first-child {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	}
	/* Alle vom Widget gesetzten Bild-Wrapper neutralisieren */
	#karussell-als-liste:is(.col2,.col3,.col4) .ssr-carousel-slide .car-card-link > div:first-child > div,
	#karussell-als-liste:is(.col2,.col3,.col4) .ssr-carousel-slide .car-card-link > div:first-child > div > div,
	#karussell-als-liste:is(.col2,.col3,.col4) .ssr-carousel-slide .car-card-link > div:first-child > div > div > div {
			display: block !important;
			width: 100% !important;
			max-width: none !important;
			height: auto !important;
			min-height: 0 !important;
			max-height: none !important;
			margin: 0 !important;
			padding: 0 !important;
			aspect-ratio: auto !important;
			overflow: visible !important;
			}
	/* Fahrzeugbild */
	#karussell-als-liste:is(.col2,.col3,.col4) .ssr-carousel-slide .car-card-link > div:first-child img {
			display: block !important;
			width: 100% !important;
			height: auto !important;
			min-width: 0 !important;
			max-width: none !important;
			min-height: 0 !important;
			max-height: none !important;
			margin: 0 !important;
			padding: 0 !important;
			object-fit: contain !important;
			object-position: center center !important;
			}
	/* zweites, vom Widget verborgenes Fahrzeugbild weiterhin ausblenden */
			#karussell-als-liste:is(.col2,.col3,.col4) .ssr-carousel-slide .car-card-link > div:first-child img:nth-of-type(2) {
			display: none !important;
			}
	/* Infos darunter */
			#karussell-als-liste:is(.col2,.col3,.col4) .ssr-carousel-slide .car-card-link > div:nth-child(2) {
			width: 100% !important;
			margin: 0 !important;
			padding: 20px !important;
			}
			
			
/* -- end Fahrzeug-Karussell als Liste
========================================================= */		




/* ------------------------------------------------------
Bildbereich generell
--------------------------------------------------------- */
#karussell-als-liste .ssr-carousel-slide .car-card-link > div:first-child {
	position: relative !important;
	overflow: hidden !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

/* falls das Widget mehrere Bild-Wrapper/Bilder erzeugt:
   nur das erste sichtbar lassen */
#karussell-als-liste .ssr-carousel-slide .car-card-link > div:first-child > img:not(:first-of-type),
#karussell-als-liste .ssr-carousel-slide .car-card-link > div:first-child picture:not(:first-of-type),
#karussell-als-liste .ssr-carousel-slide .car-card-link > div:first-child > div:not(:first-child) {
	display: none !important;
}	

#karussell-als-liste .ssr-carousel-slide .car-card-link > div > div > div > div img:nth-child(2) {
	display: none !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important
}