body {
    font-family: 'Quicksand', sans-serif;
    background-color: #efebdc;
    color: #5e4b3c;
    margin: 10;
    padding: 0;
    box-sizing: border-box;
}

.main-content {
    max-width: 1100px; /* Begrenzte Breite für bessere Lesbarkeit */
    margin: 0 auto; /* Zentriert den Inhalt auf größeren Bildschirmen */
    padding: 10px 20px; /* Fügt einen Abstand von etwa 1 cm zu den Rändern hinzu */
}

/* Abstand links und rechts für alle Bildschirme */
.container {
    margin-left: 20px; /* Abstand von ca. 1 cm links */
    margin-right: 20px; /* Abstand von ca. 1 cm rechts */
}

/* Responsive Anpassungen für kleinere Bildschirme */
@media (max-width: 768px) {
    .main-content {
        padding: 10px 15px; /* Etwas kleinerer Abstand für mobile Geräte */
    }

    .container {
        margin-left: 10px; /* Weniger Abstand für Mobilgeräte */
        margin-right: 10px;
    }
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: url('lebensbaum.jpg') center top/cover no-repeat;
    color: #5e4b3c;
    height: auto; /* Höhe passt sich dynamisch an den Inhalt an */
    position: relative;
    flex-wrap: wrap; /* Ermöglicht Umbruch bei kleineren Geräten */
}

header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6); /* Transparenz-Effekt */
    z-index: -1; /* Stellt sicher, dass der Hintergrund hinter dem Inhalt bleibt */
}

header .brand {
    position: relative;
    font-weight: bold;
    font-size: 1.6em;
    flex: 1; /* Text nimmt den verfügbaren Platz flexibel ein */
    text-align: center; /* Text zentrieren */
}

/* Responsive Anpassungen für kleine Displays */
@media (max-width: 768px) {
    header {
        flex-direction: column; /* Elemente untereinander anordnen */
        align-items: center; /* Elemente zentrieren */
        padding: 10px; /* Weniger Innenabstand für kleinere Bildschirme */
    }

    header .brand {
        font-size: 1.4em; /* Kleinere Schriftgröße für Mobilgeräte */
        margin-bottom: 10px; /* Abstand zum nächsten Element */
        text-align: center; /* Zentriert auf mobilen Geräten */
    }

    header img {
        max-width: 90%; /* Bild wird auf mobilen Geräten kleiner */
        height: auto; /* Höhe des Bildes proportional zur Breite */
        margin-bottom: 10px; /* Abstand zwischen dem Bild und den anderen Elementen */
    }
}

/* Standard Sticky Navigation für Desktop */
nav {
    position: sticky;
    top: 0;
    background: #cba052; /* Hintergrundfarbe der Navigationsleiste */
    padding: 10px;
    z-index: 1000; /* Stellt sicher, dass die Navigation über anderen Inhalten liegt */
}

/* Anpassung der Navigation (Links) */
nav ul {
    list-style: none; /* Entfernt die Standard-Listenelement-Markierungen */
    display: flex;
    justify-content: center; /* Zentriert die Links */
    gap: 15px; /* Abstand zwischen den Links */
}

nav ul li {
    margin: 0; /* Kein zusätzlicher Abstand um die Listenelemente */
}

nav ul li a, footer nav a {
    display: inline-block;
    padding: 10px 15px; /* Innenabstand, um die Links wie Buttons wirken zu lassen */
    font-size: 16px; /* Gut lesbare Schriftgröße */
    color: #5e4b3c; /* Textfarbe in dunklem Mahagoni */
    border: 2px solid #5e4b3c; /* dunkles Mahagoni Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    text-decoration: none; /* Keine Unterstreichung */
    background: #efebdc; /* goldener Hintergrund für die Buttons */
    font-weight: bold; /* Fettgedruckter Text */
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; /* Weiche Übergänge bei Hover */
}

nav ul li a:hover, footer nav a:hover {
    background-color: #cba052; /* Goldene Farbe beim Hover */
    color: white; /* Weiße Schrift beim Hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Leichter Schatten für 3D-Effekt */
}

/* Responsive Einstellungen für mobile Geräte */
@media (max-width: 768px) {
   /* Sticky-Eigenschaft nur für die Haupt-Navigation */
    nav {
        position: sticky; /* Sticky-Verhalten für die Navigation */
        top: 0; /* Haftet am oberen Rand */
        width: 100%; /* Passt die Navigation an die gesamte Breite des Bildschirms an */
        padding: 10px;
        z-index: 1000; /* Sicherstellt, dass die Navigation sichtbar bleibt */
        background: #cba052; /* Hintergrundfarbe bleibt gleich */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Optional: Schatten für mobile Navigation */
    }

    /* Navigation-Links */
    nav ul {
        display: flex;
        flex-direction: column; /* Links untereinander anordnen */
        align-items: center; /* Links zentriert ausrichten */
        gap: 10px; /* Geringerer Abstand zwischen Links auf kleineren Geräten */
        margin: 0; /* Entferne unerwünschte Abstände */
        padding: 0;
    }

    nav ul li a, footer nav a {
        font-size: 14px; /* Kleinere Schriftgröße für mobile Geräte */
        padding: 8px 12px; /* Kleinere Innenabstände */
        width: 100%; /* Links füllen die gesamte Breite */
        text-align: center; /* Text zentrieren */
    }
    nav {
        max-height: 100px; /* Höhe begrenzen, damit die Navigation nicht zu groß wird */
        overflow-y: auto; /* Scrollbar bei Bedarf aktivieren */
    }
}

