/*Fonts in Bootstrap.min.css*/

/**************************************************************************************
  General
**************************************************************************************/
:root {
	--txt: white;
	--dark: #28282b;
	--grey: #666666;
	--lightgrey:#d9d9d9d;
	--highlight: #ffd200;
}
html{
	font-size:10px;
	height: 100%;
}
body {
	font-size:14px;
	color:var(--txt);
	background-color:var(--dark);
	font-family: "Noto Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	
	/*Sticky Footer*/
	height: 100%;
	display: flex;
  	flex-direction: column;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
	color:var(--txt);
}
h1, .h1,
h2, .h2,
.navbar {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;	
}
hr{
	-moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: var(--txt) -moz-use-text-color var(--txt);
    border-image: none;
    border-style: solid none;
    border-width: 1px 0;
}
a, .pseudolink {
	color:var(--txt);
	text-decoration:underline;
	transition: color 200ms linear;
}
a:hover, a:focus, .pseudolink:hover {
	color:var(--highlight);
	text-decoration:none;
	cursor:pointer;
	transition: color 200ms linear;

}
.btn,
.pseudolink:hover,
*[onclick]:hover,
.lightbox {
	cursor:pointer;
}
.hyphens {
	-moz-hyphens:auto;
	-ms-hyphens:auto;
	-webkit-hyphens:auto;
	hyphens:auto;
}
.breakword {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
}
.alert {
	padding:0.6rem 1rem;
}
.alert a {
	color:inherit;
	text-decoration:underline;
}
.bg-dark {
	background-color:var(--dark) !important;
}
.imgCoverCenter {
    position: relative;
    overflow: hidden;
}
.imgCoverCenter > img,
.imgCoverCenter > video,
.imgCoverCenter > svg {
	position: absolute;
	/*top: 50%;
left: 50%;
transform: translate(-50%,-50%);*/
	height: 100%;
	width: 100.1%;
	object-fit: cover;
	object-position: center;
}

/**************************************************************************************
  Content Ansicht
**************************************************************************************/
section {
	margin-top:calc(1.5vw + 1.5vh);
	margin-bottom:calc(1.5vw + 1.5vh);
}
.shopcat,
body:not(.home) #Content {
	margin-bottom:30px;
}
.col-lg-2 .logos {
	display:flex;
	align-items: flex-end;
    justify-content: center;
	padding-bottom:0;
}
p, .ptext, #Content ul {
	margin: 0 0 20px;
}
#Content:empty {
	display:none;
}
#Content img{
	max-width:100%;	
	height:auto;
}
#Content > h1:first-child{
	margin-top:0;
}
.website #Content td img{
	display:block;
	width:auto;
	height:auto;
}
#Content ul, #Content ol {
	padding-left:15px;
}
#Content ul li, #Content ol li{
	margin-bottom:5px;
}
/*Gegensteuer Bootstrap für per Editor erstellte Tabellen*/
.website #Content table td td {
	padding:0;
}

