@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=PT+Serif+Caption:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=PT+Serif+Caption:ital@0;1&display=swap');

/* Globale Farben*/
:root {
    --primary-color: rgba(0, 52, 83, 1); /* Hauptfarbe */
    --bg-color-white: rgba(255, 255, 255, 1); /* Hintergrundfarbe */
    --bg-color-light: #f1f3f2; /* Hintergrundfarbe */
    --text-color: rgba(248, 249, 250, 1); /* Textfarbe */
    --text-color-inverse: rgba(255, 255, 255, 1); /* Textfarbe für dunkle Hintergründe*/
    --text-color-inverse-dark: #ced4da; /*Textfarbe für */
}

.bgcolor-white{
    background-color: var(--bg-color-white);
}

.bgcolor-light{
    background-color: var(--bg-color-light);
}

.bgcolor-gradient{
    background-image: linear-gradient(270deg, rgba(1, 53, 84, 1) 0%, rgba(14, 95, 142, 1) 100%);
}

.bgcolor-dark{
    background-color: var(--primary-color);
}

/* Definiert die Höhe des Containers */
.size-height-sm {
    height: 112px;
    overflow: hidden; /* Verhindert das Überlaufen des Inhalts außerhalb des Containers */
}

.noto {
font-family: 'Noto Serif', serif;
}

.source-sans {
font-family: 'Source Sans Pro', sans-serif;
}

/* Grundlegende Einstellungen */
html, body {
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    font-size: 16px;
}

h1, h2, h3, h4 {
    font-weight: 400;
    color: #fff;
    font-family: 'Noto Serif', serif;
    font-style: italic;
    letter-spacing: 0;
}

h1 {
    font-size: 2rem;
}


h2 {
    font-size: 1.6rem;
}

h3 {
    font-size: 1.3rem;
}

a {
    color: #fff;
    margin: 0;
    padding: 0;
}

a:hover {
  color: color: var(--text-color-inverse-dark);
}

.button-transparent {
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.5rem 1.5rem;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  border-radius: 0;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  
  display: inline-block; /* Erlaubt die Anwendung von Padding und Zentrierung */
  color: #fff; 
  border-color: #fff;
}

.button-transparent:hover, .button-transparent:focus {
  color: #0056b3; /* Dunklere Farbe beim Hover/Fokus */
  background-color: #e7e7e7; /* Hintergrundfarbe beim Hover/Fokus */
  text-decoration: none; /* Entfernt Unterstreichung beim Hover/Fokus */
}

.button-dark {
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  padding: 0.5rem 1.5rem;
  margin-right: 20px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  border-radius: 0;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  
  display: inline-block; /* Erlaubt die Anwendung von Padding und Zentrierung */
  color: #fff; 
}

.button-dark:hover, .button-dark:focus {
  color: var(--primary-color); /* Dunklere Farbe beim Hover/Fokus */
  border: 1px solid var(--primary-color);
  background-color: rgba(0, 0, 0, 0); /* Hintergrundfarbe beim Hover/Fokus */
  text-decoration: none; /* Entfernt Unterstreichung beim Hover/Fokus */
}

/* Header */
.header-container {
    margin: 0 auto; /* Zentriert den Inhalt */
    max-width: 1300px; /* Maximale Breite für den Inhalt */
    width: 100%;
}


/* Navigation */

.nav-container {
    display: flex;
    justify-content: space-between; /* Horizontal ausrichten */
    align-items: center; /* Vertikal ausrichten */
    height: 90px; /* Start-Höhe */
    transition: height 0.5s ease; /* Sanfter Übergang der Höhe */
    width: 100%; /* Sicherstellen, dass der Container die volle Breite einnimmt */
    position: fixed; /* Fixierte Position */
    top: 0; /* Oben am Bildschirm */
    left: 0; /* Linksbündig ausrichten */
    z-index: 1000; /* Über anderen Elementen */
    background-color: var(--primary-color); /* Hintergrundfarbe */
    font-family: 'Noto Serif', serif;
    font-weight: 300;
    letter-spacing: 0.1rem;
    font-size: 0.7rem;
    text-transform: uppercase;
}

nav {
    color: white;
    padding: 0 10px;
    height: 90px; /* Festgelegte Höhe der Navbar */
    display: flex;
    justify-content: space-between; /* Verteilt die Inhalte links und rechts */
    align-items: center;
}

/* Menülinks */
nav a {
    color: var(--text-color-inverse);
    padding: 10px 15px;
    text-decoration: none;
}

nav a:hover {
    color: var(--text-color-inverse-dark);
}

/* Styling für den Logo-Container */
.logo-container {
    display: flex;
    align-items: center; /* Vertikale Zentrierung */
    justify-content: center; /* Horizontale Zentrierung */
    height: 50px; /* Festgelegte Höhe */
}

.logo-container a {
    height: 100%; /* Füllt die Höhe des Elternelements */
    display: flex; /* Ermöglicht Flexbox-Eigenschaften für das Link-Element */
    align-items: center; /* Zentriert das Logo vertikal */
    justify-content: center; /* Zentriert das Logo horizontal */
}

