@font-face {
    font-family: 'skia'; /* Benenne die Schriftart */
    src: url('ufonts.com_skia.ttf') format('truetype'); /* Gib den Pfad zur OTF-Datei an */
}
* {
  font-family: "skia", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  box-sizing: border-box;
  font-size:20px;
	color:#000000;
}
.qr{
	width:100%;	
}
body{
  margin:0;
  padding:0;
}
#email1{
	display:none;
}
#logo{
  line-height:0;
  padding:0;
  text-align:center;
  animation:opac 4s;
  margin-bottom:100px;
  }

#menubutton{
	float:left;
}
#menubutton a{
	color:#3d1a06;
	text-decoration:none;
}
.therow::after {
  content: "";
  clear: both;
  display:table;
}
.therow{
  padding-top:20px;
	  background-color:#ffffff;
}

html {
    font-family:"skia",Arial,sans-serif;
  scroll-behavior: smooth;
	font-size:20px;
}
h1{
  font-family:"skia",Arial,sans-serif;
  font-size:3rem;
  color:#3d1a06;
  line-height:3.2rem;
	font-weight:bold;
}
h2{
  font-family: "skia", sans-serif;
  font-size:1.3rem;
  color:#3d1a06;
  font-weight:bold;
  margin-bottom:0;
}
h3{
  font-family:"skia",Arial,sans-serif;
  font-size:1rem;
  color:#444444;
	margin-top:0;
}
#phonenav{
  display:none;
  position:absolute;
  width:100%;
  z-index:10;
  padding-top:1rem;
  background-color:#f9ece0;
  margin-top:0;
}
.navbar {
  background-color: #ffffff;  
  /* background-color: #ff6600; --> */
  color: #3d1a06;
  padding:15px 0 5px 0;
  text-align:center;
  width:100%;
}
.navbar a{
  color:#3d1a06;
}
.phoneonly{
	position:sticky;
	top:0;
	z-index:30;
}
.phoneonly div{
	padding:0;

	border-top:1px solid #3d1a06;
	margin:0;
}
.exceptphone{
  display:none;
}
.exceptphone div{
  display:inline-block;
}
.exceptphone a:hover{
	text-decoration:none;
}
.navitem{
  width:auto;
  padding: 10px 20px 10 20px;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
  text-align: center;
  font-weight:bold;
}
.navitem:hover{
  border-bottom:2px solid #3d1a06;
}
#header fa{
	float:right;	
}
#phonenav .navitem{
  display:block;
  background-color:#f9ece0;
  color:#3d1a06;
}
#phonenav .navitem:hover{
   background-color:#3d1a06;
   color:#ffffff;
}
.image{
  width:100%;
  min-height:180px;
  max-height:500px;
  object-fit:contain;
}
.fade{
  animation:opac 4s
}
.legende{
  font-size:0.8rem;
}
.facebook{
  height:25px;
  text-align:center;  
}
#logo img{
  object-fit:contain;
  width:100%;
}
.footer {
	text-align:left;
}
/* For mobile phones: */
[class*="col-"] {
  float: left;
  width: 100%;
  padding-top:1px;
}

.text{
  width:initial;
  padding-left: 2rem;
	padding-right:2rem;
}
.form{
	width:100%;	
}
ul {
  padding-left:22px;
}
li{
  padding-bottom:0.4rem;
}
.bg-grau{
  background-color:#f9ece0;
}
.bg-dunkelgrau{
  background-color:#d9bfa9;
}

.bg-grau-w{
  background-color:none;
}

#Angebot a,
#Preise a,
#Downloads a{
  display:inline-block;
  padding:0 5px 0 5px;
  margin:5px 0 5px; 0;
  color:#ffffff;
  text-decoration:none;
  background-color:#3283dc;

}
#Angebot a:hover,
#Preise a:hover,
#Downloads a:hover{
  background-color:#ff6600;
}
#Downloads a{
}
.anker{
  height:150px;
}
.knoten{
  width:95%;
}
.center{
  text-align:center;
}
.linksdiv{
  display:flex;
  align-items:center  
}
.links{
  object-fit:contain;
}
#Links div{
  padding-bottom:20px;
}
.npb{
  padding-bottom:0 !important;
} 
#Links a{
  color:#000000;
}
.zitat{
  color:#3d1a06;

  margin-top: 2rem;
  margin-bottom: 2rem;
  font-style:italic;
}
#Daten table{
  width:100%;
  border-collapse:collapse;
}
#Daten th,
#Daten td{
	padding: 20px;
	text-align: left;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
}
#Daten tr:nth-child(even) {
	background-color: #f2f2f2;
}

#Adresse a{
  text-decoration:none;
  color:inherit;
}
#Referenzen img{
	padding-bottom:2rem;	
}

#kontakt2{
  padding-top:0;
}
#kontaktform input,
#kontaktform select,
#kontaktform textarea{
  margin-bottom:0.5rem;
  width:90%;
}
#kontaktform textarea{
  height:13rem;
}
#Produkte{
	display:none;
}
#ProdukteMobile{
	display:block;
}
#product-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.carousel-caption h3{
	color:#ffffff;
	font-size:1.5rem;
	 background-color: rgba(0, 0, 0, 0.5);
}
.product-slide {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s ease-in-out;
}

.product-slide img {
  width: 100%;
  height: auto;
  display: block;
}


.maps{
  width:100%;
  min-height:500px;
  max-height:800px;
}

.fa {
  text-decoration: none;
	padding:0.5rem;
	text-align:center;
}
.fa:hover {
  opacity: 0.7;
}
.fa-facebook {
  background: #3B5998;
  color: #ffffff !important;
}
.fa-linkedin {
  background: #007bb5;
  color: white !important;
}

@keyframes opac{
  from{opacity:0} to{opacity:1}
}


@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(200px) scale(1);
  }
  80%{
	  opacity:0.6;
	}
  to {
    opacity: 0;
    transform: translateY(-150px) scale(0);
  }
}
  .foto{
    margin-top:25px;
	transition: opacity 5s ease-in-out; /* optional */
  	animation:opac 5s;
  }




@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
  .phoneonly{
    display:none;
  }
  .exceptphone{
    display:block;
  }
  #logo img{
	width:initial;
  }
	.footer {
		text-align:center;
	}

  .foto{
    margin-top:25px;
	transition: opacity 5s ease-in-out; /* optional */
  	animation:opac 4s;
  }
  #Preise th,
  #Preise td{
    font-size:0.8rem;
  }
  .bg-grau-w{
    background-color:#dddddd;
  }
  .retti{
    height:325px;object-fit:cover;
  }
  .therow{
    padding-bottom:60px;
  }
	#ProdukteMobile{
		display:none;
	}
	#Produkte{
		display:block;
	}
	h2{
		text-align:initial;
	}
	h3{
		text-align:initial;	
	}
	.text{
 	 width:100%;
	 margin-left:0;
	}
	.titelzeile{
		margin-top:80px;
	}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
  .phoneonly{
    display:none;
  }
  .exceptphone{
    display:block;
	position:sticky;
	  top:0;
	  margin-bottom:30px;
  }
  #logo img{
	width:initial;
  }
  .foto{
    margin-top:25px;
	transition: opacity 5s ease-in-out; /* optional */
  	animation:opac 4s;
  }
  *{
    font-size:24px;
  }
  #Preise th,
  #Preise td{
    font-size:1rem;
  }
  .bg-grau-w{
    background-color:#dddddd;
  }
.qr{
	width:140px;	
}

}