@font-face {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: 'Barlow';
        font-style: normal;
        font-weight: 500;
        src: url(Barlow-Medium.ttf) format('ttf');
    }
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    src: url(Barlow-Regular.ttf) format('ttf');
}
/*@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500&display=swap');
*/
/*.barlow-regular {
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-style: normal;
}*/

/*.barlow-medium {
    font-family: "Barlow", sans-serif;
    font-weight: 500;
    font-style: normal;
}*/

header {
    font-family: 'Barlow', 'Open Sans', sans-serif;
    position: fixed;
    top: 0;
    width: 100%;
    /* height: 115px; */
    background-color: #f4f4f4;
    z-index: 1000;
    /* Legt den Header über andere Elemente */ 
    text-size-adjust: auto;
    /* justify-content: space-evenly; */
}

body {
    /* font-family: "Barlow", 'Open Sans', sans-serif; */
    font-family: 'Barlow', 'Open Sans', sans-serif;
    /* font-family: 'Barlow', 'Times New Roman', Times, serif; */
    padding-top: 115px;
    /* Anpassen, je nach Höhe des Headers */
    background-color: #f4f4f4;
    text-size-adjust: auto;
    font-size: 1em;
}

html {
  scroll-behavior: smooth;
}

a {
    /*text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); /*Schatten hinzufügen (horizontal, vertikal, Unschärfe, Farbe) */
    font-weight: bolder;
    text-decoration: underline;
    color: white;
}

@media (max-width: 1000px) {
    h1 {
        margin: 0;
        padding-top: 5px;
        width: 100%;
        white-space: normal;
        font-size: 1.15em;
        text-size-adjust: auto;
        box-sizing: border-box;
        /* Stellt sicher, dass Padding und Border in der Breite enthalten sind */
        /* text-align: center; */
        /* overflow: hidden; Überschüssiger Text wird ausgeblendet */
        /* text-overflow: ellipsis; Zeigt Auslassungszeichen (...) für abgeschnittene Textteile */
        /* font-size: 10px; */
    }

    body {
        padding-top: 130px;
        /*font-size: 1em;*/
        text-size-adjust: auto;
    }
}

h1 {
    /* white-space: nowrap; */
    text-size-adjust: auto;
}

.button {
    padding: 5px 20px 10px;
    margin: 0px 10px 20px;
    color: black;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.15);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    /* font-weight: bold; */
    transition: border-color 0.5s;
    /* Ändert die Rahmenfarbe beim Überfahren mit der Maus */
}

/* "mouse over"-Effekt: Ändern der Hintergrundfarbe */
.button:hover {
    /*opacity: 0.5;*/
    border-bottom-color: rgba(0, 0, 0, 1);
}

.navigation {
    display: flex;
    justify-content: space-between;
}

.navigation .linkerInhalt {
    width: calc(100% - 115px);
}


.mobile-nav {
    display: none;
    /*Standardmäßig ausgeblendet */
}

.logoContainer {
    height: 115px;
    width: 115px;
    object-fit: scale-down;
    margin-right: 16px;
    object-position: right top;
}

.navigation img {
    height: 115px;
}

.mobile-nav img {
    height: 115px;

}

/* Media Query für mobile Geräte mit einer maximalen Bildschirmbreite von 1000px */
@media (max-width: 1000px) {

    /* header{
        height: 130px;
    } */
    /* Verstecke die Navigationslinks für mobile Geräte */
    .navigation {
        display: none;
    }

    /* Zeige das Dropdown-Menü für mobile Geräte */
    .mobile-nav {
        /* display: block; */
        /* height: 130px; */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 130px;
        /* width: calc(100% - 115px); */
    }

    .mobile-nav .linkerInhalt {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .dropdown .dropbtn {
        padding: 10px 20px 10px;
        margin: 0px 10px 10px;
        color: black;
        background-color: transparent;
        border: none;
        border-bottom: 2px solid rgba(0, 0, 0, 0.15);
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 1.1em;
        /* font-weight: bold; */
        transition: border-color 0.5s;
        /* Ändert die Rahmenfarbe beim Überfahren mit der Maus */
    }

    /* Dropdown-Inhalt-Stil */
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: #333;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
        color: black;
        text-decoration: none;
    }

    .dropdown-content a:hover {
        background-color: #ddd;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown:hover .dropbtn {
        background-color: #e5e5e5;
    }
}