.logo-container img {
    max-height: 100%; /* Das Logo passt sich der Höhe des Containers an */
    width: auto; /* Breite wird automatisch angepasst, um Proportionen zu wahren */
    transition: transform 0.5s ease; /* Sanfter Übergang für die Skalierung */
}

/* Hover-Bild (Logotext) ausblenden */
.logo-container .hover-image {
    top: 0;
    left: 0;
    opacity: 0;
    height: 35px;
    margin: 10px;
    pointer-events: none; /* verhindert Interaktion mit dem ausgeblendeten Bild */
    transition: opacity 1s ease-in-out;
}

@media (max-width: 1024px) {
  .logo-container .hover-image {
    display: none;
  }
}

.nav-menu {
    display: flex;
    align-items: center; /* Stellt die vertikale Zentrierung sicher */
    transition: transform 0.5s ease; /* Optional: Übergang für die Transformation */
}

@media (max-width: 1024px) {
    /* Verstecke das reguläre Menü */
    .nav-menu {
        display: none;
    }

    /* Zeige das Burger-Menü-Icon */
    .hamburger-container {
        display: block;
    }
}

@media (min-width: 1025px) {
  .hamburger-container {
    display: none;
  }
}

/* Sprachumschalter-Stile */
.language-switcher {
    display: flex; /* Ermöglicht die flexible Anordnung der Sprachlinks */
    margin-right: 20px;
    transition: transform 0.5s ease; /* Optional: Übergang für die Transformation */
    align-items: center; /* Vertikale Zentrierung aller Kinder, einschließlich <a> und <span> */
    justify-content: center; /* Optional: Für horizontale Zentrierung */
}

.language-switcher a {
    padding: 0;
}

/** Navigation Burger Button **/

.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 45px;
}
.hamRotate.active {
  transform: rotate(45deg);
}
.hamRotate180.active {
  transform: rotate(180deg);
}
.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke:#fff;
  stroke-width:5.5;
  stroke-linecap:round;
}

.ham5 .top {
  stroke-dasharray: 40 82;
}
.ham5 .bottom {
  stroke-dasharray: 40 82;
}
.ham5.active .top {
  stroke-dasharray: 14 82;
  stroke-dashoffset: -72px;
}
.ham5.active .bottom {
  stroke-dasharray: 14 82;
  stroke-dashoffset: -72px;
}

/* Burger Navigation Overlay */

.burger-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999; /* Über dem Inhalt */
  transform: translateX(-100%); /* Startet außerhalb des Bildschirms */
  transition: transform 0.5s ease; /* Glattes Ein-/Ausfahren */
  display: none; /* Verhindert Klicken auf das Overlay, wenn es nicht sichtbar ist */
}

.burger-overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'Noto Serif', serif;
  font-size: 6vw; /* Macht die Schriftgröße zu 5% der Viewport-Breite */
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  line-height: 2; /* 1.5 mal der Schriftgröße des Paragraphs */

}

.burger-overlay-link {
  display: block;
  color: white; /* Oder jede andere Farbe, die zu deinem Design passt */
  text-decoration: none; /* Entfernt die Unterstreichung */
}

.burger-overlay-link:hover {
    color: var(--text-color-inverse-dark);
}

/* Main Content */
main {
    padding: 0;
    margin-top: 0;
}

/* Footer */

footer {
    color: #fff;
    font-family: 'Noto Serif', serif;
    font-weight: 200;
    letter-spacing: 0.05rem;
    font-size: 0.7rem;
}

footer a {
    color: #fff;
    padding: 20px 0;
    font-family: 'Noto Serif', serif;
    letter-spacing: 0.1rem;
    font-size: 0.7rem; 
    text-decoration: none;
    text-transform: uppercase;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: center; /* Zentriert den Inhalt mobil und als Fallback */
  margin: 0 auto; /* Zentriert den Inhalt */
  max-width: 1250px; /* Maximale Breite für den Inhalt */
  width: 100%;
}

.footer-column {
  flex: 1;
  min-width: 200px; /* Verhindert, dass Spalten zu schmal werden */
  padding: 10px 0px;
  display: flex;
  justify-content: center; /* Zentriert den Inhalt innerhalb jeder Spalte */
  flex-direction: column; /* Stellt sicher, dass der Inhalt vertikal zentriert ist */
}

.copyright {
    text-align: left;
    margin-left: 50px;
}

/* Für die Legal Notices Linkliste */
.legal-notices ul {
  display: flex;
  flex-wrap: wrap; /* Erlaubt den Listenelementen, in die nächste Zeile zu gehen, falls der Platz nicht ausreicht */
  justify-content: center; /* Zentriert die Listenelemente horizontal */
  padding: 0; /* Entfernt den Standard-Abstand */
  list-style: none; /* Entfernt die Bulletpoints */
}

.legal-notices ul li {
  margin: 5px 10px; /* Fügt einen kleinen Abstand zwischen den Listenelementen hinzu */
}

/* Für die Social Icons */
.social-icons {
    display: flex;
    flex-direction: row; /* Icons nebeneinander */
    justify-content: flex-end; /* Zentriert die Icons horizontal */
    flex-wrap: wrap; /* Erlaubt Icons in die nächste Zeile zu gehen, falls der Platz nicht ausreicht */
    margin: 0 50px 0 0; /* Zentriert die Icons-Container, wenn mehr Platz vorhanden ist */
    width: 100%; /* Stellt sicher, dass der Container die volle Breite einnimmt */
}