/**************************************************************************************
  Navigation
**************************************************************************************/
.navbar-toggler {
  border:none;
  padding-right:0;
}
[data-bs-theme="dark"] .navbar-toggler-icon {
	width:2.5em;
	height:2.5em;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='square' stroke-miterlimit='5' stroke-width='1' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar {
	font-weight: 400;
}
.navbar-collapse{
	display:flex;
	flex-direction:column-reverse;
	align-items:flex-end;
}
.navbar-nav {
	width:100%;
}
.nav-link {
	color:var(--txt);
}
.dropdown-toggle {
	display:block !important;
}
.service.nav {
	font-size:14px;
}
/**************************************************************************************
  Header
**************************************************************************************/
.header {
	position:relative;
	padding-bottom:45%;
}
.header:after,
.swiper-slide:after {
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:1;
}
/*.header:after {
	/ *background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cline x1='95' y1='0' x2='15' y2='100' stroke='%23666' stroke-width='2' /%3E%3C/svg%3E");* /
	background-image: url('/images/diagonale.svg');
	background-position:center;
	background-repeat: no-repeat;
	
}*/
.home .header:after {
	background-color:rgba(0,0,0,0.25);
}
header .txt {
	position:absolute;
	top:40%;
	transform:translateY(-40%);
	z-index:3;
	width:100%;
	text-shadow: 0 0 3px rgba(0,0,0,0.5);
}
.header h1,
header .h1 {
	font-size:3rem;
	color:var(--highlight);
}
header p {
	font-size:1.5em;
}
header p:last-child {
	margin-bottom:0;
}
.header svg {
	left:49.5%;
	transform:translateX(-50%);
	z-index:2;
}

/**************************************************************************************
  Slider
**************************************************************************************/
.swiper-slide {
	padding-bottom:45%;
}
.swiper-initialized .swiper-button-prev, 
.swiper-initialized .swiper-button-next {
	color:white;
	text-shadow: 0 0 3px rgba(0,0,0,0.5);
}
.swiper-slide .outer {
	position:absolute;
	left:0;
	bottom:3vw;
	width:100%;
	z-index:2;
}
.swiper-slide .inner {
	display:inline-block;
	/*border-bottom:2px solid var(--highlight);*/
	margin-left:45px;
	margin-right:45px;
	
	color:var(--dark);
	background-color:#ffd20099;
	padding:15px 35px;
	transition:background-color 200ms linear;
	--p: 20px;
  	/*aspect-ratio: 3/2;*/
  	clip-path: polygon(var(--p) 0,100% 0,calc(100% - var(--p)) 100%,0 100%);
}
.swiper-slide .inner:hover,
.swiper-slide .inner:focus {
	background-color:#ffd200;
	transition:background-color 200ms linear;
}
.swiper-slide a {
	color:var(--dark);
	text-decoration:none;
}
.swiper-slide .title {
	font-size:1.3em;
	/*margin-bottom:1rem;*/
}
.subtitle a{
	color:var(--lightgrey);
	font-size:1em;
}

/**************************************************************************************
  Blog
**************************************************************************************/
.bimg img{
	margin-bottom:1em;
	cursor:pointer;
}
/**************************************************************************************
  Shop-Übersicht
**************************************************************************************/
.shopcat {
	padding-top:0;
	padding-bottom:0;
}
.shopcat > a {
	margin-bottom: 30px;
}
.produkt,
.felgen {
	display:flex;
	flex-direction:column;
	margin-top:30px;
	margin-bottom:15px;

}
.produkt:hover,
.produkt:focus {
}
.logos{
    /*padding-bottom:50%;*/
	width:100%;
    display: block;
    position: relative;
	overflow:hidden;
	text-align:center;
	min-height:50.6%;
	
  --p: 20px; /* control the shape (can be percentage) */
  aspect-ratio: 3/2;
  clip-path: polygon(var(--p) 0,100% 0,calc(100% - var(--p)) 100%,0 100%);
  
  margin-bottom:10px;
}
.home .logos{
}
.logos .fa{
	font-size:50px;
	color:#c9c9c8;
}
.shopcat .logos img,
.Shop .overview .img img {
    top: 50%;
	left:50%;
    transform: translate(-50%,-50%);
    position: absolute;
	height:100% !important;
	width:100%;
	object-fit:cover;
}
.home .shopcat .logos img{
	
}
.home .shopcat .txtStattImg .logos img {
	aspect-ratio: 1/1;
	object-fit:contain;
}
.Shop .overview .img img {
	object-fit:contain;
}
.uebersicht > a {
	margin-bottom: 20px;
}
.produkt h4 a,
.produkt h3 a,
.felgen h3 a, 
header .owl-item .inner {
	margin:0;
	padding: 8px;
	font-weight: normal;
	line-height:25px;
	text-decoration:none;
	transition: color 200ms linear;
	position:relative;
	z-index:1
}
.produkt h4,
.produkt h3,
.felgen h3 {
	flex-grow:1;
	display:flex;
	padding:7px 0px;
	margin-bottom:0;
	/*min-height:50px;*/
	border-bottom:1px solid var(--highlight);
	margin-right:20px;
}
.produkt .logos h4 {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	border:none;
	width:calc(100% - 30px);
	margin:0;
}
.produkt h4 a,
.produkt h3 a,
.felgen h3 a {
	padding:0;
	align-self:flex-end;
	width:100%;
	text-align:center;
}
.uebersicht a:hover h4{
	background-image: none;
	color: var(--txt);
	text-decoration: none;
	transition: background-color 200ms linear, color 200ms linear;
}
.Shop .overview > div {
	position:relative;
}
.Shop .overview > div.felgen:after {
	content:'';
	position:absolute;
	top:5px;
	right:15px;
	width:75px;
	height:45px;
	background:url(/images/Gutachten-Zertifikat-CH_blue.svg);
	background-size:contain;
}
.Shop .overview > div.new:before,
.Shop .detailview > div.new:before {
	content:'';
	position:absolute;
	top:5px;
	left:15px;
	width:75px;
	height:45px;
	background:url(/images/Stoerer-New.svg);
	background-size:contain;
	z-index:1;
}
.Shop .overview .img {
	display:flex;
	margin-bottom:10px;
	
	position: relative;
    overflow: hidden;
	min-height: 50.6%;
	--p: 20px;
	aspect-ratio: 3/2;
  	clip-path: polygon(var(--p) 0,100% 0,calc(100% - var(--p)) 100%,0 100%);
}
.Shop .overview img {
	margin: 0 auto;
	background-color:white;
}
.Shop .overview > div {
	transition:opacity 200ms linear;
}
.Shop .overview > div:hover,
.Shop .overview > div:focus{
	opacity:0.6;
	transition:opacity 200ms linear;
}
/*.overview a:hover,
.overview a:focus{
	color:black;
}
#ProductContent table {
	border-color:white;
}*/
#ProductContent table td {
	padding:0 10px;
	border-bottom-color:#c0c0c0;
}
#ProductContent table tr:first-child td {
	color:white;
	background-color:#c0c0c0;
}
#ProductContent table td > * {
	margin-bottom:0;
}
#ProductContent table tr {
	transition:background-color 200ms linear;
}
#ProductContent table tr:hover,
#ProductContent table tr:focus {
	color:black;
	background-color:#f1f1f1;
	transition:color 200ms linear, background-color 200ms linear;
}

