body{
    color: rgb(226, 226, 226);
    padding: 0px;
    margin: 0px;
    background-color: #0c0c16;

    /* 
     *  Diese Flexbox-Kombination ist der Schlüssel für ein "Sticky Footer"-Layout.
     *  'min-height: 100vh' sorgt dafür, dass der body immer mindestens so hoch ist wie der Bildschirm.
     *  'flex-direction: column' stapelt die Elemente (header, content, footer) vertikal.
     */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header{
    background-color: transparent;    
}
.header img{
    height: 2em;
}

/* Der Haupt-Titelblock mit dem Logo */
.title{
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    font-weight: 300;
    gap: 15px;
    margin: 0px 30px 10px 30px;
    margin-top: 25px;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #111136;
    border-radius: 30px;
    border: 2px solid #1f1f64; 
}

/* 
 *  Styling für die Trennlinien in der Navigation.
 *  Das erste und letzte Element bekommen jeweils nur eine Linie,
 *  um außen sauber abzuschließen. Die mittleren haben beidseitig Linien.
 */
ul li:first-child{
    border-left: none;
    border-right: 2px solid rgb(226, 226, 226);
}
ul li:last-child{
    border-left: 2px solid rgb(226, 226, 226);
    border-right: none;
}
ul li{  
    border-left: 2px solid rgb(226, 226, 226);
    border-right: 2px solid rgb(226, 226, 226);
    flex-grow:1 ; /* Sorgt dafür, dass alle Elemente den verfügbaren Platz gleichmäßig einnehmen */
}

li a{
    display: flex;
    justify-content: center;
    text-decoration: none;
}

/* Die pillenförmige Navigationsleiste */
ul{  
    margin: 0 30px 10px 30px;
    padding: 10px;
    background-color: #111136 ;
    border-radius: 500px; /* Ein hoher Wert sorgt für perfekt abgerundete Ecken */
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    width: auto;
    border: 2px solid #1f1f64;
}

ul button{
    padding-left: 12px;
    padding-right: 12px;
    color: rgb(226, 226, 226);
    background-color: transparent;
    border: none;
    font-family: "Roboto", sans-serif;
    font-size: 125%;
    position: relative; /* Wichtig, damit das ::after-Pseudo-Element korrekt positioniert wird */
}

/* 
 *  Der Trick für den animierten Unterstrich beim Hovern.
 *  Ein Pseudo-Element wird unter dem Button platziert und ist anfangs unsichtbar (Breite 0).
 */
ul button::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%); /* Zentriert den Strich perfekt unter dem Text */
    background-color: rgb(226, 226, 226);
    transition: width 0.3s ease;
}

/* Beim Hovern wird die Breite des Pseudo-Elements animiert, wodurch der Strich erscheint. */
ul button:hover::after {
    width: 100%;
}

/* Diese Klasse sorgt dafür, dass der Unterstrich beim aktuell ausgewählten Tab dauerhaft sichtbar ist. */
.currenttab::after {
    width: 100% !important;
}

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    /* Die Breite wird berechnet, damit der Footer exakt mit den anderen Inhaltsboxen abschließt (100% minus Ränder minus Borderbreite). */
    width: calc(100% - 60px - 4px); 
    margin: 10px 30px;
    padding: 10px 0;
    background-color: rgb(17, 17, 54) ;
    border-radius: 30px;
    font-family: "Roboto", sans-serif;
    border: 2px solid #1f1f64;
}

footer img{
    height: 1.5em;
}

/* 
 *  Das Herzstück des Sticky-Footer-Layouts. 
 *  'flex-grow: 1' befiehlt dem Inhaltsbereich, allen verfügbaren vertikalen Platz einzunehmen.
 *  Dadurch wird der Footer an den unteren Bildschirmrand gedrückt, auch bei wenig Inhalt.
 */
.content{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}