/* Styles für den Cookie-Hinweis */
#cookie-notice {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: white;
    opacity: 0.8;
    padding: 10vh 0;
    text-align: center;
    z-index: 1000;
    /* Legt den Hinweis über andere Elemente */
    display: none;
    /* Wird zunächst ausgeblendet */
}

.cookie-button {
    margin: 0 10px;
}

#slideshow {
    position: relative;
    width: 100%;
    height: calc(100vh - 70px);
    overflow: hidden;
}

#slideshow .content {
    position: absolute;
    z-index: 1;
    top: 00px;
    left: 0px;
    /* right: 0px; */
    width: 100%;
    /* background-color: rgba(0, 0, 0, 0.65); */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0));
    color: white;
    padding: 20px;
}

@media (max-width: 1000px) {
    #slideshow .content {
        background: rgba(0, 0, 0, 0.4);
    }
}

#slideshow .slideshow-container {
    /* position: absolute; */
    display: flex;
    justify-content: center;
    /* Horizontale Zentrierung */
    align-items: center;
    /* Vertikale Zentrierung */
    /* bottom: 0; */
    /* left: 0; */
    width: 100%;
    height: 100%;
    /* height: calc(100vh-125px); */
    /* height: calc(1080px-125px); */
    z-index: 1;
    margin: auto;
    /* overflow: auto; */
    /* overflow-x: scroll; */
}

/* Stil für die Videos */
.mySlides {
    /* height: 100%; */
    width: 100%;
    display: none;
}

#slideshow .mySlides video {
    width: 100%;
    height: 100vh;
    /* 100% der Bildschirmhöhe */
    object-fit: cover;
    /* Skaliert das Video, um die volle Höhe auszufüllen */
    object-position: bottom;
}

/* .video-preview {
    position: relative;
} */

/* .video-preview img {
    display: block;
    width: 100%;
    height: auto;
} */

/* .video-preview video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
} */

#Leistungen {
    position: relative;
    /* padding-top: 125px; */
    width: 100%;
    height: calc(100vh - 125px);
    overflow: hidden;
}

#Leistungen .headline {
    position: relative;
    z-index: 1;
    left: 0;
    /* top: 70px; */
    border-top: 2px solid rgba(0, 0, 0, 0.15);
    color: black;
    background-color: #f4f4f4;
    padding: 0px 10px;
    padding-top: 15px;
    /* padding-top: 15px; */
    /* padding-bottom: 0px; */
    margin-top: 5px;
}

#Leistungen .content {
    position: relative;
    z-index: 1;
    /* background-color: rgba(0, 0, 0, 0.65);  */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0));
    color: white;
    padding-left: 20px;
    padding-top: 1px;
    padding-bottom: 20px;
    line-height: 1.5;
}

@media (max-width: 1000px) {
    #Leistungen .content {
        /* background-color: rgba(0, 0, 0, 0.4);  */
        background: rgba(0, 0, 0, 0.4);
        /* padding-bottom: 40px; */
    }
}

.leistungenListe {
    list-style: none;
    /* Entfernt Aufzählungspunkte oder Nummerierungen */
    padding: 0;
    /* line-height: 1.7; */
}

@media (max-width: 1000px) {
    ul.leistungenListe {
        line-height: 1.64;
    }
}

.leistungenListe li {
    margin-bottom: 10px;
    /* Abstand nach jedem Listeneintrag  */
}

#Leistungen .image-container {
    background-image: url('Leistungen_Background.jpg');
    background-size: 100%;
    background-size: cover;
    /* Bild anpassen, um den gesamten Bereich abzudecken */
    background-repeat: no-repeat;
    /* Hintergrundbild nicht wiederholen */
    background-position: center center;
    display: block;
    height: 100%;
}


/*Produkte*/
#Produkte {
    position: relative;
    width: 100%;
    height: calc(100vh - 125px);
    overflow: hidden;
}

@media (max-width: 1000px) {
    #Produkte {
        height: calc(100vh + 2em);
    }
}

#Produkte .headline {
    position: relative;
    z-index: 1;
    left: 0;
    /* top: 70px; */
    border-top: 2px solid rgba(0, 0, 0, 0.15);
    color: black;
    background-color: #f4f4f4;
    padding: 0px 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    /* padding-top: 15px; */
    /* padding-bottom: 0px; */
    margin-top: 5px;
}

