/* Links und Farben */

a, a h2:hover, a p:hover {
	text-decoration: none !important;
}


/* Beim Sprung auf einen Anker mit '/Seite#Anker' wird die Selectbox mit der entsp. ID(=Anker) hervorgehoben */
select:target { border: 0.125em solid #0a5; }

figure.img-square {
	background-size: contain
}

.img-square { 
	background-color: contain;
}


/* Produktübersicht (MegaMenu) */

	.megamenu {
		position: static;
	}
	
	#megamenu {
		background-color: rgba(248,248,248,0.92);
		backdrop-filter: blur(5px);
		color: #777;
	}
	
	#megamenu a.nav-link {
		color: #3da3dc !important;
	}
	
	#megamenu a.nav-link:hover {
		text-decoration: underline;
	}
	
	#megamenu a.nav-link:focus {
		text-decoration: underline;
	}
	
	.navbar-nav .dropdown-menu {
		top: auto;
		left: 0 !important;
	}

	
/* Gestaltung Standard-Menüelement und Produkt-Info */
.menu-card {
	background-color: #eee8aa;
	border: 1px solid #cecece;
	color: #0099d9;
}
.menu-card:hover {
	background-color: #ffffff;
	border: 2px solid #0099d9;
}
.menu-card .img-square {
	background-position: top;
}

/* 3-Spalten Text-Design */

.column3 {
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
	-webkit-column-gap: 2em; /* Chrome, Safari, Opera */
    -moz-column-gap: 2em; /* Firefox */
    column-gap: 2em;
}

/* 3:2-Bild für Konfigurator */
#frmConfigurator .img-square {
    padding-top: 66%;
}	

/* Positionierung des Titels im Profitipp */
.profitipp-titel{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
}

/* Die Sidebar mit den Produktinformationen positionieren */
#configuratorSidebar{
	position: sticky;
	top: 7%;
	margin-bottom: 1rem;
}


/* Bootstrap carousel custom Eigenschaften */
.carousel-img-container{
	width: 40%;
	display: inline-block;
	float: right;
}

.carousel-caption-custom-container{
	display: inline-block;
	width: 60%;
	height: 100%;
	padding: 1rem 5% 0 10%;
	color: black;
}

.carousel-img{
	width: 100%;
}

.carousel-item a{
	width: 100%;
	height: 100%;
}

.carousel-produkte .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.carousel-produkte .carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
.carousel-produkte .carousel-indicators li{
	background: rgba(0, 0, 0, .7);
}
.carousel-produkte .carousel-indicators .active{
	background-color: rgba(0, 0, 0, 0.4);
}

.carousel-produkte .carousel-indicators {
	width: 30%;
}

/* carousel-profis Eigentschaften */
.carousel-profis .carousel-item{
	width: 100%;
	padding: 0 10%;
}
.carousel-profis-item{
	width: 30%;
	margin: 2% auto;
	margin-bottom: 2%;
}

.carousel-profis-container{
	display: flex;
	justify-content: center;
}

/* Footer */
.footer ul,
.footer p {
	padding: 0;
	margin-bottom: .5rem;
}

/* Farbe für Links im Footer */
#footer ul li a {
	color: #fff
}

#footer a {
	color: #fff
}

.image-container { 
	overflow: hidden;
}

[style*="--aspect-ratio"] > :first-child {
	width: 100%;
}

[style*="--aspect-ratio"] > img {
	height: auto;
	object-fit: contain;
	padding: 10px;
}

@supports (--custom:property) {
	[style*="--aspect-ratio"] {
		position: relative;
	}

		[style*="--aspect-ratio"]::before {
			content: "";
			display: block;
			padding-bottom: calc(100% / (var(--aspect-ratio)));
		}

		[style*="--aspect-ratio"] > :first-child {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
		}
}

.btn-primary {
	background-color:rgba(0,122,194,1);
	border-color: rgba(0,122,194,1);
	}
h1.card-title, h2.text-info{
	color:rgba(0,122,194,1)!important;
	}