@charset "utf-8";
/* CSS Document */



/* Grundgerüst */
body {
	 font-family: Saira, sans-serif;
	 font-display: swap;
	 color: #565655;
	 width: 100%;
	 margin: 0;
	 padding: 0;
	 min-width: 480px; /* Setze die minimale Breite auf 480px oder eine andere gewünschte Breite */
	 overflow-x: hidden; /* Verstecke die horizontale Scrollleiste, wenn die Breite kleiner als die minimale Breite ist */
	 display: flex;
	 justify-content: center;
	 background: url(../_img/geocomplete_bg.png) no-repeat top right fixed, linear-gradient(to top, rgba(227, 227, 227) 5%, rgba(255, 255, 255) 30%);
	 /*background: linear-gradient(to top, rgba(227, 227, 227, 0.4) 5%, rgba(255, 255, 255, 0.6) 30%), url(../_img/geocomplete_bg.png) no-repeat top right fixed;*/
	 background-size: contain;
	 }

#container {
	 width: 49%;
	 box-sizing: border-box;
	 max-width: 1200px;
	 min-height: 100vh; /* Mindesthöhe des Viewports */
	 }

#main {
	 width: 100%;
	 box-sizing: border-box;
	 }

/* Header-Logo-Bereich */
#logoarea {
	 margin-top: 12%;
	 width: 100%;
	 height: auto;
	 text-align: center;
	 }

.logo {
	 width: 100%;
	 height: auto;
	 max-width: 650px;
	 min-width: 150px;
	 }

/* Kurzer Einfuehrungstext */
#description-area {
	 width: 100%;
	 height: auto;
	 color: #636363;
	 margin-top: 150px;
	 margin-bottom: 50px;
	 display: flex;
	 justify-content: center;
	 }

#description-text {
	 width: 100%;
	 height: auto;
	 padding: 0 15px;
	 font-family: Saira, sans-serif;
	 text-align: justify;
	 }
	

/* Anregung-Ideen-Element */
#ideas-area {
	 width: 100%;
	 height: auto;
	 box-sizing: border-box;
	 display: flex;
	 justify-content: center; /* Horizontal zentrieren */
	 align-items: center; /* Vertikal zentrieren */
	 margin-bottom: 50px;
	 }	
	
.ideas-description {
	 width: 60%;
	 height: auto;
	 border: 1px solid #878787;
	 box-sizing: border-box;
	 padding: 15px;
	 background-image: linear-gradient(to top, rgba(153, 153, 153, 0.2) 80px, rgba(135, 135, 135, 0.2) 140px);
	 }

.ideas-title {
	color: #878787;
	margin: 0px;
	padding: 0px;
	}
	
	
/* Spezifikationen und Bildgalerie (Anwendung GeoComplete) */
   
#spezi-area {
	 margin-bottom: 50px;
	 }

.spezi-logo {
	 width: 250px;
	 margin-top: 10px;
	 margin-bottom: 10px;
	 margin-left: 50px;
	 margin-right: 50px;
	 flex: 1;
	 opacity: 0.2;
	 }

.spezi-section {
	 width: 100%;
	 height: auto;
	 background-color: #ffffffbd;
	 border: 1px solid #878787;
	 box-sizing: border-box;
	 margin-bottom: 50px;
	 background: url(../_img/geocomplete_bg.png) no-repeat top right, linear-gradient(to top, rgba(227, 227, 227) 70%, rgba(255, 255, 255) 90%);
     /*background: linear-gradient(to top, rgba(227, 227, 227, 0.4) 5%, rgba(255, 255, 255, 0.6) 30%), url(../_img/geocomplete_bg.png) no-repeat top right fixed;*/
     background-size: contain;
	 }
	 
#spezi-description {
	 padding: 15px;
	 }
 
#spezi-header {
	 display: flex;
	 justify-content: space-between;
	 flex-wrap: wrap;
	 }
 
.spezi-titel {
	 width: auto;
	 height: auto;
	 background-color: #878787;
	 box-sizing: border-box;
	 color: #ffffff;
	 margin: 0px;
	 padding-left: 50px;
	 padding-right: 50px;
	 padding-top: 10px;
	 padding-bottom: 10px;
	 flex: 1;
	 text-align: center; /* Horizontal zentrieren */
	 display: flex;
	 align-items: center; /* Vertikal zentrieren */
	 justify-content: center;
 	 }
 
 #spezi-gallery {
	 display: flex;
	 flex-wrap: wrap;
	 }
 
 #spezi-gallery figure {
	 flex-basis: calc(50% - 20px); /* Zwei Bilder nebeneinander, mit einem Abstand von 20px zwischen den Bildern */
	 margin: 10px;
	 box-sizing: border-box;
	 }
 
 .spezi-image {
	 width: 100%;
	 height: auto;
	 border: 1px solid #878787;
	 box-sizing: border-box;
	 cursor: -webkit-zoom-in;
	 cursor: -moz-zoom-in;
	 cursor: zoom-in;
	 }


