/* Globale Stile */
* {
    box-sizing: border-box; /* Modernes Box-Modell */
    margin: 0;             /* Standard-Außenabstände entfernen */
    padding: 0;            /* Standard-Innenabstände entfernen */
}

body {
    background-color: #FFEE00; /* Zitronengelber Hintergrund */
    /* Standard Sans-Serif, oder Ihre gewählte futuristische Schrift */
    /* font-family: 'Orbitron', sans-serif; */
    font-family: 'Arial', sans-serif;
    color: black;              /* Standard-Textfarbe */
    display: flex;             /* Flexbox für Layout */
    flex-direction: column;    /* Ordnet Nav oben, Content darunter an */
    min-height: 100vh;         /* Stellt sicher, dass der Body mindestens die Höhe des Viewports hat */
    overflow-x: hidden;        /* Verhindert horizontales Scrollen durch absolute Elemente */
}

/* --- NAVIGATION Basis --- */
#main-nav {
    width: 100%;
    background-color: black;   /* Schwarzer Hintergrund für die Navigationsleiste */
    padding: 10px 15px;        /* Innenabstand oben/unten und links/rechts */
    position: relative;        /* Wichtig für absolute Positionierung des Mobile-Menüs */
    display: flex;             /* Flexbox für Desktop-Layout (Liste zentriert) */
    justify-content: center;   /* Zentriert die Liste auf Desktop */
    align-items: center;       /* Zentriert Elemente vertikal */
    min-height: 50px;          /* Mindesthöhe für besseren Klickbereich */
    z-index: 100;              /* Stellt sicher, dass die Nav über dem Rest liegt */
}

/* --- HAMBURGER BUTTON (Standard: versteckt) --- */
#mobile-menu-toggle {
    display: none;             /* Auf Desktop standardmäßig versteckt */
    background: none;          /* Kein Hintergrund */
    border: none;              /* Kein Rand */
    padding: 5px;              /* Kleiner Innenabstand für Klickfläche */
    cursor: pointer;           /* Zeigt an, dass es klickbar ist */
    z-index: 101;              /* Muss über der aufklappenden Liste liegen */
    /* Stile für die Hamburger-Striche (Spans innen) */
}
#mobile-menu-toggle span {
    display: block;            /* Striche untereinander */
    width: 25px;               /* Breite der Striche */
    height: 3px;               /* Höhe der Striche */
    background-color: #FFEE00; /* Zitronengelbe Farbe der Striche */
    margin: 5px 0;             /* Abstand zwischen den Strichen */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Animation für X-Form */
}

/* --- NAVIGATIONSLISTE Desktop (Standard) --- */
#nav-list {
    list-style: none;          /* Keine Aufzählungszeichen */
    display: flex;             /* Horizontale Anordnung auf Desktop */
    justify-content: center;   /* Zentriert die Menüpunkte */
    gap: 30px;                 /* Abstand zwischen den Menüpunkten */
    margin: 0;                 /* Standard-Margin entfernen */
    padding: 0;                /* Standard-Padding entfernen */
}

#nav-list a {
    color: #FFEE00;            /* Zitronengelbe Schriftfarbe */
    text-decoration: none;     /* Keine Unterstreichung */
    font-weight: bold;         /* Fettgedruckte Schrift */
    font-size: 1.1em;          /* Schriftgröße */
    padding: 5px 10px;         /* Innenabstand für Klickfläche */
    transition: color 0.3s ease; /* Sanfter Übergang für Hover-Effekt */
    display: block;            /* Wichtig für Padding und Mobile-Layout */
}

#nav-list a:hover {
    color: #FFFFFF;            /* Weiße Schrift beim Überfahren mit der Maus */
}

/* --- ZENTRIERTER INHALT --- */
.content-center {
    flex-grow: 1;              /* Nimmt den restlichen Platz im Flex-Container (body) ein */
    display: flex;             /* Flexbox zum Zentrieren des Logo-Containers */
    justify-content: center;   /* Horizontal zentrieren */
    align-items: center;       /* Vertikal zentrieren */
    text-align: center;        /* Textausrichtung (falls Text direkt hier wäre) */
    padding: 20px;             /* Etwas Abstand zum Rand */
}

/* --- LOGO CONTAINER --- */
.logo-container {
    position: relative;        /* Wichtig für absolute Positionierung des Textes */
    display: inline-block;     /* Passt Größe an Inhalt an (wird durch Bild bestimmt) */
}

