:root {
--color-primary: #0089cf ;
}

html { 
  scroll-behavior: smooth; 
}

/* Überschriften und allgemeine Elemente */

body {
      font-family: ''Open Sans', 'PT Sans', sans-serif;
}

.custom-ol-list li {
	margin-bottom: 1.5rem;
}
.custom-ol-list ::marker {
  color: var(--color-primary);
  font-weight:bold;
}

h1 {
color: var(--color-primary);
font-size: 4rem;
margin-top: 5rem;
margin-bottom: 3rem;
}

h2 {
	margin-bottom: 30px;
color: #0089cf;
font-weight:bold;
}

.linkziel h2 {
margin-top: -150px;
padding-top:200px;
}

.produktseite h2 {
font-size: 1.8rem;
}

.name_zusatz {
	color: #000000;
	font-size: 65%;
	font-weight: bold;
	text-transform: uppercase;
}

.img-bordered img {
border: 1px solid #efefef;
box-shadow: 0px 0px 10px rgb(0 137 207 / 35%);
}


.produktseite .img-bordered img{
border: 1px solid #dddddd;
box-shadow: none;
transition: all 0.2s ease-in-out;
margin-bottom:25px;
padding: 15px;
}

.produktseite .img-bordered img:hover {
border-color: #0089CF;
}

.plus img {
  box-shadow: 0px 0px 6px 4px #b9d546;
}

.beschichtungshauptbild img {
transition: 0.4s all ease-in-out;
}

.beschichtungshauptbild img:hover {
transform: scale(1.05);
transition: 0.2s ease-in-out;
}


.rounded {
  border-radius: 1.25rem !important;
}

.trenner .ce-div{
	background-image: url('../img/trenner.svg');
	background-repeat: no-repeat;
	width: 15%;
	height: 52px;
	background-size: contain;
	margin-top: 50px;
	margin-bottom: 50px;
	border: none;
}

#mainHeader, #mainHeader_scrolled {
	background-color: white;
}
section {
	padding-top:150px;
	padding-bottom:150px;
}

#fertigung {
  background-size: cover;
  min-height: 750px;
background-image: url('../img/praezision-in-der-fertigung.jpg');
background-position: center center;
}

#qualitaetskonstanz{
  background-size: cover;
  min-height: 750px;
background-image: url('../img/made-in-germany.jpg');
background-position: center center;
}

.headerbild {
background-size: cover;
min-height: 550px;
background-repeat: no-repeat;
background-position: center bottom;
}

.bi.bi-arrow-right-circle-fill {
  background-image: url('../img/arrow-right-circle-fill.svg');
  height: 16px;
  min-width: 16px;
  display: inline-block;
  background-repeat: no-repeat;
  position: relative;
  top: 2px;
  margin-right: 5px;
}

/* Hauptnavi */

.main-navi {
  background-color: #0089cf;
}

@media (min-width: 1200px) { 
	.main-navi {
		background-color: transparent;
		top: -85px;
		margin-bottom: -56px;
	}

#mainHeader_scrolled .main-navi {
top: -70px;
}
}

.navbar-dark .navbar-nav .nav-link {
	color: #ffffff;
}

.main-navi .nav-link {
	border-top: 3px solid transparent;
}

.main-navi .nav-link.active {
	border-top: 3px solid white;
	box-shadow: 2px -10px 8px -9px white;
}

.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active {
	color: #fff;
}

.dropdown-submenu .dropdown-menu {
	top: 0;
	left: 100%;
	margin-left: .1rem;
	margin-right: .1rem;
}

/*
@media (min-width: 1200px) { 
#main-navi li.dropdown:hover > .dropdown-menu {
		 display: block;
}
}
*/

/* Homepage Slider */

#slider {
	padding-top:0px;
	padding-bottom:50px;
}

#headerslider-home .carousel-item {
	height: 570px;
	background-size: cover;
	background-position: center 52%;
	background-repeat: no-repeat;
}

.bgkreis {
	position: relative;
	top: -58px;
	left: -133px;
	width: 134%;
	rotate: -27deg;
}

.np {
	width:80%;
}