.social-icons a {
  display: inline-block;
  margin: 0 10px;
  font-size: 24px;
}


/* Stile für mobile Ansichten */
@media (max-width: 1024px) {
  .footer-container {
    display: flex;
    flex-direction: column;
  }

  /* Bringt die Social-Icons-Spalte an die erste Position */
  .social-icons {
    order: 1;
    justify-content: center;
  }

  /* Platziert die linke Spalte (Copyright) zuletzt */
  .copyright {
    order: 3; /* Stellt sicher, dass diese Spalte ganz unten ist */
  }
  
  /* Stellt sicher, dass die mittlere Spalte (Legal Notices) in der Mitte bleibt */
  .legal-notices {
    order: 2;
  }
  
  .footer-column {
    text-align: center; /* Zentriert den Inhalt innerhalb der Spalten */
    padding: 10px 0;
  }

  .copyright, .social-icons{
    margin: 0;
  }
}

/* Zusätzliche Hilfsklassen */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.text-center {
    text-align: center;
}

.bg-container {
    width: 100%; /* Sorgt dafür, dass der Hintergrund die volle Breite einnimmt */
}

.content-container {
    margin: 0 auto; /* Zentriert den Inhalt */
    max-width: 1300px; /* Maximale Breite für den Inhalt */
    width: 100%;
    text-align: left;
}

.content-space-container {
  padding: 90px 0 0;
  display: flex; /* Ermöglicht Flex-Elementen, nebeneinander zu stehen */
  min-height: 750px; /* Mindesthöhe für den umgebenden Container */
}


/* Fullscreen Container, z.B. für Cookiemeldung */
.overlay-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.white-box {
    width: 50%;
    max-width: 500px;
    height: auto; 
    background-color: #fff;
    color: #000;
    padding: 30px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    z-index: 1010;
    border-radius: 5px;
}

@media (max-width: 786px) {

    .white-box {
         width: 80%; 
    }
    
}


.white-box h2 {
    color: #000;
}

.image-box {
    width: 80%; /* Anpassung der Breite für mehr Flexibilität */
    max-height: 80vh;
    background-color: rgba(0,0,0,0);
    color: #000;
    z-index: 1010;
}

@media (max-width: 786px) {
    .image-box {
        width: 90%; /* Größere Breite auf kleineren Bildschirmen */
    }
}

.modal-image {
    max-width: 100%; /* Bild nimmt maximal die Breite der Box an */
    max-height: 80vh; /* Bild nimmt maximal die Höhe der Box an */
    object-fit: contain; /* Erhält die Proportionen des Bildes */
}

.image-caption {
    color: #fff; /* Stil für den Text unter dem Bild */
    font-style: italic;
    text-align: center; /* Zentriert den Text horizontal */
    display: block; /* Stellt sicher, dass es sich wie ein Blockelement verhält */
    width: 100%; /* Nimmt die volle Breite der .image-box */
}


/* Zitate Box */

#quote-display {
    max-width: 600px;
    height: 300px; /* Feste Höhe der Box */
    margin: auto;
    text-align: center;
    position: relative; /* Positionierung für das Overlay während der Animation */
    overflow: hidden; /* Verhindert das Überlaufen von Inhalten während der Animation */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* Weiße Schrift */
}

#quote-display::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
}

#quote-display blockquote {
    font-size: 16px;
    position: relative; /* Relative Positionierung für bessere Kontrolle */
    opacity: 1;
    transition: opacity 1s ease-in-out; /* Langsamer Übergang */
    width: 100%;
    text-align: center; /* Zentrierter Text */
}

#quote-display blockquote p:first-child {
    font-size: 40px;
    line-height: 0.1;
    opacity: 0.3;
    margin-top: 0 !important;
    color: white; /* Weiße Gänsefüßchen */
}

#quote-display blockquote p:nth-child(2) {
    font-size: 1.5rem;
    font-style: italic;
    color: white; /* Weißer Haupttext */
}

#quote-display blockquote cite {
    display: block;
    margin-top: 10px;
    color: white; /* Weiße Autorangabe */
}

/* Tab-Styling */

.nav-tabs {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #ccc; /* Linie unter der gesamten Tab-Leiste */
    display: flex;
}

.nav-tabs li {
    margin-right: 5px; /* Kleiner Abstand zwischen den Tabs */
}

.nav-tabs li a {
    display: block;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-bottom: none; /* Entferne die untere Linie, um die Illusion eines zusammenhängenden Blocks zu erzeugen */
    cursor: pointer;
}

.nav-tabs li a.active {
    background-color: #fff;
    border-color: #ccc;
}

.tab-content {
    border: 1px solid #ccc;
    padding: 20px;
    background-color: #fff;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* Module */

/* Video Modul */
.video-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0; /* Ermöglicht, dass es die volle Breite einnimmt */
    bottom: 0; /* Ermöglicht, dass es die volle Höhe einnimmt */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Optional, um sicherzustellen, dass nichts überläuft */
}

