html, body {
overflow-x: hidden;
text-align: center;
align-items: center;
justify-content: center;
vertical-align: center;
color: #204766;
font-weight: bold;
font-size: 28px;
}
body {
  background: url(./img/bg.jpg) no-repeat left top fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #204766;
}
#menu {
	color: #FFF;
	height: auto;
	padding-left: 18px;
	border-radius: 0px;
}
#menu ul, #menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#menu ul {
	width: 100%;
}
#menu li {
	display: inline-block;
	position: relative;
}
#menu a {
	display: block;
	line-height: 45px;
	padding: 0 14px;
	text-decoration: none;
	font-family: 'Verdana';
    text-shadow: 0px 1px 0 rgb(0, 0, 0), 0px -1px 0 rgb(0, 0, 0), 1px 0px 0 rgb(0, 0, 0), -1px 0px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0), 1px -1px 0 rgb(0, 0, 0), -1px 1px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0), 0px 2px 0 rgb(0, 0, 0), 0px -2px 0 rgb(0, 0, 0), 2px 0px 0 rgb(0, 0, 0), -2px 0px 0 rgb(0, 0, 0), 2px 2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0), -2px 2px 0 rgb(0, 0, 0), -2px -2px 0 rgb(0, 0, 0);
      -webkit-text-shadow: 0px 1px 0 rgb(0, 0, 0), 0px -1px 0 rgb(0, 0, 0), 1px 0px 0 rgb(0, 0, 0), -1px 0px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0), 1px -1px 0 rgb(0, 0, 0), -1px 1px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0), 0px 2px 0 rgb(0, 0, 0), 0px -2px 0 rgb(0, 0, 0), 2px 0px 0 rgb(0, 0, 0), -2px 0px 0 rgb(0, 0, 0), 2px 2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0), -2px 2px 0 rgb(0, 0, 0), -2px -2px 0 rgb(0, 0, 0);
      -moz-text-shadow: 0px 1px 0 rgb(0, 0, 0), 0px -1px 0 rgb(0, 0, 0), 1px 0px 0 rgb(0, 0, 0), -1px 0px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0), 1px -1px 0 rgb(0, 0, 0), -1px 1px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0), 0px 2px 0 rgb(0, 0, 0), 0px -2px 0 rgb(0, 0, 0), 2px 0px 0 rgb(0, 0, 0), -2px 0px 0 rgb(0, 0, 0), 2px 2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0), -2px 2px 0 rgb(0, 0, 0), -2px -2px 0 rgb(0, 0, 0);
	color: rgb(255, 255, 255);
    font-size: 17px;
    border-radius: 90px;
	font-weight: bold;
}
#menu a.dropdown-arrow:after {
	content: "\2B9F";
	margin-left: 5px;
}
#menu li a:hover {
      background: rgba(0, 0, 0, 0.5);
	  color: white;
}
#menu input {
	display: none;
	margin: 0;
	padding: 0;
	height: 45px;
	width: 100%;
	opacity: 0;
	cursor: pointer;
}
#menu label {
	display: none;
	line-height: 45px;
	text-align: center;
	position: absolute;
	left: 35px;
}
#menu label:before {
	font-size: 1.6em;
	content: "\2261"; 
	margin-left: 20px;
}
#menu ul.sub-menus{
	height: auto;
	overflow: hidden;
	width: 600px;
	position: absolute;
	z-index: 99;
	display: none;
}
#menu ul.sub-menus li {
	display: block;
	width: auto:
}
#menu ul.sub-menus a {
	font-family: 'Verdana';
    text-shadow: 0px 1px 0 rgb(0, 0, 0), 0px -1px 0 rgb(0, 0, 0), 1px 0px 0 rgb(0, 0, 0), -1px 0px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0), 1px -1px 0 rgb(0, 0, 0), -1px 1px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0), 0px 2px 0 rgb(0, 0, 0), 0px -2px 0 rgb(0, 0, 0), 2px 0px 0 rgb(0, 0, 0), -2px 0px 0 rgb(0, 0, 0), 2px 2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0), -2px 2px 0 rgb(0, 0, 0), -2px -2px 0 rgb(0, 0, 0);
      -webkit-text-shadow: 0px 1px 0 rgb(0, 0, 0), 0px -1px 0 rgb(0, 0, 0), 1px 0px 0 rgb(0, 0, 0), -1px 0px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0), 1px -1px 0 rgb(0, 0, 0), -1px 1px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0), 0px 2px 0 rgb(0, 0, 0), 0px -2px 0 rgb(0, 0, 0), 2px 0px 0 rgb(0, 0, 0), -2px 0px 0 rgb(0, 0, 0), 2px 2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0), -2px 2px 0 rgb(0, 0, 0), -2px -2px 0 rgb(0, 0, 0);
      -moz-text-shadow: 0px 1px 0 rgb(0, 0, 0), 0px -1px 0 rgb(0, 0, 0), 1px 0px 0 rgb(0, 0, 0), -1px 0px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0), 1px -1px 0 rgb(0, 0, 0), -1px 1px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0), 0px 2px 0 rgb(0, 0, 0), 0px -2px 0 rgb(0, 0, 0), 2px 0px 0 rgb(0, 0, 0), -2px 0px 0 rgb(0, 0, 0), 2px 2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0), -2px 2px 0 rgb(0, 0, 0), -2px -2px 0 rgb(0, 0, 0);
	color: rgb(255, 255, 255);
    font-size: 15px;
    border-radius: 90px;
	font-weight: bold;
	 line-height: 1.5;
	 white-space: nowrap;
}
#menu li:hover ul.sub-menus {
	display: flex;
}
#menu ul.sub-menus a:hover{
	color: #0099CC;
}

