/* Der Container wird global über .section-container-center gesteuert, 
   hier liegen nur die Inhalts-Styles */

.header-badge {
    color: var(--current-accent, var(--cyan)); /* Nutzt jetzt deine :root Variable */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    display: block;
}

.header-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 300; /* Konsistent zu deinen .h1 / .h2 Styles */
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: inherit; /* Nimmt die Farbe der Sektion an */
}

/* Intelligente Farbanpassung basierend auf der Sektion */
.section {
    &.bg-slate-900, &.bg-dark {
        .header-title {
            color: #ffffff;
        }
        .header-badge {
            /* Optional: Badge etwas heller im Dunkeln, falls nötig */
            filter: brightness(1.2);
        }
    }
}