.slide1 {
	background-image: url("../img/background_sustainability.jpg");
}

.slide1 .carousel-caption {
	color: blue;
	bottom: 303px;
	left: 11%;
	font-size: 40px;
	font-weight: bold;
	text-align: left;
}


@media (min-width: 576px) { 

	.slide1 .carousel-caption {
		color: green;
	}

	.bgkreis {
		position: relative;
		top: -229px;
		left: -133px;
		width: 125%;
		rotate: -11deg;
	}

	.slide1 .carousel-caption {
		bottom: 357px;
		left: 22%;
		font-size: 40px;
	}

}

@media (min-width: 768px) { 

	.slide1 .carousel-caption {
		color: red;
	}


	.np-gross {
		position: absolute;
		top: 41%;
		width: 58%;
		left: 68px;
	}

	.bgkreis {
		position: relative;
		top: -350px;
		left: -133px;
		width: 119%;
		rotate: -18deg;
	}

	.slide1 .carousel-caption {
		bottom: 357px;
		left: 21%;
		font-size: 40px;

	}

}

@media (min-width: 992px) { 

	.slide1 .carousel-caption {
		color: blue;
	}


	.bgkreis {
		position: relative;
		top: -350px;
		left: -133px;
		width: 95%;
		rotate: -18deg;
	}

	.np-gross {
		position: absolute;
		top: 41%;
		width: 46%;
		left: 68px;
	}

	.slide1 .carousel-caption {
		bottom: 357px;
		left: 18%;
		font-size: 40px;
	}
}

@media (min-width: 1200px) { 

	.slide1 .carousel-caption {
		color: black !important;
	}

	.bgkreis {
		position: relative;
		top: -350px;
		left: -133px;
		width: 83%;
		rotate: -18deg;
	}

}

@media (min-width: 1500px) { 

	.slide1 .carousel-caption {
		color: green;
	}

	.bgkreis {
		position: relative;
		top: -270px;
		left: -133px;
		width: 48%;
		rotate: -1deg;
	}

	.slide1 .carousel-caption {
		bottom: 276px;
		left: 8%;
		font-size: 40px;

	}

	.np-gross {
		position: absolute;
		top: 23%;
		width: 33%;
		left: 900px;
	}

}

@media (min-width: 1500px) {
	.achtsam {
		display: block !important;
		font-size: 20px;
		position: relative;
		left: 0;
		width: 26%;
		color: rgb(99,106,110);
		font-weight: normal;
	}
}

/* spezielle Sections */

#aktuelles, #vorteile {
	background-color: rgb(0 137 207 / 7%);
	padding-top: 70px;
	padding-bottom: 130px;
	box-shadow: 0 2px 107px 3px rgb(0 137 207 / 35%);
}

#nachhaltigkeit {
	background-color: #b2d235;
	padding-top: 70px;
	padding-bottom: 130px;
	box-shadow: 0 2px 107px 3px rgba(178,210,53,0.75);
}

#nachhaltigkeit h2,  #nachhaltigkeit h3, #nachhaltigkeit h3 a {
color: white;
}

/*
* Off Canvas
* --------------------------------------------------
*/


/* @media screen and (max-width: 767px) { */

@media screen and (max-width: 991px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -80%; /* 6 columns */
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -80%; /* 6 columns */
}
.row-offcanvas-right.active {
right: 80%; /* 6 columns */
}
.row-offcanvas-left.active {
left: 80%; /* 6 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 70%; /* 6 columns */
}

.row-offcanvas-left.active {
    .sidebar-offcanvas {
        max-width: 70%;
    }
}

}

.left_nav_img_wrap {
  max-width: 53px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}


.leftnavi-sub li {
list-style-type: none;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
margin-top: 1px;
margin-bottom: 1px;
}

.leftnavi-sub li:hover {
background-color: #efefef;
}

.leftnavi-sub li:hover a:hover {
text-decoration: none;
}


.leftnavi-sub a {
border-radius: 0.5rem;
}

.leftnavi-sub a.current {
font-weight: bold;
}

.leftnavi-sub {
padding-left: 0;
}