@font-face {
    font-family: 'Hubot'; /* Benenne die Schriftart */
    src: url('HubotSans-VariableFont.ttf') format('truetype'); /* Gib den Pfad zur OTF-Datei an */
}
:root {
  --color1: #000000;
  --color2: #7ea6c8;
  --color3: #e30613;
}

* {
  font-family:"Hubot",Arial,sans-serif;
  font-weight:300;
  box-sizing: border-box;
  font-size:20px;
}
body{
  margin:0;
  padding:0;
}
#Info{
	line-height:1.5em;
}

#email1{
	display:none;
}
#logo {
    line-height: 0;
    padding: 0;
    text-align: center;
    background-image: url('ezeefit.png');
    background-size: contain;
	margin: 0 15% 0 15%;    background-repeat: no-repeat;
    background-position: center;
    height: 200px;
    transition: background-image 2s ease-in-out;
    animation: opac 3s;
    /* border-top: 1px solid #000000; */
}
#logo img{
	text-align:center;
	width:60%;
  }
#logoklein{
	height:3em;
	margin:0.3em 10% 0 0;
	border:0;
    transition: img 2s ease-in-out;
    animation:opac 3s;
}
#teaser {
    background-image: url('teaser.jpg');
    height: 250px;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 60px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.sticky + .content {
  padding-top: 60px;
}


#menubutton{
	float:left;
}
#menubutton a{
	color:#ffffff;
	text-decoration:none;
}
#menupc{
	position: sticky; 
	top:-75px;
	border-bottom:1px none var(--color2);	
	z-index:50;
}
.therow::after {
  content: "";
  clear: both;
  display:table;
}
.therow{
  padding-top:20px;
  background-color:#ffffff;
  padding-bottom:1em;
}
.bildbezeichnung{
	padding-left:1rem;	
}
html {
    font-family:"Hubot",Arial,sans-serif;
  scroll-behavior: smooth;
	font-size:20px;
	 scroll-padding-top: 88px;

}
h1{
  font-family:"Hubot",Arial,sans-serif;
  font-size:2rem;
  color:#000000;
  line-height:2.1rem;
  font-weight:500;
	color:var(--color3);
	margin-bottom:1em;
	text-align:center;
	margin-top:2em;
}
h2{
  font-family: "Hubot", sans-serif;
  font-size:1.2em;
  color:var(--color1);
  margin-bottom:0;
  text-align:left;
  font-weight:bold;
}
h3{
  font-family:"Hubot",Arial,sans-serif;
  color:#000000;
  font-weight:500;
  margin:0;
  padding:0;
}
details summary {
    display: block;
    padding: 0.5rem;
    background-color: steelblue;
    color: floralwhite;
    font-weight: bold;
    cursor: pointer;
    border-radius: 3px;
    box-shadow: 0 -1px 1px 1px rgba(0,0,0,0.5);
    width: 100%;
    text-align: left;
}

details summary::before {
    content: "+ ";
    padding-right: 0.25rem;
}

details[open] summary::before {
    content: "- ";
    font-style: italic;
}   

#haendlerpc{
	display:none;	
}
#haendlerphone{
	display:block;	
}

#phonenav{
  display:none;
  position:absolute;
  width:100%;
  z-index:10;
  padding-top:1rem;
  background-color:#e5e5e5;
  margin-top:0;
}
.navbar {
  background-color: #ffffff;  
  /* background-color: #ff6600; --> */
  color: #000000;
  padding:15px 0 0.2em 0;
  text-align:center;
  width:100%;
}
.navbar a{
  color:var(--color1);
}
.phoneonly{
	position:sticky;
	top:0;
	z-index:30;
}

.phoneonly div{
	padding:0;
	border-top:1px solid #000000;
	margin:0;
}
.exceptphone{
  display:none;
}
.exceptphone div{
}
.exceptphone a:hover{
	text-decoration:none;
}
.navitem{
  width:auto;
  padding: 5px 20px;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
  text-align: center;
  font-weight:bold;
}
.navitem:hover{
  background-color:var(--color3);
  color:#ffffff;
}
.navitemtitel:hover{
	background-color:var(--color3);
	color:#ffffff;
}
.siegel{
	text-align:center;
	padding-bottom:1rem;
}
#header fa{
	float:right;	
}
#phonenav .navitem{
  display:block;
  background-color:#e5e5e5;
  color:var(--color1);
}
#phonenav .navitem:hover{
   background-color:#e5e5e5;
   color:#000000;
}
.iconleft{
	text-align:center;
	padding-bottom:1rem;
}
.iconright{
	text-align:center;
	padding-bottom:1rem;
}
.image{
  width:100%;
  min-height:180px;
  max-height:500px;
  object-fit:cover;
}
.fade{
  animation:opac 3s
}
.legende{
  font-size:0.8rem;
}
.facebook{
  height:25px;
  text-align:center;  
}
#logo .image{
  object-fit:contain;
}
.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
  float: left;
  width: 100%;
  padding-top:1px;
}