section {
    scroll-margin-top: 80px; /* Passt die Höhe an die Höhe der Navigation an */
}

@media (max-width: 768px) {
    section {
        scroll-margin-top: 100px; /* Für mobile Geräte einen größeren Abstand */
    }
}


footer {
    text-align: center;
    background: #5e4b3c;
    color: white;
    padding: 10px;
}

.about-content {
    display: flex;
    align-items: flex-start; /* Text und Bild oben ausrichten */
    gap: 20px; /* Abstand zwischen Text und Bild */
}

.about-content {
    display: flex;
    flex-wrap: wrap; /* Erlaubt Umbruch bei kleineren Bildschirmen */
    gap: 20px; /* Abstand zwischen Text und Bild */
    align-items: flex-start; /* Text und Bild oben ausrichten */
}

.about-text {
    flex: 3; /* Text nimmt 3 Teile des verfügbaren Platzes ein */
}

.portrait-placeholder {
    flex: 1; /* Bild nimmt 1 Teil des verfügbaren Platzes ein */
    text-align: center;
}

.portrait-placeholder img {
    width: 315px; /* 11,5 cm */
    height: 405px; /* 12,5 cm */
    border-radius: 8px; /* Leicht abgerundete Ecken */
    border: 3px solid #cba052; /* Goldener Rahmen */
    max-width: 100%; /* Bild passt sich flexibel der Bildschirmgröße an */
    height: auto; /* Höhe wird proportional angepasst */
}

/* Responsive Anpassungen für kleine Bildschirme */
@media (max-width: 768px) {
    .about-content {
        flex-direction: column; /* Text und Bild untereinander anordnen */
        align-items: center; /* Zentriert auf kleineren Geräten */
    }

    .about-text {
        flex: none; /* Entfernt Flex-Wert für volle Breite */
        width: 100%; /* Text nimmt die volle Breite ein */
        text-align: center; /* Zentrierter Text */
    }

    .portrait-placeholder {
        flex: none; /* Entfernt Flex-Wert */
        width: 100%; /* Bild passt sich der Breite an */
        text-align: center; /* Zentrierung */
    }

    .portrait-placeholder img {
        max-width: 80%; /* Bild wird kleiner auf mobilen Geräten */
    }
}
.styled-link {
    color: #5e4b3c; /* Dunkles Mahagoni */
    text-decoration: underline; /* Unterstrichen */
    font-weight: bold; /* Optional: Links etwas hervorheben */
}

.styled-link:hover {
    text-decoration: none; /* Entfernt die Unterstreichung beim Hover-Effekt */
    color: #cba052; /* Optional: Goldfarbe beim Hover-Effekt */
}

.cta-button {
    display: inline-block;
    margin-top: 5px;
    padding: 8px 16px;
    font-size: 15px; /* Etwas größer als der Fließtext */
    color: #5e4b3c; /* Dunkles Mahagoni */
    border: 2px solid #cba052; /* Goldener Rahmen */
    border-radius: 5px; /* Leicht abgerundete Ecken */
    text-decoration: none; /* Entfernt die Unterstreichung */
    font-weight: bold;
    text-align: center;
    background-color: transparent; /* Kein Hintergrund, nur Rahmen */
    transition: background-color 0.3s, color 0.3s; /* Sanfter Hover-Effekt */
}

.cta-button:hover {
    background-color: #cba052; /* Goldener Hintergrund beim Hover */
    color: white; /* Weiße Schrift beim Hover */
}

.golden-divider {
    border: none; /* Entfernt Standardrahmen */
    border-top: 4px solid #cba052; /* Goldener dicker Strich */
    margin: 30px 0; /* Abstand vor und nach dem Strich */
    width: 100%; /* Strich füllt den Bereich */
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

th, td {
    text-align: left;
    padding: 10px;
    border: 1px solid #cba052; /* Goldener Rand */
}

thead th {
    background-color: #efebdc; /* Cremeweißer Hintergrund */
    color: #5e4b3c; /* Dunkles Mahagoni */
    font-weight: bold;
}

tbody tr:nth-child(even) {
    background-color: #f9f6ef; /* Heller Creme-Ton für abwechselnde Reihen */
}

.cta-button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 16px;
    color: #5e4b3c;
    border: 2px solid #cba052; /* Goldener Rahmen */
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    background-color: transparent;
    transition: background-color 0.3s, color 0.3s;
}

.cta-button:hover {
    background-color: #cba052; /* Goldener Hintergrund */
    color: white; /* Weiße Schrift */
}

.styled-link {
    color: #5e4b3c;
    text-decoration: underline;
    font-weight: bold;
}

