/* Detail page — Bootstrap 5 compatible, scoped to .modellseite */

/**************** General *****************/
#nav_wrap2 a:link,
#nav_wrap2 a:hover,
#nav_wrap2 a:visited,
#social a:link,
#social a:hover,
#social a:visited,
.modellseite #discount2 a:link,
.modellseite #discount2 a:hover,
.modellseite #discount2 a:visited {
	text-decoration: none;
	color: #fff;
	font-weight: 500;
}

html,
body {
	background: url(../media/bckg_detailseiten.jpg) no-repeat left top fixed;
	background-size: cover;
	overflow-x: hidden;
	max-width: 100%;
}

/**************** Product card *****************/
.container-fluid.modellseite {
	margin: 0 auto 50px;
	max-width: 1230px;
	background-color: #fff;
	border: 16px solid #fff;
	border-radius: 10px;
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
	font-size: 16px;
	overflow: visible;
	position: relative;
}

.modellseite h1 { font-size: 23px !important; }
.modellseite h2 { font-size: 21px !important; }
.modellseite h3,
.modellseite .h3 {
	font-size: 19px !important;
	font-weight: 700;
	margin: 0;
	line-height: 1.6;
	border-radius: 4px;
	border: 1px solid rgb(23, 60, 134);
}
.modellseite h5 {
	font-size: 16px !important;
	font-weight: 700;
	margin-top: 3px;
	margin-bottom: 5px;
}
.modellseite .h4,
#social .h4 {
	font-size: 19px !important;
}

.pfeil::before {
	padding: 0;
	content: url('../media/img_modelldetails/pfeil.png');
	vertical-align: -14%;
	margin-right: 4px;
	line-height: 1.2em !important;
}

/**************** Orange / green action row (BS5 flex) *****************/
.modellseite #nav_wrap2 {
	color: #fff;
	letter-spacing: 0.03em;
	display: flex;
	flex-wrap: wrap;
	margin-left: 0;
	margin-right: 0;
}

.modellseite #nav_wrap2 > * {
	padding-left: 0;
	padding-right: 0;
}

.modellseite #nav_wrap2 h3 {
	line-height: 1.6em !important;
	margin-bottom: 6px;
}

.modellseite #nav_wrap2 .vm-detail-fb {
	flex: 0 0 100%;
	max-width: 100%;
	text-align: right;
	padding-bottom: 8px;
}

.modellseite #nav_wrap2 #back2 {
	flex: 0 0 14%;
	max-width: 14%;
}
.modellseite #nav_wrap2 #back2 h3 {
	margin-right: 6px;
	text-align: center;
	padding-right: 8px;
}

.modellseite #nav_wrap2 #title2 {
	flex: 0 0 52%;
	max-width: 52%;
}
.modellseite #nav_wrap2 #title2 h3 {
	margin-right: 6px;
	padding-left: 12px;
}

.modellseite #nav_wrap2 #price2 {
	flex: 0 0 34%;
	max-width: 34%;
}

.modellseite #nav_wrap2 #discount2 {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
	padding-bottom: 20px;
}

/**************** Specs box — CSS columns (works with BS5) *****************/
.modellseite #info {
	margin-top: 0;
	padding: 15px 0;
	border: 1px solid rgb(23, 60, 134);
	border-radius: 8px;
	overflow: hidden;
	width: 100%;
	color: rgb(23, 60, 134);
}

.modellseite .background_line1 {
	background-image: url(../media/1px_blue.png);
	background-repeat: repeat-y;
	background-position: 33.3333333333%;
}

.modellseite .background_line2 {
	background-image: url(../media/1px_blue1.png);
	background-repeat: repeat-y;
	background-position: 66.6666666666%;
}

.modellseite .vm-detail-specs-list {
	display: block;
	list-style: none;
	margin: 0 0 16px 0;
	padding: 0;
	columns: 3;
	column-gap: 8px;
}

.modellseite .vm-detail-specs-list > li {
	display: inline-block;
	width: 100%;
	padding-top: 14px;
	padding-left: 10px;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}

.modellseite #info h5 {
	color: rgb(23, 60, 134);
	font-weight: 700;
	font-size: 16px;
	margin-top: 3px;
	margin-bottom: 5px;
}

.modellseite #info .ul-wrap {
	padding-right: 4px;
}

/**************** Contact *****************/
#social {
	margin-top: 10px;
	padding: 0;
}

/**************** Responsive *****************/
@media (max-width: 991.98px) {
	.center-block .container-fluid.modellseite {
		margin-top: 14px !important;
	}
}

@media (max-width: 767px) {
	.modellseite h1 { font-size: 20px; }
	.modellseite h2 { font-size: 18px; }

	.modellseite #nav_wrap2 #back2 {
		flex: 0 0 24%;
		max-width: 24%;
	}
	.modellseite #nav_wrap2 #back2 h3 {
		padding-right: 18px;
	}

	.modellseite #nav_wrap2 #title2 {
		flex: 0 0 76%;
		max-width: 76%;
	}
	.modellseite #nav_wrap2 #title2 h3 {
		padding-left: 20px;
	}

	.modellseite #nav_wrap2 #price2 {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}
	.modellseite #nav_wrap2 #price2 h3 {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.modellseite .vm-detail-specs-list {
		columns: 2;
	}

	.modellseite .background_line1 {
		background-position: 50%;
	}
	.modellseite .background_line2 {
		background-image: none;
	}
}

@media (max-width: 480px) {
	.modellseite #nav_wrap2 #back2 {
		flex: 0 0 50%;
		max-width: 50%;
	}
	.modellseite #nav_wrap2 #back2 h3 {
		text-align: left;
		min-width: 115px;
	}

	.modellseite #nav_wrap2 #title2 {
		flex: 0 0 99%;
		max-width: 99%;
	}
	.modellseite #nav_wrap2 #title2 h3 {
		padding-left: 10px;
		text-align: left;
		min-width: 105px;
	}

	.modellseite #nav_wrap2 #price2 {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}
	.modellseite #nav_wrap2 #price2 h3 {
		width: 100%;
		max-width: 100%;
		text-align: left;
		min-width: 0;
		padding-left: 10px;
		margin-right: 0;
		box-sizing: border-box;
	}

	.modellseite #nav_wrap2 #discount2 h3 {
		padding-left: 10px;
		padding-right: 10px;
		text-align: left;
		min-width: 115px;
	}

	.modellseite .vm-detail-specs-list {
		columns: 1;
	}

	.modellseite .background_line1,
	.modellseite .background_line2 {
		background-image: none;
	}
}