/*Warenkorb*/
#Cart {
	padding-top:5px;
}
#Cart.fa-stack[data-count]:after {
	content:'';
  position: absolute;
  right: 0%;
  top: 0%;
  content: attr(data-count);
  font-size: 40%;
  padding: .5em;
  border-radius: 999px;
  line-height: .75em;
  color: white;
  color: black;
  text-align: center;
  min-width: 2em;
  font-weight: bold;
  background: white;
  border-style: solid;
  border-width:2px;
}
#Cart .fa-inverse {
	color:transparent;
}
#Cart.fa-2x,
#Cart .fa-2x {
	font-size:1em;
}
/*Gutachten*/
.Gutachten table,
.Gutachten table tr,
.Gutachten table th,
.Gutachten table td {
	display:block;
}

/**************************************************************************************
  Kontaktformular
**************************************************************************************/
form#Kontakt {position:relative;}
/*#Kontakt .form-group label{display:none;}*/
form#Kontakt .cbx label {display:inline-block;}
form#Kontakt .btn {
	min-width:110px;
}
form#Kontakt .tbl {
	table-layout:auto;
}
form#Kontakt .btn-group .btn {
	font-size:16px;
}

/**************************************************************************************
  Footer
**************************************************************************************/
footer {
	color:var(--dark);
	font-size:calc(1em - 1px);
	position:relative;
	background-color:var(--txt);
}
footer .container {
	position:relative;
	padding-top:30px;
	padding-bottom:30px;
}
footer h4, footer .h4 {
	color:inherit;
	font-size:inherit;
}
footer a {
	color:inherit;
}
/*footer input.form-control {
	background-color:transparent;
	color:rgba(255,255,255,0.5);
	border:none;
	border-bottom:1px solid;
	font-size:17px;
	padding-left:0;
	box-shadow:none;
	transition: padding-left 200ms linear, background-color 200ms linear, color 200ms linear;
	margin-top:10px;
	margin-bottom:20px;
}
footer input.form-control:focus,
footer input.form-control:active {
	padding-left:6px;
	transition: padding-left 200ms linear, background-color 200ms linear, color 200ms linear;
}*/
::-webkit-input-placeholder { /* Edge */
  color: #B1B1B1 !important;
}
:-ms-input-placeholder { /* Internet Explorer */
  color: #B1B1B1 !important;
}
::placeholder {
  color: #B1B1B1 !important;
}
footer input.btn,
footer input[type="button"] {
	background-color:transparent;
	color:var(--txt);
	border-color:var(--txt);
	max-width:167px;
	width:100%;
	padding:1px 0;
	text-align:center;
	font-size:24px;
	margin-top:20px;
	margin-bottom:20px;
}
/* Sticky Footer */
.page-wrap {
	flex: 1;
}