.screenonly{
	display:none;	
}

.text{
  /* width:initial; */ 
  padding-left:2rem;
  padding-right:2rem;
}
ul {
  padding-left:22px;
}
li{
  padding-bottom:0.4rem;
}
.bg-grau{
  background-color:var(--color2);
}
.bg-dunkelgrau{
	background-color:#cccccc;
}
.bg-grau-w{
  background-color:none;
}
#hliste{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
	align-items: stretch;
    flex-wrap: wrap;
	gap:20px;
}
#hliste li{
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    list-style: none;
	flex:1;
}
#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:var(--color1);
  font-size:1.2rem;
  margin-top: 2rem;
  font-weight:400;
}
#Preise table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
#Preise th,
#Preise td{
  vertical-align:top;
	padding:0.3em 0 0.3em 0;
}
#Preise th{
  text-align:left;
}
#Preise td:last-child{
  text-align:right;
  width:10%;
}
#Preise td:first-child{
  width:5%;
}
#Preise td:nth-last-child(2){
  width:25%;
}
#Preise tr:first-child{
  border-top:1px solid var(--color3);
}
#Preise tr{
  border-bottom:1px solid var(--color3);
}
#Preise tr:nth-child(odd){
	/*background-color:var(--color3);*/	
}
td{
	border-bottom:1px solid #ffffff;	
}
th{
	font-weight:bold;
	text-align:left;
	border-bottom:2px solid #ffffff;
	margin-bottom:0.5em;
}
td a{
	text-decoration:none;
	color:#000000;
}
#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:11rem;
}
#Produkte{
	display:none;
}
#ProdukteMobile{
	display:block;
}
#product-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
}
#edmr{
	width:50%;	
}
.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;
}
input,
textarea{
	border-radius:8px;	
	border-width:1px;
}
button, input[type="submit"] {
    width: 100%;
    padding: 12px;
    background: var(--color2);
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}
button:hover, input[type="submit"]:hover {
    background: #78b7ed;
}

@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 2s ease-in-out; /* optional */
  	animation:opac 3s;
	  text-align:center;
  }
	.foto img{
		width:40%;
	}
.stoerer {
  width: 100%;
  height: 8em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  background-color: var(--color2);
	padding:0.1em 0.5em 0.3em 0.5em;
	border-radius: 10px;
  text-align: center;
  transform: rotate(-6deg); /* Leichte Rotation für mehr Tiefe */
	border:3px solid var(--color1);
	color:#ffffff;
}

.box p {
  margin: 0;
  font-size: 1.5em;
  font-weight: bold;
}

.box .small {
  font-size: 0.7em;
	color:#ffffff;
	margin-top: 5px;
	font-weight:normal;
}



@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%;}

  .excepttablet{
	 display:none; 
	}
	
  .phoneonly{
    display:none;
  }
  .exceptphone{
    display:block;
	padding-top:40px;
	transition-property: none;
  }
	
#haendlerpc{
	display:block;	
}
#haendlerphone{
	display:none;
	}
#logo{
    margin: 3em 25% 0 25%;
	height:250px;
 }
#logo img{
	width:15%;
	position:absolute;
	left:5%;
	top:2%;
  }
  .foto{
    margin-top:25px;
	transition: opacity 2s ease-in-out; /* optional */
  	animation:opac 3s;
	  text-align:left;
	  width:auto;
  }

  .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;
	}
	.text{
	 margin-left:0;
	}
	.titelzeile{
		margin-top:60px;
	}
	.navbar{
		background-color:transparent;	
	}
	.siegel{
		padding-top:2rem;
		padding-bottom:0;
	}
	.iconleft{
		float:left;
		text-align:left;
	}
	.iconright{
		float:right;
		text-align:right;
	}
	.screenonly{
		display:initial;
	}
	#mitgliedschaften{
		margin-top: -1rem;	
	}
	#teaser {
		height: 400px;
	}
}
@media only screen and (min-width: 1400px) {
  /* 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%;}
	.excepttablet{
		display:block;
	}
  .phoneonly{
    display:none;
  }
  .exceptphone{
    display:block;
  }
  .foto{
    margin-top:25px;
	transition: opacity 2s ease-in-out; /* optional */
  	animation:opac 3s;
	  text-align:left;
  }
	.foto img{
		width:auto;
	}
.bildbezeichnung{
	padding-left:0;	
}

  *{
    font-size:24px;
  }
  .bg-grau-w{
    background-color:#dddddd;
  }

	#edmr{
		width:100%;	
	}
	#mitgliedschaften{
		margin-top: -8rem;	
	}
		.ds{
		column-count: 2;
		column-gap: 5rem;
	}

}