/* Globale Variablen für einfache Farbanpassung */
    :root {
        /* Farben, die zum Favicon passen: Rot-Weiß-Kariert (Burgundy Red) */
        --primary-color: #A32B32;
        /* Tiefes Weinrot/Burgundy */
        --secondary-color: #333333;
        /* Dunkles Grau für Text */
        --background-color: #f7f7f7;
        /* Helles Off-White/Hintergrund */
        --text-on-primary: #ffffff;
        --card-background: #ffffff;
        --accent-color: #f1c40f;
        /* Ein kleiner Akzent (z.B. Senfgelb) für Lebendigkeit */
    }

    /* Grundlegende Zurücksetzung und Schriftart */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* Verhindert horizontales Scrollen */
    html,
    body {
        overflow-x: hidden;
        width: 100%;
    }



    body {
        /* font-family: 'Georgia', 'Times New Roman', Times, serif; */

        font-family: 'Amatic SC', 'Times New Roman', Times, serif;
        /* Klassische, wärmere Schrift */
        font-size: 28px;
        line-height: 1.6;
        background-color: var(--background-color);
        color: var(--secondary-color);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    /* Header-Bereich (Hero) */
    .hero {
        /* Verwendung des Hauptthemas Rot */
        background-color: var(--primary-color);
        color: var(--text-on-primary);
        padding: 30px 7px;
        text-align: center;
        /* Stärkerer, wärmerer Schatten */
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    }

    .hero h1 {
        margin-bottom: 10px;
        font-size: 3.2em;
        /* Etwas größer */
        font-weight: 700;
    }

    .hero p {
        font-size: 1.3em;
        /* Etwas größer */
        opacity: 0.95;
        font-style: normal;
        /* Etwas verspielter */
    }

    /* Hauptinhalts-Bereich */
    .content-section {
        max-width: 800px;
        margin: 40px auto;
        padding: 0 20px;
        flex-grow: 1;
    }

    /* Allgemeine Abschnitte */
    .about-me,
    .details {
        background-color: var(--card-background);
        padding: 30px;
        margin-bottom: 30px;
        border-radius: 12px;
        /* Weichere Kanten */
        /* Dezenter, eleganter Schatten */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }


    .contact,
    .details {
        background-color: var(--card-background);
        padding: 30px;
        margin-bottom: 30px;
        border-radius: 12px;
        /* Weichere Kanten */
        /* Dezenter, eleganter Schatten */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .content-section h2 {
        color: var(--primary-color);
        /* Unterstrich in Akzentfarbe (z.B. Senfgelb) */
        border-bottom: 3px solid var(--accent-color);
        padding-bottom: 10px;
        margin-bottom: 25px;
        font-size: 2em;
    }

    .content-section p {
        margin-bottom: 15px;
    }

    /* Listen-Stil */
    ul {
        list-style-type: none;
        padding-left: 0;
        margin-top: 10px;
    }

    ul li {
        background-color: var(--background-color);
        margin-bottom: 8px;
        padding: 12px;
        /* Mehr Platz */
        /* Dickerer Rand in Primärfarbe */
        border-left: 8px solid var(--primary-color);
        border-radius: 4px;
        transition: transform 0.2s;
        /* Kleiner Hover-Effekt */
    }

    ul li:hover {
        transform: translateX(5px);
    }

    /* Footer-Bereich */
    .footer {
        /* Dunkles Grau/Schwarz für einen Kontrastreichen Abschluss */
        background-color: var(--secondary-color);
        color: var(--text-on-primary);
        text-align: center;
        padding: 20px 0;
        font-size: 0.9em;
    }















    /* Zutaten-Listen (Pop-up/Overlay-Stil) */
    .ingredients-list {
        display: none;
        /* Das Pop-up fixiert über den ganzen Viewport legen */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        max-height: 100vh;
        /* statt bottom: 0 */
        /* Leicht transparenter Hintergrund, um Fokus zu schaffen */
        background-color: rgba(247, 247, 247, 0.98);
        overflow-y: auto;
        scrollbar-width: none;
        /* Firefox */
        z-index: 1000;
        padding: 50px 20px;
    }


    .ingredients-list::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari */
    }

    /* Den Container anzeigen, wenn er das Ziel des Links ist */
    .ingredients-list:target {
        display: block;
    }

    /* Zentraler Container für Lesbarkeit im Overlay */
    .ingredients-list-inner {
        max-width: 600px;
        margin: 40px auto;
        background-color: var(--card-background);
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    }

    /* Stil für den Schließen-Link */
    .ingredients-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 3px solid var(--primary-color);
        margin-bottom: 25px;
        padding-bottom: 10px;
    }

    .close-link {
        text-decoration: none;
        font-weight: bold;
        color: var(--primary-color);
        font-size: 1.8em;
        transition: color 0.2s;
    }

    .close-link:hover {
        color: var(--accent-color);
    }


    /* Stil für das Bild im bei Über-Mich */

    .hero-image {
        display: block;
        margin: 15px auto 25px auto;

        border: 6px solid var(--primary-color);
        width: 500px;



        height: auto;
        object-fit: contain;
        /* Glas komplett sichtbar */
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* height: auto;  <-- entfernen, da widersprüchlich */
    }







    /* Media Query für kleinere Bildschirme (Responsive Design) */
    @media (max-width: 600px) {



        .hero-image {
            width: 100%;
            max-width: 500px;
            height: auto;
        }

        body {
            font-size: 24px;
            /* oder eine passende Größe */
        }

        .hero p {
            font-size: 1em;
            /* optional für Absätze */
        }


        .hero {
            padding: 60px 20px;
        }

        .hero h1 {
            font-size: 2.5em;
        }




        /* NEU HINZUFÜGEN: Stellt sicher, dass die Boxen auf Mobilgeräten volle Breite nutzen */
        .content-section {
            max-width: 100%;
            padding: 0 10px;
            /* Etwas Abstand vom Rand */
            margin: 20px auto;
        }

        .about-me,
        .details,
        .contact {
            /* Hier wird der innere Padding für die Boxen angepasst */
            padding: 20px;
            border-radius: 0;
            margin-bottom: 20px;
        }

        /* ... andere mobile Anpassungen ... */
    }









    .hero p {
        padding: 0 10px;
        /* Sicherstellen, dass auch der Hero-Text nicht ganz an den Rand geht */
    }









    /* Gingham / Marmeladenglas-Karo */
    body {
        /* Basishintergrund bleibt erhalten */
        background-color: var(--background-color);
        /* Die Fallback-Farbe ist hier bereits gesetzt */

        /* Zwei orthogonale, halbtransparente Streifenmuster übereinander: */
        background-image:
            repeating-linear-gradient(0deg,
                rgba(163, 43, 50, 0.18) 0px,
                /* Rot halbtransparent */
                rgba(163, 43, 50, 0.18) 24px,
                /* Hier (Rot) durch die Hintergrundfarbe/Weiß ersetzen */
                rgba(255, 255, 255, 0.18) 24px,
                /* <-- Verwenden Sie dies, wenn Sie Gingham wollen. */
                rgba(255, 255, 255, 0.18) 48px),
            repeating-linear-gradient(90deg,
                rgba(163, 43, 50, 0.18) 0px,
                rgba(163, 43, 50, 0.18) 24px,
                /* Hier (Rot) durch die Hintergrundfarbe/Weiß ersetzen */
                rgba(255, 255, 255, 0.18) 24px,
                /* <-- Verwenden Sie dies, wenn Sie Gingham wollen. */
                rgba(255, 255, 255, 0.18) 48px);

        /* ... Rest bleibt gleich ... */
    }


    /* Styling für die Produkt-Liste mit Icons */
    .product-list {
        list-style-type: none;
        /* Entfernt die Standard-List-Marker */
        padding-left: 0;
        margin-top: 10px;
    }

    .product-list li {
        background-color: var(--background-color);
        margin-bottom: 12px;
        padding: 15px;
        /* Etwas mehr Platz */
        border-left: none;
        /* Entfernt den dicken Rand der alten ul-li */
        border-radius: 8px;
        /* Weichere Kanten */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        /* Sehr dezenter Schatten */
        transition: transform 0.2s, box-shadow 0.2s;
        position: relative;
        display: flex;
        align-items: center;
    }

    .product-list li:hover {
        transform: translateY(-2px);
        /* Anstelle von translateX für einen 'Anhebe-Effekt' */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .product-list li a {
        text-decoration: none;
        color: var(--secondary-color);
        font-weight: 700;
        font-size: 1.1em;
        display: block;
        /* Damit der Link den gesamten LI-Inhalt abdeckt */
        padding-left: 10px;
        /* Platz für das Icon freihalten */
        width: 100%;
    }

    /* Icon (über den data-icon-Attribut in HTML eingefügt) */
    .product-list li::before {
        content: attr(data-icon);
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 2.2em;
        /* Größe des Icons anpassen */
        line-height: 1;
        color: var(--primary-color);
        /* Fallback-Farbe, wird aber vom Emoji überschrieben */
        z-index: 1;
        /* Sicherstellen, dass das Icon über dem Hintergrund liegt */
    }

    /* Anpassung der Hover-Farbe für den Link */
    .product-list li a:hover {
        color: var(--primary-color);
    }