/* Allgemeine Stile */
body {
    font-family: Arial, sans-serif; /* Schriftart für den gesamten Text */
    margin: 0; /* Kein Standard-Margin */
    padding: 0; /* Kein Standard-Padding */
    background-color: #f9f9f9; /* Heller Hintergrund */
    color: #333; /* Textfarbe */
}

header {
    background-color: #d87b56; /* Hintergrundfarbe des Headers */
    color: white; /* Textfarbe im Header */
    text-align: center; /* Zentrierter Text */
    padding: 20px 0; /* Vertikales Padding */
}

nav {
    background-color: #f9f9f9; /* Hintergrundfarbe für Navigation */
    display: flex; /* Flexbox für Layout */
    justify-content: space-between; /* Abstand zwischen Links */
    align-items: center; /* Vertikal zentrieren */
    padding: 10px 20px; /* Padding für die Navigation */
}

.menu-icon {
    font-size: 24px; /* Größe des Menü-Icons */
    cursor: pointer; /* Zeigt an, dass es klickbar ist */
    display: none; /* Ausblenden auf großen Bildschirmen */
}

#menu-links {
    list-style: none; /* Entfernt Aufzählungszeichen */
    padding: 0; /* Kein Padding */
    display: flex; /* Flexbox für Links */
    gap: 15px; /* Abstand zwischen Links */
}

#menu-links li a {
    text-decoration: none; /* Unterstreichung entfernen */
    color: #d87b56; /* Linkfarbe */
}

#menu-links.active {
    display: block; /* Menü bei mobiler Ansicht aktivieren */
}

/* Main-Bereich */
main {
    padding: 20px; /* Padding für den Hauptbereich */
}

/* Über-mich-Container */
.ueber-mich-container {
    display: flex; /* Flexbox für Layout */
    align-items: center; /* Vertikal zentrieren */
    justify-content: flex-start; /* Links ausrichten */
    margin-bottom: 20px; /* Abstand nach unten */
    gap: 20px; /* Abstand zwischen Bild und Text */
}

.ueber-mich-bild {
    width: 300px; /* Breite des Bildes */
    height: auto; /* Automatische Höhe, um das Seitenverhältnis zu wahren */
    border-radius: 8px; /* Abgerundete Ecken */
    flex-shrink: 0; /* Verhindert das Schrumpfen */
}

.ueber-mich-text {
    max-width: 600px; /* Maximale Breite des Textes */
}

/* Mobile-Optimierung */
@media (max-width: 768px) {
    .ueber-mich-container {
        flex-direction: column; /* Spaltenanordnung auf mobilen Geräten */
        text-align: center; /* Text zentrieren */
    }

    .ueber-mich-bild {
        width: 100%; /* Bildbreite auf 100% setzen */
        max-width: 300px; /* Maximale Breite des Bildes */
        margin-bottom: 20px; /* Abstand nach unten */
    }
}

/* Schaltfläche für Weiterlesen */
#toggleText {
    color: #d87b56; /* Textfarbe der Schaltfläche */
    cursor: pointer; /* Zeigt an, dass es klickbar ist */
    text-decoration: underline; /* Unterstrich für die Schaltfläche */
    display: block; /* Blockelement */
    margin-top: 10px; /* Abstand nach oben */
}

/* Versteckt den Text */
.hidden {
    display: none; /* Elemente mit dieser Klasse sind nicht sichtbar */
}

/* Abschnitt "Meine Leistungen" */
.leistungen-list {
    display: grid; /* Rasterlayout */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Dynamische Spalten */
    gap: 20px; /* Abstand zwischen Elementen */
    margin: 20px 0; /* Abstand nach oben und unten */
}

.leistung-item {
    background-color: #fff; /* Hintergrundfarbe der Leistung */
    border: 1px solid #d87b56; /* Rahmenfarbe */
    border-radius: 10px; /* Abgerundete Ecken */
    padding: 20px; /* Innenabstand */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatteneffekt */
    transition: transform 0.2s; /* Übergangseffekt bei Hover */
}

