/* General Styles */
body {
    background-color: rgb(254, 231, 217); /* Hintergrundfarbe */
    font-family: Calibri, sans-serif; /* Schriftart für die Seite */
    margin: 0; /* Kein Außenabstand */
    padding: 0; /* Kein Innenabstand */
    display: flex; /* Flexbox verwenden */
    flex-direction: column; /* Vertikale Anordnung */
    align-items: center; /* Zentrieren der Elemente */
}

/* Social Media */
.social-media {
    position: absolute; /* Position der Social Media oben und rechts */
    top: 20px; /* Abstand vom oberen Rand */
    right: calc(50% - 420px); /* Zentriert und dann 200px nach rechts verschieben */
    display: flex; /* Flexbox für Icons */
    justify-content: center; /* Icons nach rechts ausrichten */
    width: auto; /* Breite nicht auf 100% setzen */
}

.social-icon {
    height: 30px; /* Höhe der Icons */
    margin: 0 5px; /* Abstand zwischen den Icons */
}

.com-icon {
    height: 12px; /* Höhe der Icons */
    margin: 0 5px; /* Abstand zwischen den Icons */
}

/* Content Area */
.content-area {
    background-color: white; /* Weißer Hintergrund für den Inhalt */
    max-width: 800px; /* Maximale Breite für Desktops */
    margin-top: 60px; /* Abstand zum oberen Rand */
    padding: 30px; /* Innenabstand innerhalb des Containers */
    border-radius: 15px; /* Abgerundete Ecken */
}

/* Logo */
.logo {
    display: block; /* Block-Element */
    margin: 0 auto 60px; /* Zentriert mit unterem Abstand */
    width: 300px; /* Breite des Logos */
}

/* Title */
h1 {
    font-family: 'Alex Brush', cursive; /* Schriftart für den Titel */
    color: rgb(80, 110, 112); /* Titel-Farbe */
    font-size: 24px; /* Schriftgröße für den Titel */
    text-align: left; /* Links ausgerichtet */
    margin-bottom: 30px; /* Abstand unter dem Titel */
}

/* Columns */
.columns {
    display: flex; /* Flexbox für Spalten */
    gap: 20px; /* Abstand zwischen den Spalten */
}
.column {
    flex: 1; /* Gleichmäßige Verteilung der Spalten */
}
.left {
    color: rgb(80, 110, 112); /* Textfarbe in der linken Spalte */
    font-size: 16px; /* Schriftgröße für den Text */
}

/* Gallery */
.gallery-img {
    width: 120px; /* Breite der Bilder */
    height: 120px; /* Höhe der Bilder */
    margin: 3px; /* Rand um die Bilder */
    border-radius: 8px; /* Abgerundete Ecken */
    cursor: pointer; /* Zeiger auf Bild */
}

/* Footer */
footer {
    background-color: rgb(254, 231, 217); /* Gleiche Hintergrundfarbe wie der Body */
    height: 50px; /* Höhe des Footers */
    text-align: center; /* Text zentriert */
    padding-top: 10px; /* Abstand oben im Footer */
    margin-bottom: 12px;
}

p.footer-title {
    padding-top: 12px;
}
.footer-title {
    font-weight: bold; /* Fettschrift für den Titel */
    margin-bottom: 1px; /* Abstand darunter */
}
.footer-text {
    line-height: 1.2; /* Kleinere Zeilenhöhe für kompakteren Text */
}
footer p {
    color: rgb(80, 110, 112);
    margin: 0;
}
footer a {
    color: rgb(80, 110, 112); /* Linkfarbe */
    text-decoration: underline; /* Unterstrichener Link */
}

/* Responsive Design */
@media (max-width: 768px) {
    .columns {
        flex-direction: column; /* Spalten untereinander anordnen */
    }
    .content-area {
        margin: 20px; /* Abstand von den Seitenrändern */
        margin-top: 50px; /* Vergrößerter oberer Abstand */
    }
    .gallery-img {
        width: 91px; /* Breite der Bilder in der mobilen Ansicht */
        height: 91px; /* Höhe der Bilder in der mobilen Ansicht */
    }
    .social-media {
        top: 10px; /* Erhöhte Position in der mobilen Ansicht */
        right: calc(50% - 180px); /* Anpassung für mobile Version */
    }
        footer {
        padding-top: 0; /* Entfernen Sie das Padding oben für die mobile Ansicht */
        height: 70px; /* Erhöhen Sie die Höhe des Footers, falls nötig */
    }
}



/* Lightbox Styles */
.lightbox {
    display: none; /* Lightbox standardmäßig ausgeblendet */
    align-items: center; /* Zentriert den Inhalt vertikal */
    justify-content: center; /* Zentriert den Inhalt horizontal */
    position: fixed; /* Fixiert auf dem Bildschirm */
    top: 0; /* Oben */
    left: 0; /* Links */
    width: 100vw; /* Volle Breite */
    height: 100vh; /* Volle Höhe */
    background-color: rgba(0, 0, 0, 0.8); /* Halbtransparenter Hintergrund */
    z-index: 1000; /* Stellt sicher, dass die Lightbox im Vordergrund bleibt */
}

.lightbox-image {
    max-width: 90%; /* Beschränkt die Bildbreite auf 90% des Bildschirms */
    max-height: 80%; /* Beschränkt die Bildhöhe auf 80% des Bildschirms */
    border-radius: 8px; /* Abgerundete Ecken für das Bild */
}

.lightbox-close {
    position: absolute; /* Positioniert relativ zur Lightbox */
    top: 20px; /* Abstand vom oberen Rand */
    right: 20px; /* Abstand vom rechten Rand */
    color: white; /* Farbe des Schließen-Buttons */
    font-size: 24px; /* Schriftgröße des Schließen-Buttons */
    cursor: pointer; /* Zeiger auf den Button */
}

.lightbox-prev, .lightbox-next {
    position: absolute; /* Positioniert relativ zur Lightbox */
    top: 50%; /* Zentriert vertikal */
    transform: translateY(-50%); /* Vertikal zentriert */
    color: white; /* Farbe der Buttons */
    font-size: 48px; /* Schriftgröße der Buttons */
    cursor: pointer; /* Zeiger auf die Buttons */
}

.lightbox-prev {
    left: 20px; /* Abstand vom linken Rand */
}

.lightbox-next {
    right: 20px; /* Abstand vom rechten Rand */
}