/* Grunddesign */
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    background-color: #f8f9fa; 
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert den Inhalt horizontal */
}

h1 { color: #333; margin-bottom: 20px; width: 100%; max-width: 900px; text-align: left; }

/* Tabellen-Container / Zentrierung */
table { 
    width: 100%; 
    max-width: 900px; /* Begrenzt die Breite auf großen Bildschirmen */
    background: #fff; 
    border-collapse: collapse; 
    border-radius: 10px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    overflow: hidden;
}

/* Tabellenkopf */
th { 
    background-color: #007bff; 
    color: white; 
    text-align: left; 
    padding: 15px; 
    font-weight: 500;
}

/* Tabelleninhalt */
td { 
    padding: 12px 15px; 
    border-bottom: 1px solid #edf2f7; 
}

tr:hover { background-color: #f1f5f9; }

/* Links verschönern */
a { color: #007bff; text-decoration: none; font-weight: 500; }
a:hover { color: #0056b3; text-decoration: underline; }

/* Icons ausrichten */
img { vertical-align: middle; margin-right: 10px; opacity: 0.7; }

/* RESPONSIVE DESIGN */
@media (max-width: 600px) {
    body { padding: 10px; }
    
    /* Blendet "Last Modified" und "Size" auf Handys aus, um Platz zu sparen */
    th:nth-child(3), td:nth-child(3),
    th:nth-child(4), td:nth-child(4) {
        display: none;
    }
    
    h1 { font-size: 1.2rem; }
}