/* Grundlegendes Styling */
body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
}

/* Container Styling */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff; /* Hintergrundfarbe des Containers */
    border-radius: 8px; /* Runde Ecken für den Container */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Leichter Schatten für Tiefe */
}

/* Logo Styling */
.logo {
    display: block; /* Blockelement für linksbündige Ausrichtung */
    margin: 20px 0; /* Automatischer Abstand nach oben und unten */
    max-width: 200px; /* Maximalbreite des Logos anpassen */
    height: auto; /* Automatische Höhe, um das Seitenverhältnis beizubehalten */
}

/* Kategorietitel Styling */
.kategorie-ueberschrift {
    font-family: 'Dancing Script', cursive; /* Geschwungene Handschrift */
    font-size: 2em; /* Vergrößerte Schriftgröße für Kategorietitel */
    margin: 40px 0 0 0; /* Abstand nach oben und unten (vergrößert) */
    text-align: left; /* Kategorietitel linksbündig */
    border-bottom: 2px solid #ccc; /* Unterstrich unter dem Kategorietitel */
    padding-bottom: 10px; /* Abstand zwischen Titel und Artikeln */
    font-weight: bold; /* Fettdruck */
    color: #4A90E2; /* Graublau Farbe */
}

/* Artikel Item Styling */
.artikel-item {
    display: flex; /* Flexbox für Ausrichtung */
    justify-content: space-between; /* Platz zwischen Artikeln */
    align-items: flex-start; /* Artikelname und Preis oben ausrichten */
    margin-bottom: 10px; /* Abstand zwischen den Artikeln */
    padding: 5px 0; /* Vertikaler Abstand innerhalb des Artikels */
    border-bottom: 1px solid #ddd; /* Linie unter jedem Artikel */
}

/* Artikel Details Styling */
.artikel-details {
    flex-grow: 1; /* Flexibles Wachstum, um den Platz zu füllen */
}

/* Artikelname Styling */
.artikel-name {
    font-weight: bold; /* Fettdruck für den Artikelnamen */
}

/* Allergene Styling */
.allergene {
    font-size: 0.8em; /* Kleinere Schriftgröße */
    color: #666; /* Dezentere Farbe */
    margin-top: 5px; /* Abstand zwischen Artikelname und Allergene */
    display: block; /* Blockelement für eine neue Zeile */
}

/* Preis Styling */
.artikel-preis {
    font-size: 1em; /* Standard Schriftgröße für den Preis */
    color: #333; /* Dunklere Farbe für den Preis */
}
/* Footer Styling */
.footer {
    text-align: center; /* Zentriert den Text im Footer */
    font-size: 0.8em; /* Kleinere Schriftgröße */
    color: #777; /* Graue Farbe */
    margin-top: 20px; /* Abstand nach oben */
    padding: 10px 0; /* Vertikales Padding */
    border-top: 1px solid #ddd; /* Optional: Trennlinie oben im Footer */
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 15px; /* Weniger Padding auf kleineren Bildschirmen */
    }

    .kategorie-ueberschrift {
        font-size: 2em; /* Kleinere Schriftgröße für Kategorietitel */
    }

    .artikel-item {
        flex-direction: row; /* Artikel in einer Reihe anordnen */
        align-items: center; /* Artikelname und Preis zentrieren */
    }

    .artikel-preis {
        margin-top: 0; /* Kein Abstand mehr auf mobilen Geräten */
    }
}

@media (max-width: 480px) {
    .container {
        padding: 10px; /* Minimales Padding für sehr kleine Bildschirme */
    }

    .kategorie-ueberschrift {
        font-size: 2em; /* Weitere Anpassung für Kategorietitel */
    }

    .artikel-name {
        font-size: 1em; /* Kleinere Schriftgröße für den Artikelnamen */
    }

    .artikel-preis {
        font-size: 0.9em; /* Kleinere Schriftgröße für den Preis */
    }

    .allergene {
        font-size: 0.6em; /* Noch kleinere Schriftgröße für Allergene */
    }

    /* Vollbildansicht auf mobilen Geräten */
    .artikel-item {
        flex-direction: row; /* Artikel in einer Reihe anordnen */
        justify-content: space-between; /* Platz zwischen Artikeln */
        align-items: center; /* Artikelname und Preis zentrieren */
        width: 100%; /* Volle Breite auf Mobilgeräten */
    }
}