/* Grundlegendes Styling */
body { font-family: sans-serif; margin: 0; padding: 0; }
header { background: #333; color: white; padding: 1rem; text-align: center; }

/* Flexbox für Layout-Anpassung */
.container {
    display: flex;
    flex-wrap: wrap; /* Elemente umbrechen auf kleinen Bildschirmen */
    padding: 1rem;
}

main { flex: 3; min-width: 300px; }
aside { flex: 1; min-width: 200px; }

/* Responsive Bildanpassung */
img { max-width: 100%; height: auto; }

/* Mobile First: Anpassung für Handys (Breakpoints) */
@media (max-width: 600px) {
    .container { flex-direction: column; }
}