/**************************************************************************************
  Done
**************************************************************************************/
#Done {
	color: #B1B1B1;
	font-size:13px;
}
#Done a {color: #B1B1B1;text-decoration:none;}
/**************************************************************************************
  Formulare
**************************************************************************************/
input, input.form-control,
textarea, textarea.form-control,
select, select.form-control {
	color:#000000;
	padding:6px;
}
.form-control {
	background-color:white;
	border:2px solid transparent;
}
.form-control, .btn, .input-group-addon {
	border-radius:0;
}
label,
.label,
.form-check {
	font-size:16px;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="file"],
input[type="number"],
textarea,
select {
	font-size:17px;
	font-family: 'Source Sans Pro', sans-serif;
	color:#333333;
	margin:0 1px 1px 0;	
}
.admin input[type="text"],
.admin input[type="password"],
.admin input[type="email"],
.admin input[type="file"],
.admin input[type="number"],
.admin textarea,
.admin select {
	font-size:14px;
}
input[type="file"] {
	border:1px solid #000;
}
button, html input[type="button"], input[type="reset"], input[type="submit"], .btn {
	font-weight:600;
	text-align:center;
	border: 1px solid #666;
	color:var(--txt);
	background-color: #666;
	border-radius:5px;
	transition: all 200ms linear;
	
	/*margin: 0 auto; JC 17.09.2024*/
	font-size:1.5rem;
	padding: 10px 20px;
}
html .admin input[type="button"], 
.admin input[type="reset"], 
.admin input[type="submit"], 
.admin input[type="password"]
.admin .btn,
html footer input[type="button"]{
	font-size:1rem;
	padding:5px 10px;
	margin:0 0 3px 5px;
}
.btn:hover, .btn:focus, .btn.focus,
html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
	color:var(--txt);
	background-color:#c9c9c8;
	border-color:#c9c9c8;
	transition: all 200ms linear;
}
.btn.invert,
button.invert {
	background-color:transparent;	
	color:#666;
}
input[disabled] {
	background-color:#ddd;
	border-style:dotted;
	border:none;
}
input#Code {
	margin-top:0;
	margin-right:0;
	z-index:0;
}
form .input-group-addon:last-child {
	min-width:111px;
	padding:0 13px;
	line-height:31.25px;
	background-color: #d6d6d6;
	border-top-left-radius:0;
	border-bottom-left-radius:0;
}
.form-control:focus{
	border: 2px solid var(--highlight);
	-webkit-box-shadow: none;
	box-shadow: none;
}
/*BS4: bei Radio-Buttons haben wir zusätzlich einem Element die gleichlautende ID gegeben wie der Name der Radios*/
.label.is-invalid {
	color:#dc3545;
}
.form-control.is-invalid {
	background-color: #ffcccc;
}
.btn.focus, .btn:focus {
	box-shadow:none;
}
.btn-group .btn:not(:first-child) {
	border-left-color: white;
}
.date-pick {
	display:inline-block;
	max-width:calc(100% - 20px);
}
/*Honeypot Formular Feld*/
form .titel {
	opacity: 0;
}
form .titel * {
	height: 1px;
	font-size: 1px;
	padding: 0;
	border:none;
	margin:0;
}
form .form-group.titel * {
	float:left;
}
#cookie_directive_container > * {
	/*background-color:rgba(0,0,0,0.8);
	color:var(--txt);*/
	background-color:var(--highlight);
	color:var(--dark);
	font-size:16px;
	padding-top:17px;
}
#cookie_directive_container a[href="#"] {
	color:var(--txt);
	padding:6px 12px;
	margin: 0 0 6px 12px;
	background-color:var(--dark);
	text-decoration:none;
}
#cookie_directive_container a {
	color:var(--dark);
	text-decoration:underline;
}
#cookie_directive_container a:hover {
	color:var(--grey);
	text-decoration:none;
}

/**************************************************************************************
  Modal Dialog, PopUp
**************************************************************************************/
.modal-dialog .close {
	float:left;
}