.overlay-content {
    max-width: 1300px; /* Maximale Breite */
    width: 100%; /* Nimmt die volle verfügbare Breite bis zu max-width */
    text-align: center; /* Zentriert den Text innerhalb von overlay-content */
    margin: 80px 50px 50px 50px;
    box-sizing: border-box; /* Stellt sicher, dass padding nicht die Breite beeinflusst */
}


.video-overlay h1, .video-overlay p {
    color: white;
    width: 66%;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

.video-overlay h1{
    font-size: 6vw;
    text-align: left;
    /*font-family: 'Source Sans Pro', sans-serif;*/
    margin: 0 0 2vw 0;
    line-height: 1.1;
    letter-spacing: 0.1;
}

.video-overlay p {
    font-size: 2vh;
    font-weight: 100 !important;
    text-align: left;
    margin: 0 0 6vh 0;
    max-width: 800px;
    letter-spacing: 0;
}

#overlayTitle, #overlayText {
    opacity: 0;
    transition: opacity 2s ease-in-out;
    transform: translateZ(0); /* Erzwingt die Hardwarebeschleunigung */
}

@media (min-width: 1300px) {
    .video-overlay  h1 {
        font-size: 8vh; /* Maximale Schriftgröße ab einem Viewport von 1200px */
    }
}

@media (max-width: 786px) {

    .video-overlay h1, .video-overlay p {
        width: 90% !important;
        margin: 0;
    }

    .video-overlay h1 {
        margin-bottom: 10px!important;
        font-size: 12vw;
    }

}



/* Markenkarussell */
.brand-carousel {
    position: relative;
    width: 100%;
    display: flex; /* Ein Beispiel, wie du Flexbox für das Layout verwenden kannst */
    align-items: center; /* Zentriert die Items vertikal */
}

.moving-stripe{
    display: flex; /* Damit die Logos nebeneinander angeordnet sind */
    position: relative;
}


.brand-carousel .slide {
    flex: 0 0 auto; /* Verhindert, dass die Elemente wachsen oder schrumpfen */
    margin: 0 60px; /* Abstand zwischen den Logos, anpassbar */
}

.brand-carousel img{
    height: 70px;
    width: auto;
    opacity: 0.8;
}

/* Farbverlauf links */
.brand-carousel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 100%;
    background: linear-gradient(to right, var(--bg-color-light), transparent);
    z-index: 2;
}

/* Farbverlauf rechts */
.brand-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 100%;
    background: linear-gradient(to left, var(--bg-color-light), transparent);
    z-index: 2;
}

/* Newsletter Modul */

.newsletter {
  max-width: 66%; 
  margin: 50px;
  color: #fff;
  font-weight: 200;
}

@media (max-width: 786px) {
    .newsletter{
        max-width: 100%;
        margin: 50px 30px;
    }
}

.newsletter p {
    max-width: 786px;
    width: 100%; 
    margin: 0 0 30px 0;
}


#newsletter-email {
  max-width: 400px;
  height: 40px;
  margin-right: 1rem;
  box-sizing: border-box; /* Inkludiert Padding und Border in die Breitenberechnung */
    padding-left: 10px;
}

.button-transparent {
  width: auto; /* Erlaubt dem Button (Link), nur so viel Platz einzunehmen, wie sein Inhalt benötigt */
  padding: 0.5rem 1.5rem; /* Kontrolliert das Padding innerhalb des Buttons (Links) */
  margin-right: 4rem;
}

.form-container {
  display: flex;
  flex-direction: row;
  width: 100%; /* Optional: Stellt sicher, dass der Container die volle Breite seines Elternelements einnimmt */
}

.form-container input {
  flex-basis: 75%; 
  width: calc(100% - 10px); /* Passt die Breite unter Berücksichtigung des 'gap' an */
  max-width: calc(75% - 10px); /* Begrenzt die maximale Breite entsprechend */
}

/* Stil für den Submit-Button, um den Abstand vor dem Button anzupassen */
button[type="submit"] {
  margin-top: 20px; /* Abstand zum vorherigen Element */
}

/* Contact Form Modul */

.contact-form-module {
  display: flex;
  justify-content: center; /* Zentriert den Inhalt horizontal */
  align-items: center; /* Zentriert den Inhalt vertikal */
  position: relative;
  width: 100%;
  height: 90vh; /* Gesamthöhe des Moduls */
  margin-top: 90px;
}


.contact-form-background {
  position: absolute;
  width: 85%;
  height: 450px; /* Vertikale Zentrierung im Modul */
  left: 0;
  z-index: 1; /* Hintergrund z-Index */
}


.contact-form-area {
  display: flex;
  justify-content: center; /* Horizontale Zentrierung der Kinder */
  align-items: center; /* Vertikale Zentrierung der Kinder */
  max-width: 1200px;
  padding: 0 50px;
  width: 100%;
  position: relative;
  z-index: 2; /* Über dem Hintergrund */
}


.contact-form {
  width: 500px;
  height: 650px; /* Höhe des Kontaktformulars */
  background-color: var(--bg-color-white);
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  padding: 15px 50px;
}