.flex-box {
  display: flex;
}

.box-layout {
      background: rgba(0, 0, 0, 0.5);
	  color: white;
}
	
.box-border {
		border: 2px solid #000000;
		border-radius: 10px;
}

.w-max {
  width: 2560px;
  max-width: 100%;
}

.w-100 {
  width: 100%;
}

.spacer{
	height: 5%;
}

.spacer-top{
	height: 20px;
}

.space-between {
    height: 5%;
    width: 10%; /* Definiert den Abstand zwischen den Boxen */
}

.center-x
{
	text-align: center;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
	
}

#content {
        display: flex;
        flex-direction: column;
		height: 100%;
		width: 100%;
		color: white;
}

#kopf {
	display: flex;
	flex-direction: column;
	height: 50px;
	width: 100%;
}

#logo{
	display: flex;
    flex-direction: column;
	height: 150px;
	width: 100%;
	color: #fff;
}

#navi {
        display: flex;
        flex-direction: column;
		height: 90px;
		width: 90%;
		justify-content: center;
}
#inhalt {
    display: flex;
    flex-direction: column;
    height: 640px;
    width: 100%;
	justify-content: center;
	align-items: center;
}

#unten {
    display: flex;
    justify-content: center; /* Zentriert die Boxen horizontal */
    align-items: center; /* Zentriert die Boxen vertikal */
    height: 80%;
    width: 100%;
}

#umfrage {
    flex: 3; /* Nimmt den verfügbaren Platz gleichmäßig ein */
}

#buttons_box {
    flex: 1; /* Nimmt den verfügbaren Platz gleichmäßig ein */
}

#content_sites {
    flex: 3; /* Nimmt den verfügbaren Platz gleichmäßig ein */
}

#content_sites {
    display: flex;
    flex-direction: column;
    height: calc(100% - 20px); /* Hier die Höhe anpassen */
    width: 90%;
}

#ds_imp_sites {
    display: flex;
    flex-direction: column;
    height: calc(100% - 20px); /* Hier die Höhe anpassen */
    width: 100%;
	overflow: auto;
	font-size: 16px;
}



#umfrage {
    display: flex;
    flex-direction: column;
    height: calc(100% - 20px); /* Hier die Höhe anpassen */
    width: 50%;
}
	