.productSlide {
    /* Positionieren der Slides absolut, damit alle Slides übereinander liegen */
    position: absolute;
    z-index: -1;
    /* top: 70px; */
    left: 0;
    top: 29px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 1s;
    opacity: 0;
}

/* Stil für den aktuellen (sichtbaren) Slide */
.productSlide.active {
    opacity: 1;
}

/* Beschriftung im Slide */
#Produkte.slide-caption {
    position: absolute;
    z-index: 1;
    top: 0;
    width: 100%;
    /* background-color: rgba(0, 0, 0, 0.65); */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0));
    color: white;
    padding: 20px;
    padding-top: 0;
}

.productSlide .content-text-picture {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* background-color: red; */
    flex-wrap: wrap;
    top: 0;
    object-position: top;
    padding-right: 20px;
}

.productSlide .content {
    position: relative;
    z-index: 1;
    color: white;
    /* width: 50%; */
    justify-self: start;
    flex: 1.5;
    /* background-color: blue; */
    /* display: flex; */
    /* flex: 2; */
    /* padding: 20px; */
}

.productSlide .content-text {
    width: auto;
    padding-top: 20px;
}

.productSlide .content-picture {
    /* background-color: yellow; */
    flex: 1;
    /* width: 30%; */
    /* height: 20%; */
    object-fit: none;
    object-position: top;
    /* display: flex; */
    /* flex: 1; */
    justify-self: end;
    padding-top: 0px;
    margin-top: 9px;
}

.productSlide .content-picture img {
    width: 100%;
    cursor: pointer;
    transition: transform 0.3s ease;
    object-fit: scale-down;
    object-position: top;
    /* z-index: 100; */
}

#Produkte .content-picture img:hover {
    transform: scale(1.05);
    /*Bildvergrößerung beim Hover-Effekt */
}

/* Buttons */
.prev,
.next {
    display: inline-block;
    padding: 10px;
    /* background-color: #333; */
    color: white;
    border: none;
    cursor: pointer;
}

.prev,
.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(3, 3, 3, 0.5)
}

.prev {
    left: 0;
}

.next {
    right: 0;
}

#pauseButton {
    position: absolute;
    left: 50%;
    bottom: 0;
    background: rgba(3, 3, 3, 0.5);
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    margin: 10px;
    margin-bottom: 0;
}

#pauseButtonProdukte {
    position: absolute;
    left: 50%;
    bottom: 0;
    background: rgba(3, 3, 3, 0.5);
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    margin: 10px;
    margin-bottom: 0;
}

/* Lightbox-Stil */
/* .lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
} */

/* .lightbox img {
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
} */


.plus-list {
    list-style-type: "+  ";
    padding-left: 15px;
    line-height: 2;
    width: auto;
}

@media (max-width: 1000px) {
    .plus-list {
        /* line-height: 1.5; */
        font-size: 1em;
    }
}

@media (max-width: 1000px) {
    .productSlide .content-text {
        padding-left: 13px;
    }

    .productSlide .slide-caption {
        background: rgba(0, 0, 0, 0.4);
        padding: 0px;
        padding-left: 5px;
        padding-right: 5px;
    }
}

.productSlide img {
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
    object-fit: cover;
}

/*Produkte Ende*/

/* FAQ */
#faq {
    position: relative;
    width: 100%;
    overflow: hidden;
    a {
        color: black;
    }
}


#faq .content {
    position: relative;
    z-index: 1;
    /* left: 0; */
    /* border-bottom: 2px solid rgba(0, 0, 0, 0.15); */
    color: black;
    background-color: #f4f4f4;
    /* padding: 0px 10px; */
    margin-top: 5px;
    border-top: 2px solid rgba(0, 0, 0, 0.15);
    padding: 0px 10px;
    /* background-image: linear-gradient(to bottom, white, #f4f4f4);  */
}

/* #faq h3{
    padding: 0px 10px;
} */
.faq-question {
    width: 100%;
    font-weight: bold;
    cursor: pointer;
    /* Fügt den Zeiger hinzu, um zu sehen, dass die Fragen klickbar sind */
    background-image: linear-gradient(to bottom, white, #f4f4f4);
    /* Verlaufende Sättigung */
    color: black;
    padding: 10px;
    /* Innenabstand für die Fragen */
    /* border-top: 1px solid rgba(0, 0, 0, 0.15); */
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.15); */
}