.styled-link:hover {
    text-decoration: none;
    color: #cba052;
}

hr.golden-divider {
    border: none;
    border-top: 4px solid #cba052;
    margin: 30px 0;
    width: 100%;
}


.image-gallery {
    display: flex;
    flex-wrap: wrap; /* Bilder werden umgebrochen, falls der Platz nicht reicht */
    gap: 10px; /* Abstand zwischen den Bildern */
    justify-content: center; /* Zentriert die Bilder in der Galerie */
}

.image-gallery img {
    height: 4cm; /* Höhe der Bilder */
    border: 3px solid #cba052; /* Goldener Rahmen */
    border-radius: 5px; /* Leicht abgerundete Ecken */
    transition: transform 0.3s, box-shadow 0.3s; /* Sanfter Hover-Effekt */
}

.image-gallery img:hover {
    pointer-events: auto; /* Aktiviert nur für Hover */
    transform: scale(2); /* Verdoppelt die Größe beim Hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schatten für einen 3D-Effekt */
}

.image-gallery img {
    pointer-events: auto; /* Beibehaltung von Hover */
    -webkit-user-drag: none; /* Verhindert Ziehen */
    user-select: none; /* Verhindert Markieren */
}

header .logo img {
    height: 150%; /* Stellt sicher, dass die Höhe dem Header entspricht */
    max-height: 120px; /* Passt die maximale Höhe an den Text im Header an */
    border: 2px solid #cba052; /* Goldener Rahmen */
    border-radius: 5px; /* Leicht abgerundete Ecken */
    padding: 5px; /* Polsterung innen, damit der Rahmen nicht direkt am Logo klebt */
    margin-right: 20px; /* Abstand zum angrenzenden Inhalt */
    object-fit: contain; /* Stellt sicher, dass das Logo nicht verzerrt wird */
}

.hidden {
    display: none; /* Versteckt die Inhalte standardmäßig */
}

.visible {
    display: block; /* Zeigt die Inhalte an */
    padding: 20px;
    background-color: #efebdc; /* Cremeweißer Hintergrund */
    color: #5e4b3c; /* Dunkles Mahagoni */
    border: 2px solid #cba052; /* Goldener Rahmen */
    border-radius: 5px;
    margin-top: 20px;
    max-width: 800px; /* Begrenzte Breite für bessere Lesbarkeit */
}

.styled-link {
    display: inline-block;
    padding: 5px 10px;
    font-size: 14px;
    color: #5e4b3c;
    border: 1px solid #cba052;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.styled-link:hover {
    background-color: #cba052;
    color: white;
}

.hidden {
    display: none; /* Standardmäßig ausgeblendet */
}

.visible {
    display: block; /* Sichtbar machen */
    padding: 20px;
    background-color: #efebdc; /* Cremeweißer Hintergrund */
    color: #5e4b3c; /* Dunkles Mahagoni */
    border: 2px solid #cba052; /* Goldener Rahmen */
    border-radius: 5px;
    margin-top: 20px;
    max-width: 800px;
}

.main-content { 
    margin-top: 120px; /* Sorgt dafür, dass der Text nicht hinter der Navigation verschwindet */
}

.contact-info {
    display: flex;
    flex-wrap: wrap; /* Ermöglicht Umbruch bei kleinen Bildschirmen */
    gap: 20px; /* Abstand zwischen den Kontaktdaten und dem QR-Code */
    align-items: center; /* Zentriert die Inhalte vertikal */
}

.contact-details {
    flex: 2; /* Kontaktdaten nehmen mehr Platz ein */
}

.qr-code {
    flex: 1; /* QR-Code nimmt weniger Platz ein */
    text-align: center;
}

.qr-code img {
    max-width: 150px; /* QR-Code bleibt klein */
    height: auto; /* Höhe proportional zur Breite */
    border: 2px solid #cba052; /* Goldener Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .contact-info {
        flex-direction: column; /* Inhalte untereinander anordnen */
        align-items: center; /* Zentriert auf kleinen Geräten */
    }

    .qr-code img {
        max-width: 100px; /* QR-Code wird kleiner auf mobilen Geräten */
    }
}
img {
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}
body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
html {
    scroll-behavior: smooth;
}
div {
    scroll-margin-top: 120px; /* Fügt einen Abstand ein, sodass der Abschnitt nicht verdeckt wird */
}
.hidden {
    display: none;
}

.visible {
    display: block;
}

@media (max-width: 768px) {
    .service-item {
        margin-bottom: 15px; /* Weniger Abstand für kleinere Geräte */
    }

    .service-item h3 {
        font-size: 18px; /* Kleinere Schrift für mobile Header */
    }

    .service-item p {
        font-size: 14px; /* Angenehme Lesbarkeit für mobile Texte */
    }

    .service-item .expandable-content {
        max-height: 0; /* Sicherstellen, dass der Text standardmäßig ausgeblendet bleibt */
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
    }

    .service-item:hover .expandable-content {
        max-height: 250px; /* Geringere Höhe für kompakte mobile Darstellung */
    }
}