#buttons_box{
	display: flex;
    flex-direction: row;
	height: 100%;
	width: 10%;
}
		
#footer {
        display: flex;
        flex-direction: row;
		height: 130px;
		width: 100%;
		position: fixed;
		bottom: 0px;
}

 #contact-form {
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }
    #contact-form h2 {
      margin-top: 0;
      margin-bottom: 20px;
    }
    #contact-form label {
      display: block;
      margin-bottom: 5px;
    }
    #contact-form input[type="text"],
    #contact-form input[type="email"],
    #contact-form textarea {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    #contact-form textarea {
      resize: vertical;
    }
    #contact-form button {
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    #contact-form button:hover {
      background-color: #0056b3;
    }
    #contact-form p {
      margin-top: 15px;
      font-size: 14px;
    }
	
.container-intern {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Bei Bedarf Umbruch der Boxen auf Mobilgeräten */
}

.box {
    width: calc(33.33% - 0px); /* Drittel des verfügbaren Platzes minus 10px (für den Abstand zwischen den Boxen) */
    margin-bottom: 20px;
    padding: 20px;
    box-sizing: border-box;
	overflow: auto; /* Hinzufügen der Scrollleiste, wenn der Inhalt zu groß ist */
    max-height: 450px; /* Beispiel für eine maximale Höhe */
}
	
	

<!-- Slider -->
.slider{
 overflow: hidden;
  padding: 10px 0;
  background: gray;
  white-space: nowrap;
  position: relative;
}
.slider-track{
  display: flex;
   
}
 .slider-track:hover{
    animation-play-state: paused;
    }
	

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.logos {
  overflow: hidden;
  padding: 10px 0;
  background-color: rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  position: relative;
}



.logos:hover .logos-slide {
  animation-play-state: paused;
}

.logos-slide {
  display: inline-block;
  animation: 240s slide infinite linear;
}


/* Einzelnes Logo mit Zoomeffekt beim Bewegen der Maus */
.logos-slide img {
  height: 110px; /* Ursprüngliche Höhe */
  margin: 0 15px;
  transition: transform 0.2s ease-in-out; /* Sanfter Zoomübergang */
}

/* Zoomeffekt beim Bewegen der Maus */
.logos-slide img:hover {
  transform: scale(1.2); /* Größe um 30% erhöhen */
}
/* Modal styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-top: 75px; /* Abstand vom oberen Rand */
  padding-left: 75px; /* Abstand vom oberen Rand */
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.3);
}

.modal-content {
  position: relative;
  margin: auto;
  width: 90%;
  max-width: 1280px;
  max-height: 70vh;
  background-color: #9aa1a6;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.modal-content img {
  max-width: 100%;
  max-height: 640px;
  height: auto;
  margin: auto;
}

.close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  z-index: 1001;
}

/* Pfeile */
.prev-arrow,
.next-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    font-size: 24px;
    text-align: center;
    line-height: 40px;
    color: #333;
    cursor: pointer;
    z-index: 1001;
}

.prev-arrow {
    left: 20px;
}

.next-arrow {
    right: 20px;
}

