/* about-us-neu.css — NEUER Baustein (UNIVERSAL §21 Regel 2/4), NICHT in die App eingebunden.
   Über-uns im Gesicht der übrigen App. Befund (gemessen 2026-10-11): about-us.css führt ein eigenes Design:
   andere Schrift (Inter Tight statt Figtree), nachtdunkles Kopfband (--color-900), graue Wechselflächen (#f8f9fa),
   dunkle Mission-Karte, dunkle Fußzeile, dichte Überschriften (engen Buchstabenabstand) und eigene Knöpfe (.au-btn).
   Die Startseite dagegen: heller Seitengrund (--bg-base), Figtree, linksbündiger Kopf mit Akzent-Zeile, weiße Karten mit
   Haarlinie, Akzent-Knöpfe (.btn), helle Fußzeile.
   Dieser Baustein gleicht das an, ohne das Markup oder die Texte zu ändern: nur CSS, nur Tokens der aktiven Farbwelt
   (Original-Farben, Kirschrot, Schwarz-Weiß — alle funktionieren). Wirkt NUR mit <html data-about="neu">; als LETZTES
   Stylesheet nach about-us.css laden. Mindestschrift 14 px (Messung: Labels waren 12 px).
   Gesehen im Mockup: mockups/mockup-about-neu.html */

:root[data-about="neu"] .au-page {
    background: var(--bg-base);
    color: var(--text-secondary);
    font-family: var(--font-family);
}

/* Kopf: hell, linksbündig wie auf der Startseite */
:root[data-about="neu"] .au-hero {
    background: none;
    color: var(--text-primary);
    padding: var(--space-8, 72px) 0 var(--space-6);
}
:root[data-about="neu"] .au-hero__inner { text-align: left; max-width: 1080px; margin: 0 auto; }   /* gleiche Breite und Kante wie .au-section__inner */
:root[data-about="neu"] .au-hero__eyebrow {
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
:root[data-about="neu"] .au-hero__title {
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: var(--text-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.12;
    max-width: 18em;
    text-wrap: balance;
}
:root[data-about="neu"] .au-hero__lead {
    color: var(--text-secondary);
    font-size: 1.2rem;
    line-height: 1.55;
    max-width: 36rem;
    margin-left: 0;
}

/* Abschnitte: kein Grau-Weiß-Wechsel, nur eine feine Linie */
:root[data-about="neu"] .au-section,
:root[data-about="neu"] .au-section--alt { background: none; border-top: 1px solid var(--border-default); }
:root[data-about="neu"] .au-section__label {
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
:root[data-about="neu"] .au-section__title {
    color: var(--text-primary);
    font-family: var(--font-family);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
:root[data-about="neu"] .au-section__body { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.65; }

/* Mission-Karte: weiß mit Haarlinie statt Nachtblau */
:root[data-about="neu"] .au-mission-grid__accent {
    background: var(--neutral-0);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: none;
}
:root[data-about="neu"] .au-accent-list__icon { background: var(--bg-subtle); border-radius: var(--radius-md); }
:root[data-about="neu"] .au-accent-list__icon svg { stroke: var(--accent); }
:root[data-about="neu"] .au-accent-list__heading { color: var(--text-primary); font-size: 1.05rem; font-weight: 600; }
:root[data-about="neu"] .au-accent-list__desc { color: var(--text-secondary); font-size: 1rem; line-height: 1.55; }

/* Schritte: Akzent statt Nachtblau */
:root[data-about="neu"] .au-step__number { background: var(--accent); color: var(--text-on-accent); }
:root[data-about="neu"] .au-step__title { color: var(--text-primary); font-size: 1.1rem; font-weight: 600; }
:root[data-about="neu"] .au-step__desc { color: var(--text-secondary); font-size: 1rem; line-height: 1.55; }
:root[data-about="neu"] .au-steps .au-step:not(:last-child)::after { background: var(--border-default); }

/* Feature-Karten: wie die Prinzipien-Karten der Startseite */
:root[data-about="neu"] .au-feature-card {
    background: var(--neutral-0);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: none;
}
:root[data-about="neu"] .au-feature-card:hover { border-color: var(--accent); box-shadow: none; transform: none; }
:root[data-about="neu"] .au-feature-card__icon { background: var(--bg-subtle); border-radius: var(--radius-md); }
:root[data-about="neu"] .au-feature-card__icon svg { stroke: var(--accent); }
:root[data-about="neu"] .au-feature-card__title { color: var(--text-primary); font-weight: 600; }
:root[data-about="neu"] .au-feature-card__desc { color: var(--text-secondary); font-size: 1rem; line-height: 1.55; }

/* Abschluss: weiße Karte mit Haarlinie wie auf der Startseite, Knöpfe wie .btn */
:root[data-about="neu"] .au-cta { background: none; padding: var(--space-7) var(--space-5); }
:root[data-about="neu"] .au-cta__inner {
    background: var(--neutral-0);
    border: 1px solid var(--border-default);
    border-radius: calc(var(--radius-lg) + 4px);
    padding: var(--space-7) var(--space-5);
    max-width: 960px;
    margin: 0 auto;
}
:root[data-about="neu"] .au-cta__title { color: var(--text-primary); font-family: var(--font-family); font-weight: 600; }
:root[data-about="neu"] .au-cta__body { color: var(--text-secondary); font-size: 1.1rem; }
:root[data-about="neu"] .au-btn { border-radius: var(--radius-md); font-family: var(--font-family); font-size: 16px; font-weight: 600; }
:root[data-about="neu"] .au-btn--primary { background: var(--accent); color: var(--text-on-accent); border: 1px solid var(--accent); }
:root[data-about="neu"] .au-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
:root[data-about="neu"] .au-btn--secondary { background: var(--neutral-0); color: var(--accent); border: 1px solid var(--accent); }
:root[data-about="neu"] .au-btn--secondary:hover { background: var(--bg-subtle); }

/* Fuß: hell wie auf der Startseite */
:root[data-about="neu"] .au-footer,
:root[data-about="neu"] .site-footer--dark {
    background: var(--neutral-0);
    color: var(--text-muted);
    border-top: 1px solid var(--border-default);
    font-size: 14px;
}
:root[data-about="neu"] .au-footer a,
:root[data-about="neu"] .site-footer--dark a { color: var(--text-secondary); }
:root[data-about="neu"] .au-footer a:hover { color: var(--text-primary); }