/* Allgemeine Styles */
@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat-Regular.ttf') format('woff2'), /* Für moderne Browser */
         url('Montserrat-Regular.ttf') format('woff'); /* Für ältere Browser */
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
}

/* Header-Stile */
header {
    letter-spacing: 7px;
    position: fixed; /* Fixiert den Header */
    width: 100%; /* Volle Breite */
    background-color: rgba(255, 255, 255, 1.0); /* Hintergrundfarbe: Leicht transparentes Weiß */
    color: #000; /* Textfarbe: Schwarz */
    padding: 20px 0; /* Innenabstand oben und unten: 20px, Innenabstand links und rechts: 0 */
    text-align: center; /* Zentriert den Inhalt horizontal */
    font-size: 12px;
    z-index: 1000; /* Stellt sicher, dass der Header über anderen Elementen liegt */
    transition: background-color 0.3s ease; /* Fügt eine Übergangseffekt für die Hintergrundfarbe hinzu */
}

.logo img {
    max-width: 200px; /* Maximalbreite des Logos */
    height: auto; /* Automatische Höhe, um das Seitenverhältnis beizubehalten */
    margin-bottom: 30px; /* Fügt 10px Abstand unterhalb des Logos hinzu */
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    display: inline;
    margin-left: 20px;
}

nav ul li:first-child {
    margin-left: 0;
}

nav ul li a {
    color: #000;
    text-decoration: none;
    font-weight: 100;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #999; /* Hellgrau */
}

/* Hero-Bereich */
/* Stile für die Hero-Sektion */
.hero {
    background-color: #f0f0f0;
    text-align: center;
    height: calc(100vh - 100px);
    overflow: hidden;
    position: relative; /* Position relativ für die Überlagerung von Text über Bildern */
    z-index: 1; /* Erhöhe den z-index hier, um sicherzustellen, dass es über dem nachfolgenden Abschnitt ist */
    padding-top: 70px;
}

.hero-images {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content:center;
    align-items: center;
    position: relative;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Skaliert das Bild so, dass es den Container ausfüllt */
    transition: opacity 1.5s ease; /* Übergangseffekt für Opazität */
    position: absolute; /* Position absolut, um die Überlagerung zu ermöglichen */
}

.hero-image.active {
    opacity: 1; /* Aktives Bild sichtbar machen */
    z-index: 1;
}

.hero-image:not(.active) {
    opacity: 0;
    z-index: 0;
}

.hero-text {
    font-family: 'Montserrat', sans-serif;
    position: absolute; /* Damit können die Texte relativ zum Hero-Element positioniert werden */
    bottom: 20px; /* Abstand vom unteren Rand des Hero-Elements */
    left: 20px; /* Abstand vom linken Rand des Hero-Elements */
    color: white; /* Farbe des Textes */
    font-size: 18px; /* Schriftgröße */
    transition: opacity 0.5s ease; /* Übergangseffekt für Opazität */
    z-index: 2000;
}

.active .hero-text {
    opacity: 1; /* Aktiven Text sichtbar machen */
}

.hero-text .text1 {
    font-size: 12px;
    text-align: left;
    margin-bottom: 25px; /* Abstand zwischen den beiden Texten */
    margin-left: 50px;
    z-index: 2000;
}

.hero-text .text2 {
    font-size: 20px;
    text-align: left;
    margin-left: 50px;
    margin-bottom: 50px;
    z-index: 2000;
}

/* Spezifische Anpassungen für die Bilder */
.hero-image:nth-child(1) {
    object-fit: cover;
    object-position: center 53%;
}

.hero-image:nth-child(2) {
    object-fit: cover;
    object-position: center 53%;
}

.hero-image:nth-child(3) {
    object-fit: cover;
    object-position: center 53%;
}
.hero-image:nth-child(4) {
    object-fit: cover;
    object-position: center 53%;
}

/* Galerie */
.gallery {
    padding: 50px 20px; /* Innenabstand oben und unten, seitlicher Rand zum Bildschirm erhöht */
    text-align: center; /* Zentriert den Inhalt */
}

.section-title {
    letter-spacing: 7px;
    margin-top: 50px; /* Abstand unterhalb der Überschrift */
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 70px;
}

.gallery-grid {
    display: flex;
    flex-wrap: wrap; /* Bilder werden in mehreren Zeilen angezeigt */
    justify-content: center; /* Zentriert die Bilder horizontal */
    gap: 40px; /* Abstand zwischen den Bildern erhöht */
}

.gallery-item {
    width: calc(25% - 40px); /* 4 Bilder nebeneinander, Abstand zwischen den Bildern abziehen */
    margin-bottom: 40px; /* Abstand unterhalb jedes Bildes erhöht */
}