/* --- MARKENNAME (Text über Bild) --- */
#brand-name {
    position: absolute;        /* Nimmt Text aus dem normalen Fluss */
    /* Positionierung: 45% von links, 60% von oben zum Mittelpunkt des Textes */
    left: 45%;
    top: 60%;
    /* Korrektur, um das Element anhand seines Mittelpunkts zu zentrieren */
    transform: translate(-50%, -50%);
    z-index: 1;                /* Stellt sicher, dass Text über dem Bild liegt */
    font-size: 4em;            /* Schriftgröße (anpassen nach Bedarf) */
    font-weight: bold;         /* Fettgedruckt */
    color: black;              /* Sicherstellen, dass Farbe schwarz ist */
    margin: 0;                 /* Standard h1-Margin entfernen */
    white-space: nowrap;       /* Verhindert ungewollten Textumbruch */
}

/* --- MARKENBILD (Zitrone) --- */
#brand-image {
    display: block;            /* Verhindert extra Leerraum unter dem Bild */
    height: auto;              /* Höhe passt sich der Breite automatisch an */
    /* 'width' wird durch JavaScript gesetzt (auf 180% der Textbreite) */
    transition: opacity 0.5s ease-in-out; /* Übergang für das Einblenden */
}

/* --- HILFSKLASSE FÜR DAS EINBLENDEN (per JS) --- */
.hidden {
    opacity: 0;                /* Element ist vollständig transparent */
    pointer-events: none;      /* Verhindert Interaktion, wenn ausgeblendet */
}


/* --- MEDIA QUERY FÜR MOBILE GERÄTE (z.B. Tablets und Smartphones) --- */
@media (max-width: 768px) { /* Breakpoint - anpassen, falls nötig (768px ist gängig für Tablets) */

    #main-nav {
        justify-content: flex-end; /* Schiebt den Inhalt (Button) nach rechts */
    }

    #mobile-menu-toggle {
        display: block;            /* Hamburger Button jetzt anzeigen */
    }

    #nav-list {
        display: none;             /* Menü standardmäßig auf Mobile verstecken */
        position: absolute;        /* Aus dem normalen Fluss nehmen */
        top: 100%;                 /* Direkt unter der Navigationsleiste positionieren */
        left: 0;                   /* Am linken Rand beginnen */
        width: 100%;               /* Volle Breite einnehmen */
        background-color: black;   /* Hintergrund für das aufklappende Menü */
        flex-direction: column;    /* Vertikale Anordnung der Menüpunkte */
        padding: 10px 0;           /* Etwas Innenabstand oben/unten */
        gap: 0;                    /* Kein extra Abstand zwischen den Listenelementen */
        border-top: 1px solid #333; /* Leichte Trennlinie zur Navigationsleiste */
        z-index: 100;              /* Sicherstellen, dass es über dem Seiteninhalt liegt */
        /* Das Menü wird sichtbar, wenn die Klasse 'active' hinzugefügt wird */
    }

    #nav-list.active {
        display: flex;             /* Menü anzeigen (als Flexbox mit column-direction) */
    }

    #nav-list li {
        width: 100%;               /* Jedes Listenelement nimmt volle Breite ein */
        text-align: center;        /* Text in den Menüpunkten zentrieren */
    }

    #nav-list a {
        padding: 15px 10px;        /* Größere Klickfläche für Touch-Geräte */
        border-bottom: 1px solid #333; /* Trennlinien zwischen den Links */
        width: 100%;               /* Link füllt das Listenelement aus */
    }
    #nav-list li:last-child a {
        border-bottom: none;       /* Keine Linie beim letzten Menüpunkt */
    }

    /* Animation für Hamburger -> X, wenn Menü geöffnet ist */
    #mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(8px) rotate(45deg); /* Oberen Strich nach unten drehen */
    }
    #mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;                /* Mittleren Strich ausblenden */
    }
    #mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg); /* Unteren Strich nach oben drehen */
    }
}

/* --- MEDIA QUERY FÜR SEHR KLEINE BILDSCHIRME (Optional) --- */
@media (max-width: 480px) { /* Breakpoint für sehr kleine Smartphones */
    #brand-name {
        font-size: 3em; /* Schriftgröße des Logos weiter reduzieren */
    }
    /* Ggf. weitere Anpassungen für sehr kleine Bildschirme hier */
}