.prev-arrow:hover,
.next-arrow:hover {
    background-color: rgba(255, 255, 255, 0.7);
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Mobil */
@media only screen and (max-width: 1200px) {
    html, body {
        font-size: 15px; /* Hinzugefügt: Einheiten für die Schriftgröße */
        color: white;
        margin: 0; /* Entfernt den Standardmargin */
        padding: 0; /* Entfernt den Standardpadding */
    }
    
    #content {
        display: flex;
        flex-direction: column;
        height: 80vh; /* Ändert die Höhe auf 100% der Bildschirmhöhe */
        width: 100%;
        color: white;
    }
    
    #kopf, #navi, #inhalt, #unten, #umfrage, #buttons_box, #footer, #content_sites {
        width: 100%; /* Alle Elemente nehmen die volle Breite */
    }

    #kopf, #footer {
        flex: 0 0 10%; /* Teilt den verfügbaren Platz gleichmäßig auf 10% auf */
        display: flex;
        align-items: center; /* Zentriert den Inhalt vertikal */
    }

    #inhalt {
        flex: 1; /* Nimmt den verfügbaren Platz ein */
        display: flex;
        flex-direction: column;
    }
    
    #unten {
        flex: 0 0 60%; /* Teilt den verfügbaren Platz gleichmäßig auf 60% auf */
        display: flex;
        flex-direction: column;
    }
    
    #umfrage {
        flex: 0 0 34%; /* Nimmt 34% des verfügbaren Platzes */
        width: 90%; /* Ändert die Breite auf 90% des Elternelements */
    }
	
	 #content_sites {
        flex: 1 0 34%; /* Nimmt 34% des verfügbaren Platzes */
        width: 95%; /* Ändert die Breite auf 90% des Elternelements */
    }
	
	#ds_imp_sites {
    display: flex;
    flex-direction: column;
    height: calc(100% - 20px); /* Hier die Höhe anpassen */
    width: 100%;
	overflow: auto;
	font-size: 16px;
}
    
    #buttons_box {
        flex: 0 0 10%; /* Nimmt 10% des verfügbaren Platzes */
        width: 25%; /* Ändert die Breite auf 25% des Elternelements */
    }

    .space-between {
        flex: 0 0 5%; /* Nimmt 5% des verfügbaren Platzes */
    }

    #navi {
        flex: 0 0 5%; /* Teilt den verfügbaren Platz gleichmäßig auf 5% auf */
        display: flex;
        align-items: center; /* Zentriert den Inhalt vertikal */
    }

    #footer {
        flex: 0 0 10%; /* Nimmt 10% des verfügbaren Platzes */
        display: flex;
        align-items: center; /* Zentriert den Inhalt vertikal */
    }

    #logo {
        flex: 0 0 100%; /* Nimmt 100% der verfügbaren Breite */
    }
	
.container-intern {
    display: flex;
    flex-direction: column; /* Ändern auf Spaltenlayout für Mobilgeräte */
    max-height: 555px; /* Beispiel für maximale Höhe */
    overflow: auto; /* Falls der Inhalt die maximale Höhe überschreitet, wird ein Scrollbalken angezeigt */
}

.box {
    width: 100%; /* Volle Breite für Mobilgeräte */
}
	
	
	/*modal mobiel*/
  .modal {
    padding-top: 30px; /* Reduziere den Abstand vom oberen Rand */
    padding-left: 30px; /* Reduziere den Abstand vom linken Rand */
  }

  .modal-content {
    width: 70%; /* Verkleinere die Breite des Modal-Inhalts um 20% */
    padding: 15px; /* Reduziere den Innenabstand */
    left: -5%; /* Verschiebe die Box um -5% nach links */
	top: 18%; /*Verschiebe die Box um 18% nach unten*/
  }

  .prev-arrow,
  .next-arrow {
    width: 30px; /* Verkleinere die Pfeile */
    height: 30px;
    font-size: 18px; /* Verkleinere die Schriftgröße der Pfeile */
    line-height: 30px;
  }

  .close {
    top: 5px; /* Verändere die Position des Schließen-Buttons */
    right: 10px;
    font-size: 24px; /* Verkleinere die Schriftgröße des Schließen-Buttons */
  }
	
}



.border-red {
  border: 5px solid red;
}

.border-green {
  border: 5px solid green;
}

.border-blue {
  border: 5px solid blue;
}

.border-yellow {
  border: 5px solid yellow;
}

.border-white {
  border: 5px solid white;
}

.border-purple {
  border: 5px solid purple;
}

.border-black {
  border: 5px solid black;
}

.border-pink {
  border: 5px solid pink;
}

.border-brown {
  border: 5px solid brown;
}

.border-lila {
  border: 5px solid lila;
}

.border-orange {
  border: 5px solid orange;
}
.border-transparent {
  border: 5px solid transparent;
}