.container {
    max-width: 800px; /* Maximale Breite des Inhalts, z.B. 800px */
    margin: 0 auto;   /* Zentriert den Container horizontal */
    padding: 0 20px;  /* Fügt 20px Abstand links und rechts hinzu */
    text-align: center; /* Zentriert den Text im Container */
}

body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f4f4f4;
    flex-direction: column;
    max-width: 600px; /* Begrenze die maximale Breite */
    margin-left: auto;
    margin-right: auto;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif


}

.image-container {
    display: flex;
    justify-content: center; /* Zentriert das Bild horizontal */
    /*margin: 10px 0; /* Abstand oben und unten */
    margin-bottom: 0em;
}

.image-container img {
    max-width: 40%;  /* Bild passt sich der Containerbreite an */
    height: auto;     /* Bildhöhe bleibt proportional */
    /*border-radius: 5px; /* Optionale Abrundung der Ecken */
}

.title {
    font-size: 36px;
    font-weight: bold;
    /*margin-bottom: 20px; /* Abstand zwischen dem statischen Titel und dem animierten Text */
    margin-top: -25px;
    text-align: center; /* Zentriert den Titel */
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

    
}

.coming-soon {
    font-size: 60px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    letter-spacing: 7px;
    opacity: 80%;
    animation: fadeIn 3s forwards, typewriter 3s steps(13) forwards, removeCursor 0s 3.1s forwards; /* Hinzufügen der neuen Animation */
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid black;
    color: rgb(107, 111, 111);
    width: 0;
    max-width: 600px; /* Feste Breite für die Animation */
    text-align: center; /* Zentriert den animierten Text */

}



@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 600px; } /* Breite, die genug Platz für den Text bietet */
}

@keyframes removeCursor {
    0% { border-right: 2px solid black; } /* Behält den Cursor */
    100% { border-right: none; }          /* Entfernt den Cursor */
}

nav {
    position: absolute;
    top: 20px;
    width: 100%;
    text-align: center;
    letter-spacing: 2px;
}


nav a {
    margin: 0 45px;
    text-decoration: none;
    color: rgb(82, 79, 79);

    font-size: 16px;
}

nav hr {
    margin-top: 20px;
    border: none;
    border-top: 2px solid #ccc;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    nav {
        width: 80%;
        padding: 5px;
        /* Du kannst weitere Anpassungen vornehmen, z.B. Schriftgröße, Layout, etc. */
    }
}


li {
    color: grey;
    font-family: 'Arial';
    margin-left: 20%;
    margin-right:30%;
   
}

a {
    color: black;
}

div {
    display: block;
    color:black;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
}

h3 {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

.centered-div {
    background-color: #e0e0e0; /* Hintergrundfarbe für das div */
    padding: 20px;             /* Innenabstand */
    text-align: center;        /* Text zentrieren */
    margin-top: 20px;          /* Abstand nach oben */
    border-radius: 10px;       /* Ecken abrunden */
    margin-left: 10%;
    margin-right: 10%;
}


footer {
    /*background-color: #f8f8f8; /* Beispiel Hintergrundfarbe */
    text-align: center;
    padding: 10px 0;
    position: relative; /* Standardmäßig relativ */
    bottom: 0; /* Positioniert sich an den unteren Rand */
    width: 100%; /* Nimmt die komplette Breite ein */
    flex-shrink: 0; /* Verhindert, dass der Footer schrumpft */
    /*box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Optional: Schatteneffekt */
}

/* Link-Styling im Footer */
footer a {
    text-decoration: none;
   /* color: #333;*/
    font-size: 14px;
}


/*
img {
    position: relative;
    bottom: 10px;
    left: 0px;
    margin-left: 5%;
    max-width:20%;
    height:"auto"

}*/
/*

button {

    color: black;
    font-family: Open Sans, sans-serif;
}*/



/* Slideshow 

/* Slideshow Styling */
/* Slideshow Styling */
.slideshow {
    position: relative;
    width: 80%; /* Passe Breite an */
    max-width: 600px;
    height: 300px; /* Passe Höhe an */
    margin: 20px auto;
    overflow: hidden;
    border: 2px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Bild wird skaliert */
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}


/* Slideshow (Carousel) Styling */
/* Carousel Wrapper Styling */
.carousel {
    position: relative;
    width: 120%; /* Passe die Breite an */
    max-width: 800px;
    height: 200px;
    margin: 20px auto; /* Zentriere den Carousel-Wrapper */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Innerer Container für die Bilder */
.carousel-inner {
    display: flex;
    justify-content: center; /* Bilder zentrieren */
    align-items: center;
    width: 500%; /* Multipliziere mit der Anzahl der Bilder */
    height: 100%;
    transition: transform 1s ease-in-out;
}

/* Bilder Styling */
.carousel-image {
    width: 40%; /* Jedes Bild nimmt 20% der Carousel-Breite ein */
    flex-shrink: 0; /* Verhindere, dass Bilder schrumpfen */
    object-fit: cover; /* Skaliere das Bild proportional */
    opacity: 0.9; /* Vorschau-Bilder halbtransparent */
    transform: scale(0.8); /* Vorschau-Bilder kleiner */
    transition: transform 1s ease, opacity 1s ease;
}

.carousel-image.active {
    opacity: 1; /* Aktives Bild vollständig sichtbar */
    transform: scale(1); /* Aktives Bild größer */
}

/* Zusätzliche Vorschau-Abstände */
.carousel-image:not(.active) {
    margin: 0 -10px; /* Überlappung zwischen Vorschauen */
}

/* Container für alle Bilder */
.image-gallery {
    display: flex;
    flex-direction: column; /* Bilder untereinander anzeigen */
    align-items: center; /* Bilder zentrieren */
    overflow-y: scroll; /* Ermöglicht das Scrollen bei vielen Bildern */
    height: 80vh; /* Die Höhe des Containers, in dem gescrollt wird, auf 80% der Ansichtshöhe setzen */
    padding: 5px;
}

/* Styling für die Bilder */
.image-gallery img {
    width: 90%; /* Oder eine feste Breite wie 600px, um die Bilder zu skalieren */
    margin: 10px 0; /* Abstände zwischen den Bildern */
    object-fit: cover; /* Sicherstellen, dass das Bild den verfügbaren Platz ausfüllt, ohne verzerrt zu werden */
}


/* Media Query für kleine Bildschirme (z.B. Smartphones) */
@media (max-width: 768px) {
    /* Auf kleinen Bildschirmen werden die Bilder untereinander angezeigt */
    .carousel-inner {
        flex-direction: column; /* Bilder vertikal anordnen */
        width: 100%; /* Breite auf 100% für kleine Bildschirme */
    }

    /* Jedes Bild soll den gesamten Container einnehmen */
    .carousel-image {
        width: 100%; /* 100% der Containerbreite */
        transform: scale(1); /* Keine Verkleinerung mehr für kleinere Bildschirme */
        opacity: 1; /* Die Bilder sind nicht mehr transparent */
    }
}