/* theme-leicht.css — NEUER Baustein (UNIVERSAL §21 Regel 2/4), NICHT in die App eingebunden.
   „Leichter": weniger Clutter, keine schweren Flächen. Unabhängig von der Farbwelt — gedacht als
   ZUSATZ nach theme-kirsch.css bzw. theme-sw.css (oder nach theme.css). Wirkt NUR mit
   <html data-leicht>. Es werden nur Darstellung und Sichtbarkeit geändert, kein Markup, keine Texte:
   Was „entfernt" ist, ist per CSS ausgeblendet und kommt mit dem Attribut zurück.
   Was sich ändert:
     1. Service-Karten: keine Vollfläche mehr, nur feine Linie; Farbe nur noch am Symbol und am Link.
     2. Globus: kleiner, ohne Schwebe-Animation, ohne Schatten.
     3. Schatten und doppelte Rahmen weg; Karten haben nur noch eine Haarlinie bzw. gar keinen Rahmen.
     4. Prinzipien-Karten (6): kein Kasten, kein „Mehr erfahren"-Link, Symbol klein ohne Fläche.
     5. Ausgeblendet: zweiter Absatz „Warum EasyLang", der Block „Value Props" (wiederholt Prinzipien 1 + 4),
        Hinweis-Text der Flat-Rate-Karte.
     6. Weniger Höhe: Hero, Abschnitte und Karten haben weniger Innenabstand; Schrift eine Stufe leichter.
   Gesehen im Mockup: mockups/mockup-kirsch-leicht.html, mockups/mockup-sw-leicht.html */

:root[data-leicht] {
    --lt-line: var(--border-default);
}

/* 1 — Service-Karten */
:root[data-leicht] .service-card,
:root[data-leicht] .service-card--accent {
    background: transparent;
    border: 1px solid var(--lt-line);
    box-shadow: none;
    min-height: 0;
    padding: var(--space-4) var(--space-5);
}
:root[data-leicht] .service-card--accent .service-card-title,
:root[data-leicht] .service-card--accent .service-card-body { color: var(--text-primary); font-weight: 600; }
:root[data-leicht] .service-card-list li,
:root[data-leicht] .service-card-list li::before { color: var(--text-secondary); }
:root[data-leicht] .service-card--accent .service-card-icon,
:root[data-leicht] .service-card--accent .service-card-cta { color: var(--accent); }
:root[data-leicht] .service-card-icon { width: 24px; height: 24px; }
:root[data-leicht] .service-card--accent:hover { background: var(--bg-subtle); border-color: var(--accent); }
:root[data-leicht] .service-card--accent:active { background: var(--bg-subtle); }

/* 2 — Hero und Globus */
:root[data-leicht] .hero { padding-top: var(--space-6); padding-bottom: var(--space-6); background: none; border-bottom: 0; }
:root[data-leicht] .hero-display { font-weight: 600; }
:root[data-leicht] .hero-globe {
    width: 160px;
    height: 160px;
    font-size: 4rem;
    animation: none;
    box-shadow: none;
    background: transparent;
    border: 1px solid var(--lt-line);
    filter: none;
}

/* 3 — Schatten weg, Karten leise */
:root[data-leicht] .btn,
:root[data-leicht] .btn-primary { box-shadow: none; }
:root[data-leicht] .btn:hover { transform: none; }
:root[data-leicht] .feature-card,
:root[data-leicht] .model-card,
:root[data-leicht] .cta-section { box-shadow: none; }
:root[data-leicht] .model-card { border: 1px solid var(--lt-line); }
:root[data-leicht] .model-card--featured { border: 1px solid var(--accent); }
:root[data-leicht] .why-section,
:root[data-leicht] .features-section,
:root[data-leicht] .pricing-section { border-top: 0; }

/* 4 — Prinzipien-Karten ohne Kasten */
:root[data-leicht] .feature-card {
    background: transparent;
    border: 0;
    padding: var(--space-3) 0;
}
:root[data-leicht] .feature-card:hover { background: transparent; transform: none; box-shadow: none; }
:root[data-leicht] .feature-icon { justify-content: flex-start; background: none; color: var(--accent); width: auto; height: auto; padding: 0; }
:root[data-leicht] .feature-title { font-weight: 600; }
:root[data-leicht] .feature-card-link { display: none; }  /* mit data-lesbar wieder sichtbar */

/* 5 — Ausgeblendet */
:root[data-leicht] .why-intro .section-body:nth-of-type(3),
:root[data-leicht] .value-props,
:root[data-leicht] .model-card-gate { display: none; }

/* 6 — Abschluss ohne Kasten, Fuß leise */
:root[data-leicht] .cta-section { background: transparent; border: 0; }
:root[data-leicht] .cta-section,
:root[data-leicht] .why-section,
:root[data-leicht] .features-section,
:root[data-leicht] .pricing-section { padding-top: var(--space-6); padding-bottom: var(--space-6); }
:root[data-leicht] .section-heading { font-weight: 600; }
:root[data-leicht] .footer { border-top: 1px solid var(--lt-line); }