/* Medienabfrage für Bildschirme ab 786px Breite */
@media (max-width: 600px) {
  .contact-form {
    width: 100%; /* Setzt die Breite auf 100% für Bildschirme ab 786px */
    margin: 0;
    }
    .contact-form-module {
        height: auto;
    }

  .contact-form-background {
    display: none;
    }

  .contact-form-area{
        padding: 0;
    }
}

.contact-form form {
  display: flex;
  flex-direction: column;
}

.contact-form h1 {
  color: black; 
  font-size: 1.6rem;
}

.contact-form a {
  color: #B00000;
}

.contact-form a:hover {
  color: #B00000;
}

.form-field {
  display: flex;
  flex-direction: column; /* Stellt sicher, dass das Label über dem Feld steht */
  width: 100%; /* Setzt die Breite jedes .form-field-Elements */
  margin-bottom: 15px;
}

.form-field input,
.form-field textarea {
  width: 100%; /* Stellt sicher, dass Labels, Eingabefelder und der Button die volle Breite ausfüllen */
  box-sizing: border-box; /* Bezieht Padding und Border in die Breite mit ein */
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: .375rem .75rem;
  resize: none;
}

.form-field textarea {
    resize: none;
    height: 75px;
}

.form-field label {
  margin-bottom: 5px; /* Fügt Abstand zwischen Label und Eingabefeld hinzu */
  font-size: 0.9rem;
}

.checkbox {
  display: flex;
  flex-direction: row;
  align-items: start; /* Stellt sicher, dass die Checkbox am Anfang des Labels ausgerichtet ist */
  font-size: 0.8rem;
  margin: 2px 0;
}

.checkbox input[type="checkbox"] {
    width: auto;
    margin-right: 0.5rem; /* Fügt etwas Platz zwischen Checkbox und Label hinzu */
}

.required {
  color: #B00000;
}

.contact-form-persona {
  width: 50%;
  height: 550px; /* Höhe der Persona */
  background-color: rgba(0, 0, 0, 0); /* Hintergrundfarbe der Persona */
  position: relative;
  top: -50px; /* Überlappt oben über den Hintergrund */
}

.contact-form-persona img {
  position: absolute; /* Erlaubt die präzise Positionierung innerhalb des Containers */
  bottom: 0; /* Ausrichtung am unteren Rand */
  left: 0; /* Ausrichtung am rechten Rand */
  width: auto; /* Stellt sicher, dass das Bild seine Breite innerhalb des Containers anpasst */
  height: 100%;
  margin-left: 30px;
}

@media (max-width: 950px) {
  .contact-form-persona  {
    display: none;
  }

.contact-form-background {
    display: none;
    }
}


/* White Page Modul */

.whitepage {
  background-color: var(--bg-color-light);
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.6);
  margin: 50px 0 50px 50px;
  width: 55%;
  min-width: 600px;
  padding: 50px 80px;
}

.whitepage h1, .whitepage h2, .whitepage h3, .whitepage h4 {
    color: #000;
}

.whitepage a {
  color: #B00000;
}

.whitepage a:hover {
  color: #B00000;
}

@media (max-width: 1024px) {
  .whitepage  {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .whitepage  {
    background-color: rgba(255, 255, 255, 0);
    color: #fff;
    box-shadow: none;
    margin: 0;
    padding: 50px;
    width: 100%;
    min-width: 50px;
  }

   .whitepage h1, .whitepage h2, .whitepage h3, .whitepage h4 {
    color: #fff;
    font-style: italic;
  }

  .whitepage a {
  color: #fff;
}

.whitepage a:hover {
  color: #fff;
}


}

/* Blog Artikel Overview */

.blogover-header-container {
    margin-top: 90px;
 display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert die Inhalte horizontal */
    position: relative;
    text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 4px;
}

.blogover-headline-container {
    width: 60%;
    max-width: 400px;
    position: absolute; /* Absolut positioniert, um Überlappung zu ermöglichen */
    top: 3vmin;
    left: 50px;
    z-index: 2; /* Höher als das Bild, um Text über Bild zu legen */
    color: #fff;
    text-align: right;
}

.blogover-headline-container h1 {
    font-size: 4.5vmin;
}

.blogover-headline-container p {
    font-size: 1.2rem;
}

.blogover-image-container {
    width: 80%;
    max-width: 900px;
    top: 0;
    z-index: 1; /* Niedriger als Text, damit Bild unter Text */
    align-self: flex-end;
    margin-right: 50px;
}

.blogover-image-container img {
    width: 100%;
    height: auto; /* Bewahrt Seitenverhältnis des Bildes */
}

/* Das sind die Quadrate */
.bo-content-block {
     display: flex;
    align-items: flex-start; /* Stellt sicher, dass die Container oben bündig sind */
    gap: 50px; /* Setzt 50px Abstand zwischen den Elementen */
    width: 80%; /* Setzt die Breite des .content-block auf 80% */
    margin: 50px; /* Abstand zum oberen Inhaltsblock */
}

.bo-image-container {
    flex: 0 0 auto; /* Verhindert, dass die Container schrumpfen oder wachsen */
    position: relative; /* Ermöglicht die Positionierung des Bildes */
    width: calc(50% - 25px); /* Berechnet die Breite jedes Containers, abzüglich des Abstands */
    padding-top: calc(50% - 25px); /* Erzeugt ein Quadrat basierend auf der Breite */
}

.bo-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Sorgt dafür, dass das Bild das Container-Quadrat vollständig ausfüllt */
    transition: transform 0.3s ease-in-out; /* Sanfte Animation */
}