.leistung-item:hover {
    transform: scale(1.02); /* Vergrößerung bei Hover */
}

.leistung-item h3 {
    color: #d87b56; /* Farbe der Überschrift */
    margin: 0 0 10px; /* Abstand nach unten */
}

/* Angebotsbereich */
.offers {
    display: flex; /* Flexbox für Layout */
    flex-direction: column; /* Spaltenanordnung */
    gap: 20px; /* Abstand zwischen Angeboten */
    margin: 20px 0; /* Abstand nach oben und unten */
}

.offer-item {
    background-color: #fff; /* Hintergrundfarbe des Angebots */
    border: 1px solid #d87b56; /* Rahmenfarbe */
    border-radius: 10px; /* Abgerundete Ecken */
    padding: 20px; /* Innenabstand */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatteneffekt */
    transition: transform 0.2s; /* Übergangseffekt bei Hover */
}

.offer-item:hover {
    transform: scale(1.02); /* Vergrößerung bei Hover */
}

.offer-item h3 {
    color: #d87b56; /* Farbe der Überschrift */
    margin: 0 0 10px; /* Abstand nach unten */
}

/* Galerie-Section */
.gallery-section {
    position: relative;
    max-width: 800px; /* Maximale Breite der Galerie */
    margin: auto; /* Zentriert die Galerie horizontal */
    overflow: hidden;
    display: flex; /* Flexbox aktivieren */
    justify-content: center; /* Zentriert die Galerie horizontal */
    align-items: center; /* Zentriert die Galerie vertikal, falls nötig */
}

.gallery-slider {
    display: flex; /* Flexbox für Layout */
    transition: transform 0.5s ease; /* Übergangseffekt beim Wechsel der Folien */
}

.gallery-slide {
    min-width: 100%; /* Jede Folie nimmt die volle Breite ein */
    box-sizing: border-box; /* Berücksichtigt Padding und Margin */
}

.gallery-slide img {
    width: 80%; /* Breite der Bilder auf 80% des Containers */
    max-width: 600px; /* Maximale Breite der Bilder */
    height: auto; /* Höhe automatisch anpassen */
    margin: auto; /* Zentriert die Bilder */
    border-radius: 8px; /* Abgerundete Ecken */
}

.prev, .next {
    position: absolute; /* Absolute Positionierung für Navigation */
    top: 50%; /* Vertikale Mitte */
    transform: translateY(-50%); /* Zentrierung */
    background-color: rgba(255, 255, 255, 0.7); /* Hintergrundfarbe */
    border: none; /* Kein Rahmen */
    padding: 10px; /* Innenabstand */
    cursor: pointer; /* Zeigt an, dass es klickbar ist */
    border-radius: 50%; /* Runde Schaltflächen */
    font-size: 24px; /* Schriftgröße */
    z-index: 1; /* Über anderen Elementen */
}

.prev {
    left: 10px; /* Linker Abstand */
}

.next {
    right: 10px; /* Rechter Abstand */
}

.prev:hover, .next:hover {
    background-color: rgba(255, 255, 255, 1); /* Vollständige Sichtbarkeit bei Hover */
}

/* Kontaktbereich */
#kontakt {
    background-color: #fff; /* Hintergrundfarbe des Kontaktbereichs */
    border: 1px solid #d87b56; /* Rahmenfarbe */
    border-radius: 10px; /* Abgerundete Ecken */
    padding: 20px; /* Innenabstand */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatteneffekt */
    margin: 20px 0; /* Abstand nach oben und unten */
    max-width: auto; /* Maximale Breite (automatisch) */
    margin-left: auto; /* Zentrierung */
    margin-right: auto; /* Zentrierung */
}

form {
    display: flex; /* Flexbox für das Formular */
    flex-direction: column; /* Spaltenanordnung */
    gap: 10px; /* Abstand zwischen den Feldern */
}