.faq-answer {
    width: calc(100%-60px);
    padding-top: 1px;
    /* margin-left: 30px; */
    padding-left: 30px;
    padding-right: 30px;
    display: none;
    /* Standardmäßig ausgeblendet */
    /* border-top: 1px solid rgba(0, 0, 0, 0.15); */
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.15); */
    background-image: linear-gradient(to bottom, white, #f4f4f4);
    line-height: 1.5;
}

#faq .iframe-container {
    /* display: flex; */
    justify-content: center;
    width: 100%;
    /* max-width: 1000px; */
    height: calc(100vh - 300px);
}

#faq iframe {
    width: 100%;
    /* max-width: 1000px; */
    height: 100%;
    /* height: calc(100vh - 125px - 100px); */
    border: none;
}

#foerdercompassIframe {
    /* width: 100%; */
    /* height: calc(100vh - 500px);  */
    border: none;
}

.faqBildContainer {
    /* width: calc(100%-40px); */
    display: flex;
    justify-content: center;
    /* width: 100%; */
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: scale-down;
}

@media (max-width: 1800px) {
    .faqBildContainer {
        display: flex;
        justify-content: center;
        max-width: 100%;
        height: auto;
        display: block;
        object-fit: scale-down;
        overflow: scroll;
    }

    .faqBildContainer img {
        max-width: 100%;
        height: auto;
        display: block;
        object-fit: scale-down;
        margin: 0 auto;
    }
}

@media (max-width: 1200px) {
    iframe {
        max-width: 1200px;
    }
}

#kontakt {
    position: relative;
    width: 100%;
    /* height: calc(100vh - 50px); */
    overflow: hidden;
    /* border-top: 2px solid rgba(0, 0, 0, 0.15); */
    margin-top: 3px;
    /* padding-top: 0px; */
    a {
        font-weight: normal;
        color: black;
    }
}


#kontakt form {
    /* background: #fff; */
    padding-left: 1.5em;
    max-width: 500px;
    /* margin: auto; */
    border-radius: 10px;
    /* box-shadow: 0 2px 10px rgba(0,0,0,0.1); */
}


#kontakt label {
    display: block;
    margin: 1em 0 0.3em;
}

#kontakt input, textarea {
    width: 100%;
    padding: 0.7em;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#kontakt button {
    margin-top: 1.5em;
    /* padding: 0.8em 1.5em; */
    /* background: grey; */
    /* color: white; */
    /* border: 1px; */
    /* border-radius: 5px; */
    cursor: pointer;
    font-weight: bold;
}

/* button:hover {
    background: #0056b3;
} */

/* Honeypot verstecken */
#kontakt .honeypot {
    display: none;
}

/* .message-box {
  display: none;
  margin-top: 1em;
  padding: 1em;
  border-radius: 5px;
}

.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
} */

#kontakt .content {
    position: relative;
    z-index: 1;
    left: 0;
    /* border-top: 2px solid rgba(0, 0, 0, 0.15); */
    color: black;
    background-color: #f4f4f4;
    padding: 0px 10px;
    /* margin-top: 5px; */
}



#referenzen {
    position: relative;
    /* display: flex;
    flex-direction: column; */
    width: 100%;
    height: calc(100vh - 125px);
    overflow: hidden;
}

#referenzen .content {
    position: relative;
    z-index: 1;
    left: 0;
    /* top: 70px; */
    border-top: 2px solid rgba(0, 0, 0, 0.15);
    color: black;
    background-color: #f4f4f4;
    padding: 0px 10px;
    /* padding-top: 15px; */
    /* padding-bottom: 0px; */
    margin-top: 0px;
}

.slide {
    /* Positionieren der Slides absolut, damit alle Slides übereinander liegen */
    position: absolute;
    z-index: -1;
    /* top: 70px; */
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    /* Die Slides werden zunächst unsichtbar (opacity: 0), aber mit einer Transition auf Sichtbarkeit geändert */
    transition: opacity 1s;
    opacity: 0;
}

/* Stil für den aktuellen (sichtbaren) Slide */
.slide.active {
    opacity: 1;
}

.slide-caption {
    position: absolute;
    z-index: 1;
    top: 0px;
    width: 100%;
    /* background-color: rgba(0, 0, 0, 0.5); */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0));
    color: white;
    padding: 20px;
}

