/* ============================================= */
/* 2. LAYOUT & HILFSKLASSEN                      */
/* ============================================= */
.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.section, .section-light {
    padding: var(--space-xl) 0;
}
.section-light {
    background-color: var(--grey-bg);
}
.section-title {
    text-align: center;
    margin-bottom: var(--space-lg);
}
.section-title h2 {
    margin-bottom: var(--space-sm);
}
.section-title p {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.1rem;
    color: var(--text-color-light);
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
#main {
    flex-grow: 1;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl); /* Sorgt für Abstand zum Footer */
}

/* Hilfsklassen (Utility) */
.text-primary { color: var(--primary-color) !important; }
.text-dark { color: var(--dark-color) !important; }
.text-light { color: var(--text-color-light) !important; }
.text-white { color: var(--light-color) !important; }
.text-babyblue { color: #89CFF0 !important; font-weight: 700 !important; }
.font-normal { font-weight: 400 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-sm { font-size: 0.9rem !important; }
.text-lg { font-size: 1.2rem !important; }
.text-xl { font-size: 1.5rem !important; }
.d-none { display: none !important; }