/* Fokus sichtbar machen  */
.klickbtn:focus-visible,
.klickbtn2:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
submit:focus-visible  {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

#menu .on, #menu ul li a:hover {
    color: rgb(10, 61, 87);
    background: white;
}

.wrap{
	width: 80%;
}

.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.grid-item {
  width: 30%;
  margin: 1.5%;
  perspective: 1000px;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  background-color: white;
  color: #0a3d57; /* Weißer Text für die gesamte Box */
  height: 250px;
  border-radius: 10px;
  border: 2px solid #0a3d57;
  font-size: 16px;
}

.grid-container h2{
	color: #0a3d57;
}

.bildtext {
	padding: 10px;
	background-color: #67a52d;
	color: #fff;
	text-align: center;
	border-radius: 1px;
	font-weight: 450;
}


.icon-sortiment {
  width: 70px;
}

hr.starthr {
    width: 50px;
    border-top: 1px solid white;
    margin-bottom: 20px;
    margin-top: 20px;
}

hr.leistungenhr {
    width: 50px;
    border-top: 2px solid #0a3d57 !important;
    border: none;
    margin-bottom: 20px;
    margin-top: 20px;
}


.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.back {
	background-color: #000; /* Dunkler Hintergrund für die Rückseite */
	transform: rotateY(180deg);
	border-radius: 10px;
}

#back ol, ul {
     padding: 0 0 0 0px; 
}

hr {
    border: 1px solid #163d57;
}

#begriff_close,
.bgw{
	background:#fff;
}

.sslicon,
.back-to-top .path{
	fill:#fff;
}

#begriffbox,
#footer_end,
#footer_end a{
	color:#fff;
}

.arrow::after{
	border-left: 10px solid #666;
}

#teamicon {
	background:url(../bilder/team.svg) no-repeat center top;
}	

#linksicon {
	background:url(../bilder/links.svg) no-repeat center top;
}

.mittig{
	margin: 0 auto 40px auto;
	float: none;
	clear: both;
}

.verticalcenter {
	display: flex;
	align-items: center;
}

.teaser-box {
    border: 2px solid #0a3d57; 
    border-radius: 15px; 
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    margin: 20px;
    position: relative; 
}


.teaser-box h2 {
    position: absolute;
    top: -20px; 
    left: 20px;
    background: #fff; 
    color: #0a3d57; 
    padding: 5px 15px;
}

.contact-box svg {
    fill: rgb(0, 186, 27);
    height: 48px;
    padding: 8px;
    width: 48px;
}

.contact-box {
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    border: 2px solid #0a3d57;
    border-radius: 15px;
    padding: 20px;
	width: 80%;
    margin: 0 auto;
}

.contact-section {
    flex: 1; 
    text-align: center;
    padding: 10px;
}

.contact-section img {
    width: 50px; 
    height: 50px;
    margin-bottom: 10px; 
}

.contact-section h3 {
    color: #0a3d57; 
    margin-bottom: 5px; 
}

.contact-section p {
    color: #333; 
    margin: 5px 0;
}


.myButton {
    background-color: #0a3d57;
    border-radius: 10px;
    border: 1px solid #0a3d57;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-size: 16px;
    padding: 10px 20px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #0a3d57;
}
.myButton:hover {
    background-color: #ffffff;
    color: #0a3d57;
}
.myButton:active {
	position:relative;
	top:1px;
}

#logo{
	width: 280px;
}

#logo img{
	margin-top: 0px;
}


@media (max-width: 1360px) and (min-width: 1201px){
	
	

}

@media (max-width: 1360px) and (min-width: 981px){
	
	

}

@media (max-width: 1200px) and (min-width: 981px){
	
	

}

@media (max-width: 980px) and (min-width: 781px){
	
	

}

@media (max-width: 780px) and (min-width: 481px){
	
	

}


@media (min-width: 780px) {

	

}

@media (max-width: 1680px) {
	
	

}

@media (max-width: 1360px) {
	
	#logo img {
        margin-top: 0px;
    }
	
    #logo {
        width: 200px;
    }

}


@media (max-width: 1200px) {

	/*Nur Design neu*/
	
}

@media (max-width: 980px) {
	
	.verticalcenter {
		display: block;
	}
	
	
	.grid-item {
		width: 46%;
	}
	
	.spalte23{
		width: 75%;
	}
	
}

@media (max-width: 780px) {

	#menu ul ul li{
		border-left:1px solid #fff;
		border-right:none;
	}
		
	.contact-box {
		flex-direction: column; /* Stapelt die Abschnitte vertikal */
		align-items: center; /* Zentriert die Inhalte horizontal */
	}

	.contact-section {
		width: 100%; /* Jeder Abschnitt nimmt die volle Breite ein */
		padding: 20px; /* Mehr Padding für bessere Lesbarkeit */
	}
	
	.grid-item {
		width: 100%;
	}
	
	}




@media (max-width: 480px) {
	
	/*#teaser:not(.liquid-slider) {
		height: 200px !important;
	}
	
	#inhalt_teaser {
		margin-top: 200px;
	}*/
	
}