.bo-image-container:hover img {
    transform: translateY(-10px); /* Verschiebt das Bild nach oben beim Hover */
}

.bo-two-thirds {
    width: 66.67%; /* 2/3 der Container-Breite */
    padding-top: 66.67%; /* Erzeugt ein Quadrat */
}

.bo-one-third {
    width: 33.33%; /* 1/3 der Container-Breite */
    padding-top: 33.33%; /* Erzeugt ein Quadrat */
}

.bo-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Stellt sicher, dass das Bild den Container vollständig abdeckt */
}


@media (max-width: 1024px) {
    .blogover-image-container {
        margin: 0;
    }
    .blogover-headline-container {
        top: 1.5vh;
        left: 30px;
        text-align: left;
        width: 90%;
    }

    .blogover-headline-container h1 {
    font-size: 4vw;
    }
    .blogover-headline-container p {
    }
    .bo-content-block {

    gap: 30px; /* Setzt 50px Abstand zwischen den Elementen */
    margin: 30px 0; /* Abstand zum oberen Inhaltsblock */
}


}

@media (max-width: 768px) {
    
    .blogover-headline-container {
        width: 60%;
    }

    .blogover-headline-container h1 {
    font-size: 6vw;
    }
    .blogover-headline-container p {
        font-size: 1rem;
        max-width: 300px;
    }
}

/* BlogPage Modul */

.blogpage-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Zentriert die Inhalte horizontal */
    position: relative;
    font-size: 1.2rem;
    line-height: 1.5rem;
}


.blogpage {
  margin: 50px;
  width: 80%;
  max-width: 900px;
  top: 0;
  align-self: flex-end;
  color: #fff;
  overflow-wrap: break-word; /* Standard */
}

.blogpage h1, .blogpage h2, .blogpage h3, .blogpage h4 {
    color: #fff;
    line-height: 1.3em;
}

.blogpage p {
    padding-right: 200px;
}

.blogpage a {
  color: #fff;
}

.blogpage a:hover {
  color: #fff;
}

@media (max-width: 1024px) {
  .blogpage  {
    margin: 20px;
    margin-left: auto;
    margin-right: auto;
      width: 60%;   
  }
  .blogpage p {
    padding-right: 0px;
    }
}

@media (max-width: 768px) {
  .blogpage  {
    width: 80%;
    min-width: 50px;
  }

   .blogpage h1, .blogpage h2, .blogpage h3, .blogpage h4 {
    color: #fff;
  }

    .blogpage p {
    padding-right: 0px;
    font-size: 1rem;
    }

}

.vimeo-container {
    position: relative;
    margin-top: 80px;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
}

.vimeo-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*Blog Gallery Modul*/
#gallery {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  width: 80%;
  margin-right: auto;
  margin-left: auto;

  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;
}

@media (max-width: 800px) {
  #gallery {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}

#gallery img, #gallery video {
  width: 100%;
  height: auto;
  margin: 4% auto;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;

}

#gallery img:hover , #gallery video:hover  {
    transform: translateY(-10px); /* Verschiebt das Bild nach oben beim Hover */
}

.overlay-gallery {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-body {
    margin: 20px;
    width: 90%;  /* Maximale Breite */
    height: 80%; /* Maximale Höhe */
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
}

.modal-img {
    max-width: 100%;  /* Maximale Breite anpassen */
    max-height: 90%;  /* Platz für Caption lassen */
    width: auto;
    height: auto;
    object-fit: contain;
}

.image-caption {
    color: white;
    text-align: center;
    padding-top: 10px;
    max-width: 600px;
    font-size: 1.2rem;
}

/*Linklist*/

.linklist-container {
    align-items: flex-end; /* Zentriert die Inhalte horizontal */
    position: relative;
    font-size: 1.2rem;
    line-height: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    width: 80%;
    max-width: 900px;
}

.linklist {
    color: #fff;
    overflow-wrap: break-word; /* Standard */
    padding: 30px;
    list-style-type: none; /* Keine Listenpunkte */
    border-top: 1px solid #fff; /* Dickerer oberer Rahmen */
    border-bottom: none;
    border-left: 1px solid #fff;
    position: relative; /* Wichtig für Pseudo-Elemente */
}

.linklist::after {
    content: ""; /* Notwendig für Pseudo-Elemente */
    position: absolute;
    left: 0; /* Beginne 10% von links, um den Rahmen kürzer zu machen */
    right: 20%; /* Endet 10% von rechts, ebenfalls für kürzeren Rahmen */
    bottom: 0; /* Position direkt am unteren Rand */
    border-bottom: 1px solid #fff; /* Stil des unteren Rahmens */
}


.linklist li {
    margin-bottom: 10px; /* Abstand zwischen den Listenelementen */
}

.linklist li a {
    color: #fff;
    text-decoration: none;
    padding-left: 20px; /* Einrückung für den gesamten Text, macht Platz für den Pfeil */
    position: relative; /* Wichtig für die Positionierung des Pseudo-Elements */
}

.linklist li a::before {
    content: '\25B8'; /* Unicode für den dreieckigen Pfeil */
    position: absolute;
    left: 0; /* Position des Pfeils am Anfang des Links */
    top: 0; /* Positioniert den Pfeil vertikal zentriert */
    color: #fff; /* Farbe des Pfeils */
    margin-right: 5px; /* Abstand zwischen Pfeil und Text */
    width: 15px; /* Breite des Pfeilbereichs */
}

.linklist li a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    
    .linklist {
            font-size: 1.0rem;
    }

}

