* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    color: #fff;
    overflow-x: hidden;
    background-image: url("../bilder/BG_light.jpg");
    /* Ich ändere 25% auf einen festen Wert, das ist oft stabiler */
    background-size: 150px;
    background-color: #1a1a2e;
    background-repeat: repeat;
    background-blend-mode: overlay;
    font-family: "Myanmar Text", sans-serif;
    margin: 0;
    padding: 0;
}

/* * MOBILE-STIL (Standard):
 * Alle ULs sind jetzt standardmäßig einspaltig (1fr)
 * und gestapelt.
*/
ul {
    display: grid;
    /* grid-column und grid-row entfernt (kommt in Media Query) */
    grid-template-columns: 1fr; /* 1 Spalte für Mobile */
    grid-gap: 10px;
    grid-auto-rows: minmax(30px, auto);
    list-style: none; /* Gute Praxis, List-Style zu entfernen, wenn man Grid nutzt */
}

ul ul {
    /* Spalten-Definitionen entfernt */
    padding-left: 20px; /* Einrückung für verschachtelte Listen auf Mobile */
}

ul ul li {
    /* Spalten-Definition entfernt */
}

nav.navbar {
    left: auto;
}

img {
    max-width: 100%;
    height: auto; /* Sorgt für korrektes Seitenverhältnis */
}

footer {
    clear: both;
}

/* * MOBILE-STIL (Standard):
 * .topTen ist jetzt einspaltig und nicht mehr inline.
*/
aside ul.topTen {
    display: grid; /* Geändert von inline-grid */
    list-style: none;
    grid-template-columns: 1fr; /* 1 Spalte für Mobile */
    gap: 10px; /* Etwas Abstand zwischen den mobilen Elementen */
}

main article p {
    max-width: 700px;
    font-size: 1.1em; /* Etwas kleiner für bessere mobile Lesbarkeit */
    line-height: 1.5em; /* Etwas mehr Zeilenabstand für Mobile */
}

.artikelListe {
    background: linear-gradient(
            to right,
            transparent 0%,
            transparent calc(0% - 5px),
            rgba(217, 255, 0, 0.95) calc(0% - 5px),
            #138303 calc(0% + 5px),
            transparent calc(0% + 5px)
    );
}

.active h2 {
    background: linear-gradient(
            to bottom,
            transparent 0%,
            transparent calc(100% - 5px),
            rgba(217, 255, 0, 0.95),
            #138303 calc(100% + 5px),
            transparent calc(100% + 5px)
    );
}

#wrapper {
    display: grid;
    grid-template-columns: 1fr; /* 1 Spalte ist perfekt für Mobile */
    grid-gap: 10px;
    grid-auto-rows: minmax(30px, auto);
    max-width: 700px;
    margin: 0 auto;
    /* WICHTIG: Padding für Mobile, damit Text nicht am Rand klebt */
    padding: 0 15px;
}

a {
    text-decoration: none;
    padding: 3px;
}

a.extern {
    color: burlywood;
    background-color: darkred;
    border-radius: 5px;
    padding: 3px;
    display: block;
    height: 100%;
    min-width: 130px;
    font-weight: bold;
    text-align: center;
}

a.intern {
    color: pink;
    background: #1a1a2e;
    border-radius: 10px;
    font-weight: 600;
    padding: 6px 5px 0 5px;
    text-align: center;
    min-width: 80%;
    display: block;
}

.active .intern,
.artikelListe .intern {
    background-color: #6440a4;
}

a:hover {
    background-color: rgba(217, 255, 0, 0.95);
    border-radius: 5px;
    color: #6b003e;
    width: 100%;
    display: block;
}

a.image {
    display: grid;
    place-items: center;
}

/* ============================================= */
/* Desktop-Stile (Tablet und größer)               */
/* ============================================= */
@media (min-width: 768px) {

    /* Wrapper-Padding auf Desktop entfernen (da max-width greift) */
    #wrapper {
        padding: 0;
    }

    /* Stellt die ursprünglichen, komplexen Grid-Strukturen
       für die Navigation/Listen wieder her */
    ul {
        grid-column: 1 / 3;
        grid-row: 1;
        grid-template-columns: repeat(1, 1fr); /* Wie im Original */
    }

    ul ul {
        grid-column: 2 / 3;
        grid-row: auto;
        padding-left: 0; /* Mobile-Einrückung entfernen */
    }

    ul ul li {
        grid-column: 3 / 3;
    }

    /* Stellt das 5-spaltige Raster für .topTen wieder her */
    aside ul.topTen {
        display: inline-grid; /* Wie im Original */
        grid-template-columns: auto auto auto auto auto; /* 5 Spalten */
        gap: 5px; /* (Oder 10px, wenn du dort auch Abstand willst) */
    }

    /* Stellt die größere Schriftgröße für Artikel wieder her */
    main article p {
        font-size: 1.3em;
        line-height: 1.4em;
    }
}