/* Video-Gallerie */
.gallery {
	 width: 100%;
	 display: flex;
	 flex-direction: column; /* Wegen Anordnung in einer Spalte */
	 align-items: center; /* Wegen Zentrierung */
	 gap: 15px; /* Wegen Abstand zwischen den Elementen */
	 margin-bottom: 50px;
	 overflow: hidden;
	 }
  
.video-container {
	 width: 99%;
	 position: relative;
	 overflow: hidden; /* Überlauf verstecken */
	 margin-bottom: 10px; /* Wegen Abstand zwischen Video und Beschreibungstext */
	 border: 1px solid #999999;
	 box-sizing: border-box;
	 }
  
.video-container video {
	 width: 100%;
	 display: block;
	 }
  
.description {
	 position: relative;
	 top: 0px; /* Wegen Oben positionieren */
	 left: 0;
	 width: 100%;
	 background-color: rgba(0, 0, 0, 0.5);
	 font-weight: bold;
	 color: white;
	 padding: 5px;
	 box-sizing: border-box;
	}
  
#si, .si {
	 opacity: 0;
	 transition: all .25s ease-in-out;
	 transform: translateX(0); /* Elemente sollen nicht außerhalb des Bildschirms starten */
	 }

#si:nth-of-type(odd), .si:nth-of-type(odd) {
	 transform: translateX(-20%);
	 }

#si:nth-of-type(odd), .si:nth-of-type(even) {
	 transform: translateX(20%);
	 }

#si.visible, .si.visible {
	 transform: translateX(0); /* Sichtbare Elemente werden nicht transformiert */
	 opacity: 1;
	 }
 

/* Kontaktformular */
  
.kontakt {
	 width: 100%;
	 position: relative;
	 display: flex;
	 flex-direction: column;
	 overflow: hidden;
	 margin-bottom: 50px;
	 }
  
form {
	 width: 100%;
	 margin: 0 auto;
	 padding: 0px;
	 }
  
label {
	 display: block;
	 margin-bottom: 10px;
	 font-weight: bold;
	 color: #565655;
	 }
	
input, select, textarea {
	 width: 100%;
	 padding: 10px;
	 margin-bottom: 20px;
	 border: 1px solid #999999;
	 border-radius: 0px;
	 box-sizing: border-box;
	 }
  
input, select {
	 height: 40px;
	 }
  
input[type="submit"] {
	 background-image: linear-gradient(to top, #cccccc 0px, #f7f7f7 30px);
	 border: 1px solid #999999;
	 border-radius: 0px;
	 font-size: 15px;
	 color: #565655;
	 cursor: pointer;
	 }
	
input[type="submit"]:hover {
	 background-image: linear-gradient(to top, #b7b7b7 0px, #f7f7f7 30px);
	 border: 1px solid #999999;
	 border-radius: 0px;
	 }
  
  
/* Footer-Bereich */

#legal-area {
	 width: 100%;
	 height: auto;
	 display: flex;
	 justify-content: center;
	 border-top: 4px solid #999999;
	 margin-left: auto;
	 margin-right: auto;
	 }

#copy-area {
	 width: 100%;
	 height: auto;
	 display: flex;
	 justify-content: center;
	 font-size: 70%;
	 color: #636363;
	 }


/* Infofelder */

#stickybanner-call {
	 background-color: #ffffff;
	 border: 1px solid #999999;
	 width: 40px;
	 height: 40px;
	 overflow: hidden;
	 position: fixed;
	 top: 150px;
	 right: 50px;
	 z-index: 1;	
	 }

#stickybanner-call:hover {
	 background-color: #ffffff;
	 border: 1px solid #999999;
	 width: 350px;
	 height: auto;
	 overflow: hidden;
	 position: fixed;
	 top: 150px;
	 right: 50px;	
	 z-index: 999;
	 cursor: help;	
	 }

#stickybanner-support {
	 background-color: #ffffff;
	 border: 1px solid #999999;
	 width: 40px;
	 height: 40px;
	 overflow: hidden;
	 position: fixed;
	 top: 200px;
	 right: 50px;	
	 z-index: 1;
     cursor: help;	 
	 }

