html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
    color: #fff; /* Weiße Schrift */
}

body {
    background-color: #121212;
}

nav {
    position: fixed;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    z-index: 1000;
    top: 0;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: #fff; /* Weiße Schrift für Navigation */
    text-decoration: none;
    padding: 15px 20px;
    display: block;
}

section {
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
}

/* Ersetze den aktuellen #hero-Stil durch diesen */
#hero {
    background-image: url('Bilder/hero.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll; /* Verhindert das Parallax-Scrolling auf mobilen Geräten */
}

#hero h1 {
    font-size: 4rem; /* Große Schriftgröße für den Titel */
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Leichter Schatten für bessere Lesbarkeit */
}

#hero p {
    font-size: 2rem; /* Große Schriftgröße für den Untertitel */
    margin-top: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Leichter Schatten für bessere Lesbarkeit */
}

#produkte {
    position: relative;
    z-index: 1;
    padding-top: 100px; /* Optional: zusätzlicher Abstand von oben */
    padding-bottom: 100px; /* Vergrößerter Abstand unter den Kacheln */
    background-image: url('Bilder/product_background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#produkte::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Abdunkelung des Hintergrundbilds */
    z-index: -1; /* Hinter den Inhalt der Sektion legen */
}

.produkt-item {
    background-color: rgba(0, 0, 0, 0.7); /* Dunkle Hintergrundfarbe, leicht transparent */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    color: #fff; /* Weiße Schriftfarbe */
    margin-bottom: 20px;
}

.produkt-item img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Schneidet das Bild zu, um den Container zu füllen */
    border-radius: 5px;
    margin-bottom: 10px;
}

.landscape {
    aspect-ratio: 16/9; /* Verhältnis 16:9 */
}

.portrait {
    aspect-ratio: 9/16; /* Verhältnis 9:16 */
}

.square {
    aspect-ratio: 1/1; /* Verhältnis 1:1, für quadratische Bilder */
}

.produkt-item .info {
    display: flex;
    justify-content: space-between; /* Preis links, Bestellnummer rechts */
    padding: 0 10px;
    font-size: 0.9rem;
}

.produkt-item .info p {
    margin: 5px 0; /* Abstand um die Texte */
    color: #fff;
}

#produkte h2 {
    font-size: 2.5rem; /* Schriftgröße wie Kontakt-Titel */
    margin-top: 10px; /* Reduzierter Abstand nach oben */
    margin-bottom: 10px; /* Reduzierter Abstand nach unten */
    text-align: center; /* Stelle sicher, dass der Titel zentriert bleibt */
}

.produkte-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}




#about {
    position: relative;
    background-image: url('Bilder/about.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff; /* Weiße Schriftfarbe */
    padding: 20px;
}

#about::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Abdunkelung des Hintergrundbilds */
    z-index: 1; /* Overlay über dem Hintergrundbild */
}

#about > * {
    position: relative;
    z-index: 2; /* Inhalte wie Text und Bilder über dem Overlay anzeigen */
}

#about-title {
    font-size: 2.5rem; /* Schriftgröße wie Kontakt-Titel */
    margin-bottom: 20px; /* Fügt einen Abstand von 20px unterhalb des Titels hinzu */
}

#about-content {
    max-width: 75%; /* Beschränkt die Breite des Textes auf 75% der Bildschirmbreite */
    margin: 0 auto; /* Zentriert den Textbereich innerhalb der Sektion */
    box-sizing: border-box; /* Stellt sicher, dass Padding im max-width enthalten ist */
    font-size: 1.1rem; /* Erhöht die Schriftgröße des Textes ein wenig */
    line-height: 1.6; /* Erhöht den Zeilenabstand für bessere Lesbarkeit */
    padding-top: 10px; /* Optional: zusätzlicher Innenabstand oben, falls benötigt */
}

#bestellung {
    position: relative;
    background-image: url('Bilder/bestellung_background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    padding: 50px 20px;
}

#bestellung::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Abdunkelung des Hintergrundbildes */
    z-index: 1; /* Overlay über dem Hintergrundbild */
}

#bestellung > * {
    position: relative;
    z-index: 2; /* Inhalt über dem Overlay anzeigen */
}

#bestellung-title {
    font-size: 2.5rem; /* Schriftgröße wie Kontakt-Titel */
    text-align: center; /* Zentriert den Titel */
    margin-bottom: 30px; /* Fügt einen Abstand zwischen dem Titel und den Kacheln hinzu */
}

.bestellung-container {
    display: flex;
    justify-content: center; /* Zentriert die Kacheln innerhalb des Containers */
    gap: 30px; /* Fügt einen Abstand von 20px zwischen den Kacheln hinzu */
    max-width: 75%; /* Kann angepasst werden */
    margin: 0 auto;
}

.ausgegraut {
    filter: grayscale(100%);
}

.kachel {
    position: relative;
    width: 45%; /* Breite der Kachel */
    background-color: rgba(0, 0, 0, 0.7); /* Hintergrundfarbe */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    color: #fff;
    overflow: hidden; /* Verhindert, dass der unsichtbare Text die Kachelgröße beeinflusst */
    transition: transform 0.6s ease, box-shadow 0.6s ease; /* Längere Transition für sanftere Effekte */
    height: auto; /* Höhe wird automatisch bestimmt */
    min-height: 150px; /* Mindesthöhe für die Kachel, anpassbar */
}