/* Certified Partner Modul */

.partner-form-module {
  display: flex;
  justify-content: left; /* Zentriert den Inhalt horizontal */
  align-items: center; /* Zentriert den Inhalt vertikal */
  position: relative;
  width: 100%;
  margin: 50px 0;
}

.partner-form-background {
  position: absolute;
  width: 85%;
  height: 450px; /* Vertikale Zentrierung im Modul */
  left: 0;
  z-index: 1; /* Hintergrund z-Index */
}

.partner-form-wrapper {
}

@media (min-width: 1025px) {
  .partner-form-wrapper  {
    margin: 0 auto; /* Zentriert den Container horizontal nur oberhalb von 1024px */
    max-width: 1300px; /* Maximale Breite des Inhalts */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 30px;
    width: 100%;
  }
}

.partner-form-area {
  display: flex;
  justify-content: center; /* Horizontale Zentrierung der Kinder */
  align-items: center; /* Vertikale Zentrierung der Kinder */
  position: relative;
  z-index: 2; /* Über dem Hintergrund */
    flex-direction: row; /* Standardmäßig nebeneinander */
      width: 500px;
      height: 650px; /* Höhe des Kontaktformulars */
}

.partner-form {
  width: 100%;
  height: 100%;
  background-color: var(--bg-color-light);
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.6);
  display: flex; 
  margin: 25px;
  position: relative;
}


.partner-form-content {
    width: 100%;
    height: 100%;
  padding: 50px;
  display: flex; 
  align-items: center;
  flex-direction: column;
}


.partner-logo {
    width: 200px;
    height: auto;
}

.partner-form h2 {
  color: black; /* Setzt die Textfarbe der <h1> auf Schwarz */
  font-size: 1.3rem;
  width: auto;
}

.partner-form a {
  color: #B00000; /* Setzt die Textfarbe der <h1> auf Schwarz */
}

.partner-form a:hover {
  color: #B00000;
}

/* Medienabfrage für Bildschirme ab 1024px Breite */
@media (max-width: 1024px) {
  .partner-form-module {
    flex-direction: column; /* Ändert die Flex-Richtung zu vertikal */
    height: auto;
    margin: 50px 0;
  }

  .partner-form-area {
    margin: 25px 0;
    max-width: 600px;
    width: auto;
    height: auto;
  }

  .partner-form-background {
    display: none;
}

  .partner-form {
    width: 80%; /* Anpassung der Breite für bessere Ansicht */
    margin: 10px auto; /* Zentriert das Formular und fügt vertikalen Abstand hinzu */
  }

  .partner-form-content{
    padding: 50px;
  }

}


@media (max-width: 576px) {
    
    .partner-form-module {
        margin: 0;
    }

    .partner-form-wrapper {
        background-color: var(--bg-color-light);
    } 

    .partner-form {
        background-color: rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

      .partner-form-area {
        margin: 25px 0;
    }

    .partner-form {
        width: 100%; /* Anpassung der Breite für bessere Ansicht */
        margin: 10px auto; /* Zentriert das Formular und fügt vertikalen Abstand hinzu */
    }

    .partner-logo {
    width: 50%;
    height: auto;
    }

    .partner-form-content {
        padding: 0 30px;
        align-items: start;
    }
}
  

.ribbon {
    position: absolute;
    top: 20px; /* Abstand von der oberen Kante des partner-form-Containers */
    right: -30px; /* Etwas nach außen versetzt für den schrägen Effekt */
    background-color: red; /* Die Farbe des Ribbons */
    color: white; /* Textfarbe */
    padding: 5px 40px; /* Vertikaler und horizontaler Innenabstand */
    transform: rotate(45deg); /* Dreht das Ribbon für einen schrägen Effekt */
    transform-origin: top right; /* Bestimmt den Ursprung der Transformation */
    box-shadow: 0 0 5px #666; /* Leichter Schatten für mehr Tiefe */
    z-index: 1000; /* Stellt sicher, dass das Ribbon über anderen Elementen liegt */
}

/* Optional: Anpassung für kleinere Bildschirme */
@media (max-width: 600px) {
    .ribbon {
        font-size: 14px; /* Kleinere Schriftgröße */
        padding: 5px 20px; /* Kleinerer Innenabstand */
        top: 10px;
        right: -20px;
    }
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Erzeugt 4 gleichmäßige Spalten */
    grid-gap: 50px; /* Abstand zwischen den Spalten */
    margin: 0 50px; /* Abstand zwischen den Reihen (entspricht --bs-gutter-y) */
}

.grid-item {
    display: flex;  /* Flexbox für das Grid-Item verwenden */
    flex-direction: column;  /* Kinder vertikal stapeln */
    justify-content: center;  /* Vertikale Zentrierung der Kinder */
    align-items: center; /* Zentriert die Kinder horizontal */
    padding: 10px; /* Gleichmäßiger Innenabstand von 10px */
    width: auto; /* Die Breite passt sich an den Container an */
    box-sizing: border-box; /* Stellt sicher, dass Padding und Border in der Breite inbegriffen sind */
    height: 30vh;
}

.grid-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Weiche Transition für die Transformation und den Schatten */
    will-change: transform, box-shadow; /* Optimiert die Performance für die Transition */
    cursor: pointer; /* Zeigt einen Zeiger, um Interaktivität anzudeuten */
    position: relative; /* Notwendig, um die Verschiebung zu ermöglichen */
}