/**************************************************************************************
  Listen-, Tabellen-Ansicht, Pagination
**************************************************************************************/
.table > * > tr:first-child > th {border-top-width:0;}/*gegen BS4*/
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td, 
.table > tfoot > tr > td {
	border-top-width:1px;
	border-top-style:solid;
	border-color:#000;
	line-height: 1.42857;
    vertical-align: top;
}
.table-hover > tbody > tr:hover {
	background-color:rgba(255,255,255,0.25);
}
.table-hover > tbody > tr:hover > td {
	background: none;
}
.table > thead > tr > th.listicon,
.table > tbody > tr > th.listicon,
.table > tfoot > tr > th.listicon,
.table > thead > tr > td.listicon,
.table > tbody > tr > td.listicon, 
.table > tfoot > tr > td.listicon {
	padding-left:0;
	padding-right:0;
	text-align:center;
}
.listicon:last-child {
	padding-right:3px !important;
}
.table table {
	/*nur so scheint sich der Border überschreiben zu lassen*/
	border-top:2px solid transparent;
}
td.back {text-align:center;}
.pagination > li > a, 
.pagination > li > span {
	color:#000;
	border-color:#c9c9c8;
	transition:color 200ms linear, border-color 200ms linear, background-color 200ms linear;
}
.pagination > li > a:hover, 
.pagination > li > span:hover, 
.pagination > li > a:focus, 
.pagination > li > span:focus {
	color:white;
	border-color:#c9c9c8;
	background-color:#c9c9c8;
	transition:color 200ms linear, border-color 200ms linear, background-color 200ms linear;
}
.pagination > .active > a, 
.pagination > .active > span, 
.pagination > .active > a:hover, 
.pagination > .active > span:hover, 
.pagination > .active > a:focus, 
.pagination > .active > span:focus,
.page-item.active .page-link /*BS4*/ {
	background-color:#c9c9c8;
	border-color:#c9c9c8;
	z-index:auto;
	cursor:default;
}
.tbl {display:table; width:100%;table-layout:fixed;}
.tbl > .trow {display:table-row;}
.tbl > *,
.tbl > .trow > *,
.tbl td {
	vertical-align:top;
	display:table-cell;
	padding:0 1% 1% 1%;
}
.tbl > *:first-child,
.tbl > .trow > *:first-child,
.tbl td:first-child {
	padding-left:0;
}
.tbl > *:last-child,
.tbl > .trow > *:last-child,
.tbl td:last-child {
	padding-left:0;
}
form td {font-size:0.9em;line-height:1.2;}
.admin .tbl > *,
.admin .tbl > .trow > * {
	vertical-align:middle;
	padding:3px 6px;
}
body:not(.admin) .table a {
	color:black;
}
/*Entgegensteuern von Bootstrap*/
/*.table-responsive {border:none;font-size:14px;}*/
.table-responsive > .table > tbody > tr > td {white-space:normal;}
/**************************************************************************************
  Admin
**************************************************************************************/
.CuteEditorGroupMenuCell img {
	box-sizing:content-box;
}
#CE_Editor1_ID {
	width:100% !important;
	line-height:initial;
	font-size:12px;
}

.admin table,
.admin .table > :not(caption) > * > * {
	color:var(--txt);
	background-color:var(--dark);
}
.admin table, .table {font-size:16px;}

@media (min-width:576px){	
}
@media (min-width:768px){
	.produkt h4 {
		font-size:calc(1.75rem + .3vw);
	}
	.swiper-slide .inner {
		margin-left:0;
		margin-right:0;
	}
}
@media (min-width:992px){
	html{
		font-size:14px;
	}
	body {
		font-size:18px;
	}
	h1, .h1 {
	}
	h2, .h2 {
	}
	h3, .h3 {
	}
	h4, .h4 {
	}
	.header {
		padding-bottom:22%;
	}
	header h1,
	header .h1 {
		font-size:3.8rem;
	}
	.swiper-slide {
		padding-bottom:16%/*35%*/;
	}
	.produkt h4 {
		font-size:calc(1rem + .3vw);
	}
	button, html input[type="button"], input[type="reset"], input[type="submit"], .btn {
		font-size:1.2rem;
	}
}
@media (min-width:1200px){
	.navbar-collapse{
		flex-direction:column;
		align-items:flex-end;
	}
	.navbar-nav {
		width:auto;
	}
	.nav-item:not(:last-child) {
		margin-right:15px;
	}
	.produkt h4 {
		font-size:calc(1.275rem + .3vw);
	}
}