#stickybanner-support:hover {
	 background-color: #ffffff;
	 border: 1px solid #999999;
	 width: 350px;
	 height: auto;
	 overflow: hidden;
	 position: fixed;
	 top: 200px;
	 right: 50px;	
	 z-index: 999;
	 }

#stickybanner-angermann {
	 background-color: #ffffff;
	 border: 1px solid #999999;
	 width: 40px;
	 height: 40px;
	 overflow: hidden;
	 position: fixed;
	 top: 250px;
	 right: 50px;	
	 z-index: 1;
     cursor: pointer;	 
	 }

#stickybanner-angermann:hover {
	 background-color: #ffffff;
	 border: 1px solid #999999;
	 width: 350px;
	 height: auto;
	 overflow: hidden;
	 position: fixed;
	 top: 250px;
	 right: 50px;	
	 z-index: 999;
	 }
	 
	 #stickybanner-share {
	 background-color: #ffffff;
	 border: 1px solid #999999;
	 width: 40px;
	 height: 40px;
	 overflow: hidden;
	 position: fixed;
	 top: 300px;
	 right: 50px;	
	 z-index: 1;
     cursor: alias;	 
	 }

.phoneimg, .supportimg,.shareimg {
	 width: 100%;
	 height: 40px;
	 background-image: linear-gradient(to top, #cccccc 0px, #f7f7f7 30px);
	 border-bottom: 1px solid #999999;
	 }

.angermannimg {
	 background-color:#008FD1;
	 }

.phoneimg img, .supportimg img, .angermannimg img, .shareimg img {
	 width: 25px;
	 height: 25px;
	 padding: 7px;
	 }

.phone, .supportlink, .angermannlink {
	 display: block;
	 font-size: 25px;
	 color: #c3c3c3;	
	 margin:  5px;
	 text-decoration: none;
	 }

.phonetime {
	 font-size: 12px;
	 color: #565655;
	 margin: 5px;
	 }

.phonedescription, .supportdescription, .angermanndescription {
	 font-size: 15px;
	 color: #565655;	
	 margin: 5px;
	 }

#backtosite {
	 width: 100%;
	 height: auto;
	 display: flex;
	 justify-content: center;
	 margin-bottom: 100px;
	 }


/* Multiple-Elemente */

.btn {
	 background-image: linear-gradient(to top, #cccccc 0px, #f7f7f7 30px);
	 border: 1px solid #999999;
	 border-radius: 0px;
	 font-size: 15px;
	 color: #565655;
	 cursor: pointer;
	 text-decoration: none;
	 margin: 15px;
	 padding: 5px;
	 display: block;
	 }

.btn:hover {
	 background-image: linear-gradient(to top, #b7b7b7 0px, #f7f7f7 30px);
	 border: 1px solid #999999;
	 border-radius: 0px;
	 text-decoration: none;
	 }
	 
	 .btn-video {
	 width: 100%;
	 color: #fff;
	 text-algin: center;
	 border: none;
	 background-color: #474747;
	 padding: 10px;
	 height: auto;
	 display: block;
	 cursor: alias;
	 }
	 
	 	 .btn-video:hover {
	 background-color: #6c6c6c;
	 }

.title-area {
	 margin: 0 auto; /* Zentrierung */
	 text-align: left; /* Überschrift linksbündig */
	 color: #565655;
	 width: 100%;
	 border-bottom: 1px solid #999999;
	 margin-bottom: 25px;
	 }
	
.title-area h2 {
	 margin: 0; /* Außenabstand der Überschrift entfernen */
	 }
  
.hyphenate {
	 hyphens: auto;
}

.borderbox {
	border: 1px solid #999999;
	box-sizing: border-box;
	padding: 15px;
}

/* Multiple-Effekte */

@keyframes pulse {
  0% {
	 transform: scale(1);
  }
  50% {
	 transform: scale(1.1);
  }
  100% {
	 transform: scale(1);
  }
}

.pulse-animation {
	 animation: pulse 1s ease-in-out 2; /* Pulsierungseffekt */
}

.tcenter {
	 display: block;
	 text-align: center;
	 }

.center {
	 position: absolute;
	 left: 50%; /* Position in der Mitte der Seite */
	 transform: translateX(-50%); /* Zentrierung des Elements */
	 }

.fadeIn {
	 -webkit-animation-name: fadeIn;
	 animation-name: fadeIn;
	 -webkit-animation-duration: 1s;
	 animation-duration: 1s;
	 -webkit-animation-fill-mode: both;
	 animation-fill-mode: both;
	 }
  
@-webkit-keyframes fadeIn {
	 0% {opacity: 0;}
	 100% {opacity: 1;}
	 }
  
@keyframes fadeIn {
	 0% {opacity: 0;}
	 100% {opacity: 1;}
	 } 

.arrow {
	 position: fixed;
	 bottom: 20px;
	 left: 50%; /* Position in der Mitte der Seite */
	 transform: translateX(-50%); /* Zentrierung des Elements */
	 z-index: 1000; /* Element-Ebene */
	 width: 80px;
	 height: auto;
	 background-color: #ffffff;
	 border: #fff 1px solid;
	 box-shadow: #000 0px 0px 15px;
	 }

.arrow {
	 animation: blink 3s linear infinite; /* Dauer und Wiederholung der Animation */
	 }

@keyframes blink {
	 0% { opacity: 1; }
	 50% { opacity: 0; }
	 100% { opacity: 1; }
	 }


/* Responsive Anpassung Smartphones */
@media (max-width: 481px) {
body {
	min-width: 380px;
	}

.gallery {
	max-width: 100%; /* Bei kleineren Bildschirmen die maximale Bildbreite entfernen */
	}

.video-container {
	width: 100%; /* Bei kleineren Bildschirmen die Breite auf 100% setzen */
	}
	
#container {
	width: 89% !important; /* !important hinzufügen, um sicherzustellen, dass diese Regel Vorrang hat */
	 box-sizing: border-box;
	 }
	
#description-area {
	 margin-top: 190px;
	 }
	
	/* Infofelder */
#stickybanner-call {
	 top: 90px;
	 right: 0px;
	 }