.grid-item:hover {
    transform: translateY(-10px); /* Verschiebt das Element um 10px nach oben */
}

.grid-item img {
    width: 100%;  /* Setzt die Breite auf 100% des Elternelements */
    max-width: 100%;  /* Begrenzt die maximale Breite auf 90% */
    height: auto;  /* Die Höhe passt sich proportional zur Breite an */
    max-height: 100%; /* Begrenzt die maximale Höhe auf 90% */
}

@media (max-width: 1024px) {
    .grid {
        grid-template-columns: repeat(3, 1fr); /* Wechselt zu 3 Spalten auf mittleren Bildschirmen */
        margin: 50px; /* Gleichbleibender Außenabstand */
    }
}

@media (max-width: 576px) {
    .grid {
        grid-template-columns: repeat(2, 1fr); /* Wechselt zu 2 Spalten auf kleineren Bildschirmen */
        margin: 20px; /* Reduzierter Außenabstand für kleinere Bildschirme */
    }
    .grid-item {
        height: 40vw;
    }
}


/* Service Modul */

/* Basis-Styling für den Wrapper */
.service-video-text-wrapper {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* Styling für den Video-Container */
.service-video-container {
    width: 50%;
    height: 80vh;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    overflow: hidden;
}

/* Styling für den Text-Container */
.service-text-container {
    width: 50vw; /* Breite auf 50% des Viewport-Width gesetzt */
    height: auto; /* Höhe automatisch basierend auf Inhalt */
    overflow-y: auto; /* Erlaubt vertikales Scrollen bei Bedarf */
    position: relative; /* Standardpositionierung relativ zum normalen Fluss */
    z-index: 5; /* Stacking-Kontext unter dem Video-Container */
    color: #fff; /* Weiße Textfarbe für besseren Kontrast auf dunklem Hintergrund */
    text-align: left; /* Sorgt dafür, dass aller Text linksbündig ist */
    padding-left: 50px; /* Fügt links ein Padding hinzu, um den Text von der Kante abzusetzen */
    box-sizing: border-box; /* Inkludiert das Padding in die Breitenberechnung */
}

/* Styling für die einzelnen Text-Content-Blöcke */
.service-text-content {
    width: 100%; /* Nimmt die volle Breite des übergeordneten Containers ein */
    max-width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Zentriert den Inhalt vertikal */
    align-items: flex-start; /* Richtet den Inhalt horizontal links aus */
    height: 100vh; /* Setzt die Höhe jedes Textblocks auf die volle Bildschirmhöhe */
    box-sizing: border-box; /* Bezieht das Padding in die Breitenberechnung ein */
}

/* Media Query für Viewports unter 1024px Breite */
@media (max-width: 1024px) {
    .service-video-container {
        width: 60%; /* Video nimmt die gesamte Breite ein */
    }

    .service-text-container {
        width: 40%; /* Erweiterte Breite, um Überlappung zu ermöglichen */
        left: -55%; /* Verschiebt den Container nach links über das Video */
        overflow: visible;
    }

    .service-text-content {
        width: 180%; /* Passt die Breite des Text-Contents an den Container an */
    }
}

@media (max-width: 1024px) {
    .service-video-container {
        width: 60%; /* Video nimmt die gesamte Breite ein */
    }

    .service-text-container {
        width: 40%; /* Erweiterte Breite, um Überlappung zu ermöglichen */
        left: -60%; /* Verschiebt den Container nach links über das Video */
        overflow: visible;
        padding-left: 30px; 
    }

    .service-text-content {
        width: 220%; /* Passt die Breite des Text-Contents an den Container an */
    }
}

/* Effektgeballer */


/* Startzustand für das Einblenden */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px); /* Startet etwas nach unten verschoben */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Sanfte Transition für das Einblenden und Bewegen */
}

/* Zielzustand, sobald das Element sichtbar wird */
.fade-in-section.visible {
    opacity: 1;
    transform: translateY(0); /* Bewegt sich in die Endposition */
}

@keyframes slideFadeIn {
    from {
        opacity: 0;
        transform: translateX(-150px); /* Startet 50px links von seiner endgültigen Position */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* Endet in seiner endgültigen Position */
    }
}

.slidefadein {
    animation: slideFadeIn 1s ease-out forwards; /* Nutzt die definierte Animation */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadein {
    animation: fadeIn 3s ease-out forwards; /* Nutzt die definierte Animation */
}