/* Basis-Design */
body { font-family: sans-serif; background-color: #121212; color: #f4f4f4; margin: 0; line-height: 1.6; }
header { padding: 20px; text-align: center; border-bottom: 2px solid #e63946; }
.wrapper { max-width: 900px; margin: auto; padding: 20px; }
nav { background: #1a1a1a; padding: 10px; display: flex; justify-content: center; gap: 15px; }
nav a { color: #fff; text-decoration: none; font-weight: bold; }
.content { background: #1e1e1e; padding: 20px; border-radius: 8px; }

/* Responsive: Wenn Bildschirm schmaler als 768px (Tablet/Handy) */
@media (max-width: 768px) {
    nav { flex-direction: column; align-items: center; }
    .wrapper { padding: 10px; }
    h1 { font-size: 1.2rem; }
}

/* Tabellen-Optimierung für Mobil */
.archive-table { width: 100%; border-collapse: collapse; }
.archive-table th, .archive-table td { padding: 10px; border-bottom: 1px solid #333; }
@media (max-width: 600px) {
    .archive-table thead { display: none; } /* Versteckt Tabellenkopf auf Handy */
    .archive-table tr { display: block; margin-bottom: 10px; border: 1px solid #333; }
    .archive-table td { display: block; text-align: right; }
    .archive-table td::before { content: attr(data-label); float: left; font-weight: bold; }
}