/* Grid, Container und strukturelles Layout */

.container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

.full-width {
    width: 100%;
}

.section {
    padding: var(--spacing-xl) 0;
}

/* Hilfsklassen */
.bg-main { background-color: var(--bg-main); }
.bg-second { background-color: var(--bg-second); }
.bg-third { background-color: var(--bg-third); }

.text-main { color: var(--text-main); }
.text-second { color: var(--text-second); }
.text-third { color: var(--text-third); }

/* Flexbox Utilities (z.B. für den Footer) */
.flex { display: flex; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.gap-md { gap: var(--spacing-md); }
.list-none { list-style: none; padding: 0; margin: 0; }

/* Mobile Optimierung: Layouts anpassen */
@media (max-width: 768px) {
    .section {
        padding: var(--spacing-md) 0;
    }
    
    .container {
        padding: 0 15px;
    }

    /* Stack flex items on mobile */
    .flex-mobile-col {
        flex-direction: column;
    }
}