@media (max-width: 1200px) {
    .gallery-item {
        width: calc(33.33% - 40px); /* 3 Bilder nebeneinander */
    }
    .text-wrapper{
        margin-bottom: 40px;
    }
    .header {
        padding-left: 20px;
        padding-right: 20px;
        font-size: 8px;
    }

}

@media (max-width: 800px) {
    .gallery-item {
        width: calc(50% - 40px); /* 2 Bilder nebeneinander */
    }
    .text-wrapper{
        margin-bottom: 40px;
    }
    .header {
        padding-left: 20px;
        padding-right: 20px;
        font-size: 8px;
    }
}

@media (max-width: 600px) {
    .gallery-item {
        width: calc(100% - 40px); /* Ein Bild pro Reihe */
    }
    .text-wrapper{
        margin-bottom: 40px;
    }
    .footer p {
        padding-left: 20px;
        padding-right: 20px;
    }
    .header {
        padding: 10px 20px; /* Mehr Padding links und rechts, weniger oben und unten */
        font-size: 10px; /* Kleinere Schriftgröße für den Header */
    }

    nav ul li {
        margin-left: 10px; /* Weniger Abstand zwischen den Listenelementen */
    }
    /* Spezifische Anpassungen für die Bilder */
    .hero-image:nth-child(1) {
        object-fit: cover;
        object-position:70% 30%;
    }

    .hero-image:nth-child(2) {
        object-fit: cover;
        object-position:70% 30%;
    }

    .hero-image:nth-child(3) {
        object-fit: cover;
        object-position:70% 30%;
    }
}
.text-wrapper{
    margin-bottom: 40px;
}

.gallery-item img {
    width: 100%; /* Bild auf 100% der Breite des Elternelements skalieren */
    height: 55vh; /* Automatische Höhe beibehalten */
    object-fit: cover; /* Skaliert das Bild so, dass es den Container ausfüllt */
    object-position: 83%;
}

.bild7 img {
    object-position: center;
}

.dp1 img {
    object-position: center;
}

.dp2 img {
    object-position: 24%;
}

.text-wrapper {
    margin-top: 10px; /* Abstand zwischen Bild und Text */
    
}

.title {
    letter-spacing: 2px;
    font-weight: 500;
    font-size: 12px; /* Überschriftgröße */
    margin-bottom: 5px; /* Abstand unterhalb der Überschrift */
    margin-top: 20px;
}

.description {
    letter-spacing: 2px;
    font-size: 10px; /* Textgröße */
    margin-bottom: -80px;
}

/* Footer */
.footer {
    padding: 50px 0; /* Innenabstand oben und unten */
    padding-bottom: 10px;
    text-align: center; /* Zentriert den Inhalt */
}

.footer-line {
    height: 1px; /* Höhe der dünnen Linie */
    background-color: #ccc; /* Farbe der Linie */
    margin-bottom: 50px; /* Abstand unterhalb der Linie */
}

.footer-content {
    display: flex;
    justify-content: space-between; /* Gleichmäßige Verteilung der Inhalte */
}

.left-content, .right-content {
    width: 45%; /* Breite der Inhaltsbereiche */
}

.left-content {
    text-align: left;
    margin-left: 40px;
    font-size: 10px;
    width: 25%;
}

.copyright {
    margin-top: 200px;
}

.left-content h3 {
    font-weight: 200;
}

.right-content {
    font-size: 10px;
    text-align: right;
    margin-right: 40px;
}

.right-content ul {
    list-style-type: none; /* Entfernt Aufzählungspunkte */
    padding: 0; /* Entfernt den Listeninnenabstand */
}

.right-content ul li {
    margin-bottom: 10px; /* Abstand zwischen den einzelnen Links */
}

.right-content ul li a {
    color: #333; /* Textfarbe der Links */
    text-decoration: none; /* Entfernt Unterstreichung der Links */
}

.right-content ul li a:hover {
    text-decoration: underline; /* Unterstreichung bei Hover */
}

.instalogo img {
    margin-top: 250px;
    width: 15px;
    height: 15px;
    /* Andere Stile */
}

/* Media Queries für Bildschirme mit einer maximalen Breite von 768px (Tablets) */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column; /* Anordnung der Inhalte in einer Spalte für kleinere Bildschirme */
    }

    .left-content, .right-content {
        width: 100%; /* Breite der Inhaltsbereiche für kleinere Bildschirme */
        text-align: center;
        margin: 0;
    }

    .right-content {
        margin-top: 20px; /* Abstand nach oben für die Trennung von Links und Text */
    }

    .instalogo img {
        margin-top: 20px;
    }

    .copyright {
        margin-top: 20px;
    }

    .footer h3, .footer p, .footer ul {
        text-align: center; /* Zentriert den Text */
    }
}