@media (max-width: 1000px) {
    .slide-caption {
        background: rgba(0, 0, 0, 0.4);
    }
}

#referenzen-bilder{
    display: flex;
    flex-direction: row;
    height: 200px;
    border: none;
}

.galerie-streifen {
    flex: 1 1 1800px;
    /* flex-wrap: wrap; */
    overflow-x: auto;
    overflow-y: hidden;
    gap: 40px;
    /* padding: 10px; */
    padding-top: 20px;
}

.galerie-streifen img {
    height: 100%;
    border-radius: 15px;
    /* gap: 40px; */
    margin-left: 1em;
}

.referenzen-link{
    display: flex;
    justify-content: flex-end;
    position: sticky;
    align-items: center; 
}

.link-alle-Referenzanlagen-bilder {
    display: flex;
    /* justify-content: flex-end; */
    align-items: center;
    margin: 20px;
    font-weight: bold;
    color: #007BFF;
}


body.ReferenzbilderAlle {
    /* padding-top: 10px; */
    margin-top: 0;
    /* top: 0px; */
    /* scroll-margin-top: 115px; */
}

#referenzenBilderGalerie{
    /* scroll-margin-top: 125px; */
    padding-top: 4em;
}

.link-alle-Referenzanlagen-bilder:hover {
  text-decoration: underline;
}

.bilder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  padding: 20px;
  padding-top: 50px;
}

.bilder-grid img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.zurueck {
  display: block;
  /* margin: 20px; */
  text-align: left;
  text-decoration: none;
  color: #007BFF;
}

.zurueck:hover {
  text-decoration: underline;
}

.bilder-grid a img {
  transition: transform 0.2s;
}

.bilder-grid a:hover img {
  transform: scale(1.05);
}


#news {
    /* position: relative;
    z-index: 1;
    left: 0;*/
    color: black;
    background-color: #f4f4f4;
    /* padding: 5px; */
    padding-top: 0px;
    padding-bottom: 0;
    /* height: calc(100vh - 125px); */
}
#news a{
    color: black;
}

#news .headline {
    margin-top: 5px;
    border-top: 2px solid rgba(0, 0, 0, 0.15);
    /* padding: 0px 10px; */
    padding-left: 10px;
    padding-bottom: 0;
    border-top: 2px solid rgba(0, 0, 0, 0.15);
}

/* #news .content{
    padding: 10px;
    padding-top: 0;
    padding-bottom: 0;
}
#news .content iframe{
    height: calc(540px - 2em);
} */

#news .iframe-container {
    width: 100%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    /* gap: 20px; */
    /* margin-bottom: 5px; */
    padding: 5px;
}

#news .iframe-wrapper {
    /* flex: 1 1 calc(50% - 20px); */
    /*flex: 1 1 calc(1200px - 20px);*/
    max-width: 850px;
    width: 100%;
    display: flex;
    /* justify-content: center; */
    flex-direction: column;
    margin-bottom: 1em;
    padding: 1em;
}

#news .iframe-header {
    margin-bottom: 10px;
    text-align: left;
    /* font-weight: bold; */
}

/* #news .iframe-header a {
    text-decoration: none;
    color: #000;
    display: block;
    padding: 10px;
  } */

#news .iframe-wrapper iframe {
    /* border: 1px solid #ccc; */
    height: calc(540px - 2em);
}

@media (max-width: 1300px) {
    #news .iframe-wrapper {
        flex: 1 1 100%;
    }

    #news .iframe-wrapper iframe {
        /* border: 1px solid #ccc; */
        height: calc(350px + 6em);
    }
}

#news iframe {
    width: 100%;
    height: 700px;
    /* height: calc(100vh - 125px - 100px); */
    border: none;
    /* Rahmen entfernen */
}

@media (max-width: 1200px) {
    #news iframe {
        /* max-width: 1200px; */
        width: 100%;
    }
}


p {
    line-height: 2;
}

ul {
    line-height: 1.5;
}

.custom-heading {
    background-image: linear-gradient(to bottom, white, #f4f4f4);
    /* Verlaufende Sättigung */
    padding: 10px;
    padding-top: 15px;
    /* margin-top: 5px; */
}

#Referenzen img {
    max-width: 100%;
    height: 100%;
    overflow: hidden;
}

#footer {
    a {
        font-weight: normal;
        color: black;
    }
}

#obi-kontakt-header a{
    color: black;
    text-decoration: none;
}