input, textarea {
    padding: 10px; /* Innenabstand */
    border: 1px solid #ccc; /* Rahmenfarbe */
    border-radius: 5px; /* Abgerundete Ecken */
    width: 100%; /* Volle Breite */
}

button {
    background-color: #d87b56; /* Hintergrundfarbe des Buttons */
    color: white; /* Textfarbe */
    border: none; /* Kein Rahmen */
    padding: 10px; /* Innenabstand */
    border-radius: 5px; /* Abgerundete Ecken */
    cursor: pointer; /* Zeigt an, dass es klickbar ist */
    transition: background-color 0.3s; /* Übergangseffekt für Hintergrundfarbe */
}

button:hover {
    background-color: #b86b4f; /* Hintergrundfarbe bei Hover */
}

/* Kontakt Icons */
.kontakt-icons {
    display: flex; /* Flexbox für Layout */
    justify-content: left; /* Links ausrichten */
    gap: 15px; /* Abstand zwischen den Icons */
    padding: 10px 0; /* Abstand oben und unten */
}

.kontakt-icons a {
    display: inline-block; /* Inline-Block-Elemente */
    text-decoration: none; /* Unterstreichung entfernen */
    color: #333; /* Textfarbe */
}

/* Icon-Größe (Desktop) */
.kontakt-icons img {
    width: 50px; /* Breite der Icons auf Desktops */
    height: 50px; /* Höhe der Icons auf Desktops */
    max-width: 100%; /* Verhindert, dass sie den Container verlassen */
}

/* Hover-Effekt für Icons */
.kontakt-icons a:hover img {
    filter: brightness(1.1); /* Leichtes Aufhellen bei Hover */
}

/* Anpassung für mobile Ansichten */
@media (max-width: 768px) {
    .kontakt-icons img {
        width: 30px; /* Reduzierte Breite der Icons auf mobilen Geräten */
        height: 30px; /* Reduzierte Höhe der Icons auf mobilen Geräten */
    }
}

/* Google Maps Styling */
#kontakt iframe {
    width: 100%; /* Karte bleibt innerhalb des Kontaktbereichs */
    height: 450px; /* Standardhöhe der Karte */
    border: 0; /* Kein Rahmen */
    margin-top: 20px; /* Abstand nach oben */
}

/* Anpassung für mobile Ansichten */
@media (max-width: 768px) {
    #kontakt iframe {
        height: 250px; /* Höhe der Karte für mobile Geräte */
    }
}

/* Footer */
footer {
    text-align: center; /* Zentrierter Text */
    padding: 20px 0; /* Vertikales Padding */
    background-color: #d87b56; /* Hintergrundfarbe des Footers */
    color: white; /* Textfarbe im Footer */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .menu-icon {
        display: block; /* Hamburger-Menü auf kleinen Bildschirmen anzeigen */
    }

    #menu-links {
        display: none; /* Menü standardmäßig ausblenden */
        flex-direction: column; /* Spaltenanordnung */
        position: absolute; /* Absolute Positionierung */
        top: 60px; /* Abstand nach oben */
        left: 0; /* Linker Abstand */
        background-color: #f9f9f9; /* Hintergrundfarbe */
        width: 100%; /* Volle Breite */
    }

    #menu-links.active {
        display: flex; /* Menü anzeigen, wenn aktiv */
    }

    .ueber-mich-container {
        flex-direction: column; /* Spaltenanordnung auf mobilen Geräten */
        text-align: center; /* Text zentrieren */
    }

    .ueber-mich-bild {
        width: 100%; /* Bildbreite auf 100% setzen */
        max-width: 300px; /* Maximale Breite des Bildes */
    }

    .leistungen-list {
        grid-template-columns: 1fr; /* Eine Spalte für mobile Ansicht */
    }

    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Dynamische Spalten für die Galerie */
    }
}