/* CSS */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Transparentes Overlay */
    display: none; /* Standardmäßig ausgeblendet */
    z-index: 1000; /* Über allen anderen Elementen */
}

#overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
}

#overlay-image {
    max-width: 90%;
    max-height: 90vh;
}

#overlay-title {
    font-size: 24px;
    margin-top: 20px;
}

#overlay-description {
    font-size: 16px;
    margin-top: 10px;
}

.impressum {
    max-width: 800px; /* Maximale Breite des Inhalts */
    margin: 0 auto; /* Zentriere den Inhalt horizontal */
    padding: 20px; /* Innenabstand */
    padding-top: 140px;
    font-family: 'Montserrat', sans-serif; /* Verwende die Montserrat-Schriftart */
    line-height: 1.6; /* Zeilenhöhe für eine bessere Lesbarkeit */
}

.impressum h2 {
    margin-top: 100px;
    font-size: 18px; /* Überschriftengröße */
    margin-bottom: 20px; /* Abstand unter den Überschriften */
}

.impressum p {
    font-size: 12px; /* Textgröße */
    margin-bottom: 10px; /* Abstand zwischen den Absätzen */
    line-height: 1.4; /* Zeilenhöhe für eine bessere Lesbarkeit */
}

.privacy-policy {
    max-width: 800px; /* Maximale Breite des Inhalts */
    margin: 0 auto; /* Zentriere den Inhalt horizontal */
    padding: 20px; /* Innenabstand */
    padding-top: 140px;
    font-family: 'Montserrat', sans-serif; /* Verwende die Montserrat-Schriftart */
    line-height: 1.6; /* Zeilenhöhe für eine bessere Lesbarkeit */
}

.privacy-policy h2 {
    margin-top: 100px;
    font-size: 18px; /* Überschriftengröße */
    margin-bottom: 20px; /* Abstand unter den Überschriften */
}

.privacy-policy p {
    font-size: 12px; /* Textgröße */
    margin-bottom: 10px; /* Abstand zwischen den Absätzen */
    line-height: 1.4; /* Zeilenhöhe für eine bessere Lesbarkeit */
}

/* Styles für den zweiten Footer */
.footer2 {
    padding: 50px 0; /* Innenabstand oben und unten */
    text-align: center; /* Zentriert den Inhalt */
    background-color: #fff; /* Hintergrundfarbe */
}

.footer2-line {
    height: 1px; /* Höhe der dünnen Linie */
    background-color: #ccc; /* Farbe der Linie */
    margin-bottom: 50px; /* Abstand unterhalb der Linie */
}

.footer2-content {
    font-size: 12px; /* Textgröße */
    letter-spacing: 2px; /* Abstand zwischen den Buchstaben */
}

.footer2-content a {
    color: #333; /* Textfarbe der Links */
    text-decoration: none; /* Entfernt Unterstreichung der Links */
    margin: 0 10px; /* Abstand zwischen den Links */
    transition: color 0.3s ease; /* Übergangseffekt für die Farbe */
}

.footer2-content a:hover {
    color: #999; /* Farbe der Links bei Hover */
}

.art-about {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 140px); /* Höhe des Bildschirms minus Header und Footer */
    text-align: center;
}

.section-title {
    letter-spacing: 7px;
    margin-top: 150px; /* Abstand unterhalb der Überschrift */
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 70px;
}

.about-content p {
    font-size: 16px; /* Schriftgröße des Textes */
    line-height: 1.6; /* Zeilenhöhe für bessere Lesbarkeit */
    color:#333; /* Textfarbe */
    max-width: 600px; /* Maximale Breite des Textes */
    margin: 0 auto; /* Zentriert den Textinhalt */
    padding: 0 20px; /* Innenabstand des Textes */
}

/* Kontakt-Bereich */
.contact {
    padding-top: 130px; /* Innenabstand oben */
    text-align: center;
}

.section-title2 {
    letter-spacing: 7px;
    margin-top: 50px; /* Abstand unterhalb der Überschrift */
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 30px;
}

.contact p {
    font-size: 14px;
    color: #666;
}

.map-container {
    margin-top: 50px;
    margin-bottom: 40px;
}

.contact-form {
    margin-top: 20px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.contact-form button {
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.contact-form button:hover {
    background-color: #555;
}

.art {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 140px); /* Höhe des Bildschirms minus Header und Footer */
    text-align: center;
}

.art-text p {
    font-size: 20px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    color: #333;
}