#stickybanner-call:hover {
	 top: 90px;
	 max-width: 75%;
	 right: 0px;
	 }

#stickybanner-support {
	 top: 140px;
	 right: 0px;
	 }

#stickybanner-support:hover {
	 top: 140px;
	 max-width: 75%;
	 right: 0px;
	 }

#stickybanner-angermann {
	 top: 190px;
	 right: 0px;
	 }

#stickybanner-angermann:hover {
	 top: 190px;
	 max-width: 75%;
	 right: 0px;
	 }
	 
	 #stickybanner-share {
	 top: 240px;
	 right: 0px;
	 }
  
#si, .si {
	 opacity: 0;
	 transition: all .25s ease-in-out;
	 transform: translateX(0); /* Elemente starten nicht außerhalb des Bildschirms */
	 }

#si:nth-of-type(odd), .si:nth-of-type(odd) {
	 transform: translateX(-5%);
	 }

#si:nth-of-type(odd), .si:nth-of-type(even) {
	 transform: translateX(5%);
	 }

#si.visible, .si.visible {
	 transform: translateX(0); /* Sichtbare Elemente werden nicht transformiert */
	 opacity: 1;
	 }

.element {
	 flex-basis: 100%; /* Wenn die Bildschirmbreite kleiner als 600px ist, nehmen die Elemente jeweils die volle Breite ein und werden gestapelt */
	 }
  
#spezi-gallery figure {
	 flex-basis: calc(100% - 20px); /* Ein Bild pro Zeile, mit einem Abstand von 20px */
	 }
  
  .ideas-description {
	 width: 100%;
	 }
}


/* Responsive Anpassung Tablet/Smartphones */

@media (max-width: 1060px) {
body {
	 min-width: 380px;
	 }
	
.video-container {
	 width: 99%; /* Bei kleineren Bildschirmen die Breite auf 100% setzen */
	 }
	
#container {
	 width: 50%; /* !important hinzufügen, um sicherzustellen, dass diese Regel Vorrang hat */
	 box-sizing: border-box;
	 }

#si, .si {
	 opacity: 0;
	 transition: all .25s ease-in-out;
	 transform: translateX(0); /* Elemente starten nicht außerhalb des Bildschirms */
	 }

#si:nth-of-type(odd), .si:nth-of-type(odd) {
	 transform: translateX(-5%);
	 }

#si:nth-of-type(odd), .si:nth-of-type(even) {
	 transform: translateX(5%);
	 }

#si.visible, .si.visible {
	 transform: translateX(0); /* Sichtbare Elemente werden nicht transformiert */
	 opacity: 1;
	 }

.element {
	 flex-basis: 100%; /* Wenn die Bildschirmbreite kleiner als 600px ist, nehmen die Elemente jeweils die volle Breite ein und werden gestapelt */
	 }
  
#spezi-gallery figure {
	 flex-basis: calc(100% - 20px); /* Ein Bild pro Zeile, mit einem Abstand von 20px */
	 } 
}