.kachel img {
    max-width: 100%;
    border-radius: 5px;
    margin-bottom: 15px;
}

.kachel:hover .beschreibung {
    opacity: 1;
    max-height: 500px; /* Höhe anpassen, je nach Textinhalt */
    padding: 10px; /* Padding, wenn sichtbar */
}

.beschreibung {
    opacity: 0;
    max-height: 0; /* Anfangs keine Höhe, um Platz zu sparen */
    overflow: hidden; /* Inhalt ist versteckt, wenn nicht sichtbar */
    transition: max-height 0.8s ease, opacity 0.8s ease, padding 0.6s ease; /* Längere Transition für weichere Animationen */
    background-color: rgba(0, 0, 0, 0.8); /* Hintergrundfarbe für die Beschreibung */
    padding: 0; /* Kein Padding, wenn nicht sichtbar */
    border-radius: 5px;
}

.bestellung-etsy .in-bearbeitung {
    color: #ffcc00; /* Farbiger Text für den Hinweis "In Bearbeitung" */
    font-style: italic;
}

.kachel:hover {
    transform: scale(1.05); /* Leichtes Vergrößern der Kachel beim Hover */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3); /* Sanfte Schatten für eine tiefer wirkende Kachel */
}

#kontakt {
    position: relative;
    background-image: url('Bilder/kontakt.jpg'); /* Stelle sicher, dass der Dateipfad korrekt ist */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
    padding: 50px 20px;
}

#kontakt::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Optional: Abdunkelung des Hintergrundbilds */
    z-index: 1; /* Overlay über dem Hintergrundbild */
}

#kontakt > * {
    position: relative;
    z-index: 2; /* Inhalte wie Text und Bilder über dem Overlay anzeigen */
}

#kontakt-title {
    font-size: 2.5rem; /* Schriftgröße für alle Titel anpassen */
    margin-bottom: 10px;
}

#kontakt-subtitle {
    font-size: 1.2rem; /* Passe die Schriftgröße des Untertitels an */
    margin-bottom: 20px;
}






.kontakt-image-container {
    width: 46%; /* Setzt die Breite des Bildes auf 66% des Containers */
    margin: 0 auto; /* Zentriert das Bild */
}

.kontakt-image-container img {
    width: 100%; /* Bild passt sich der Containerbreite an */
    height: auto; /* Erhält das Seitenverhältnis des Bildes */
    border-radius: 10px; /* Optional: Abgerundete Ecken für das Bild */
}

h1, h2 {
    font-family: 'Georgia', serif;
    margin: 0;
    color: #fff; /* Weiße Schrift für Überschriften */
    font-size: 2.5rem; /* Schriftgröße für alle Titel anpassen */
}

p {
    margin: 20px 0 0;
    color: #fff; /* Weiße Schrift für normalen Text */
}

footer {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

/* Media Query für Tablets und kleinere Bildschirme */
@media (max-width: 768px) {
    #hero {
        background-position: center top -10%; /* Schiebt das Bild nach oben für mobile Geräte */
        background-size: cover;
    }

    #hero h1 {
        font-size: 3rem; /* Kleinere Schriftgröße für den Titel auf Tablets */
    }

    #hero p {
        font-size: 1.5rem; /* Kleinere Schriftgröße für den Untertitel auf Tablets */
    }

    /* Navigation auf Tablets ausblenden */
    nav {
        display: none;
    }

    /* Bestellung Kacheln untereinander anzeigen */
    .bestellung-container {
        flex-direction: column; /* Stellt die Kacheln vertikal untereinander */
        align-items: center; /* Zentriert die Kacheln */
    }

    .kachel {
        width: 80%; /* Kacheln nehmen 80% der Containerbreite ein */
        margin-bottom: 20px; /* Abstand zwischen den Kacheln */
    }
}

/* Media Query für Smartphones */
@media (max-width: 480px) {
    #hero {
        background-position: center top -10%; /* Schiebt das Bild nach oben für Smartphones */
        background-size: cover;
    }

    #hero h1 {
        font-size: 2.5rem; /* Kleinere Schriftgröße für den Titel auf Smartphones */
    }

    #hero p {
        font-size: 1.2rem; /* Kleinere Schriftgröße für den Untertitel auf Smartphones */
    }

    /* Navigation auf Smartphones ausblenden */
    nav {
        display: none;
    }

    /* Bestellung Kacheln untereinander anzeigen */
    .bestellung-container {
        flex-direction: column; /* Stellt die Kacheln vertikal untereinander */
        align-items: center; /* Zentriert die Kacheln */
    }

    .kachel {
        width: 90%; /* Kacheln nehmen 90% der Containerbreite ein */
        margin-bottom: 20px; /* Abstand zwischen den Kacheln */
    }

    .produkte-grid {
        grid-template-columns: 1fr; /* Produkte einspaltig anzeigen */
    }

    .kontakt-image-container {
        width: 90%; /* Setzt die Breite des Bildes auf 90% des Containers auf mobilen Geräten */
    }
}