/* ============================================================
   FRIENDLY — Light-Theme-Override (v4 "Clean & Bright")
   ALL-LIGHT. Keine dunklen Sektionen. Keine Cream/Umbra/Pastell-Tinten.
   Akzent kommt durch: starke Cards, subtile Glow-Gradients,
   Brand-Farben in Icons/Badges/Section-Tags — NICHT in Backgrounds.
   ============================================================ */

[data-bs-theme="light"] {
    /* ---------- Backgrounds: pure & near-pure white ---------- */
    --c-bg:            #ffffff;
    --c-bg-soft:       #fbfcfe;   /* praktisch weiß, mit Hauch kühler Note */
    --c-bg-muted:      #f4f6fa;   /* dezente Karten-Track-Farbe */
    --c-bg-tinted:     #ffffff;   /* kein Sage, kein Tint */
    --c-surface:       #ffffff;   /* Cards weiß */
    --c-surface-soft:  #f4f6fa;   /* Hover */

    /* ---------- Text: kühle, klare Slate-Skala ---------- */
    --c-text:                #0f172a;   /* Slate 900 */
    --c-text-secondary:      #475569;   /* Slate 600 */
    --c-text-muted:          #64748b;   /* Slate 500 */
    --c-text-subtle:         #94a3b8;   /* Slate 400 */
    --c-text-on-primary:     #ffffff;

    /* ---------- Borders ---------- */
    --c-border-subtle: rgba(15, 23, 42, 0.06);
    --c-border:        rgba(15, 23, 42, 0.10);
    --c-border-strong: rgba(15, 23, 42, 0.18);
    --c-border-accent: rgba(71, 95, 23, 0.35);

    /* ---------- Brand-Akzente (AAA auf Weiß) ---------- */
    --c-primary:        #475F17;   /* HMF Grün AAA */
    --c-primary-hover:  #3D4F13;
    --c-primary-active: #2E3D0E;
    --c-primary-tint:   #f4f7e9;   /* sehr soft, nur für Info-Box etc. */
    --c-primary-soft:   #e2eac4;

    --c-secondary:        #a82e40;   /* HMF Rot */
    --c-secondary-hover:  #8c2333;
    --c-secondary-tint:   #fdecef;

    /* Frischer Akzent (NEU) — kühles Sky-Blue für Variety */
    --c-accent-cool:        #2563eb;   /* sky blue */
    --c-accent-cool-hover:  #1d4ed8;
    --c-accent-cool-soft:   #eff6ff;

    /* Warm-Akzent für Tools / Aktivität */
    --c-accent-warm:        #d97706;   /* amber */
    --c-accent-warm-soft:   #fef3c7;

    /* States */
    --c-success:    #16a34a;
    --c-warning:    #d97706;
    --c-error:      #dc2626;
    --c-info:       #2563eb;

    /* Focus */
    --c-focus:        #475F17;
    --c-focus-ring:   0 0 0 4px rgba(71, 95, 23, 0.25);

    /* ---------- Shadows — substanziell, geben Cards Atmung ---------- */
    --c-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --c-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --c-shadow-md: 0 4px 6px rgba(15, 23, 42, 0.05), 0 10px 25px rgba(15, 23, 42, 0.06);
    --c-shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.06), 0 20px 40px rgba(15, 23, 42, 0.08);
    --c-shadow-xl: 0 25px 50px rgba(15, 23, 42, 0.12);

    /* ---------- Mapping auf Legacy-Variablen ---------- */
    --hmf-green:        var(--c-primary);
    --hmf-green-light:  var(--c-primary);
    --hmf-green-dark:   var(--c-primary-active);

    --bg-light:           var(--c-bg);
    --bg-light-secondary: var(--c-bg-soft);
    --text-light:         var(--c-text);
    --text-light-muted:   var(--c-text-secondary);

    --light-bg-primary:   var(--c-bg);
    --light-bg-secondary: var(--c-bg-soft);
    --light-bg-tertiary:  var(--c-bg-muted);
    --light-bg-elevated:  var(--c-surface);

    --light-border-subtle:    var(--c-border-subtle);
    --light-border-default:   var(--c-border);
    --light-border-emphasis:  var(--c-border-accent);

    --shadow-xs: var(--c-shadow-xs);
    --shadow-sm: var(--c-shadow-sm);
    --shadow-md: var(--c-shadow-md);
    --shadow-lg: var(--c-shadow-lg);
    --shadow-xl: var(--c-shadow-xl);

    --shadow-green-soft:   0 4px 20px rgba(71, 95, 23, 0.12);
    --shadow-green-medium: 0 8px 32px rgba(71, 95, 23, 0.20);

    --focus-color:       var(--c-focus);
    --focus-ring-shadow: var(--c-focus-ring);

    --section-bg-light-primary:   var(--c-bg);
    --section-bg-light-secondary: var(--c-bg-soft);
    --section-bg-light-accent:    var(--c-bg-soft);

    --glass-bg-light:     rgba(15, 23, 42, 0.03);
    --glass-border-light: rgba(15, 23, 42, 0.08);
}

/* ============================================================
   BODY — pure white, no fixed-attach gradient
   ============================================================ */
[data-bs-theme="light"] body {
    background: var(--c-bg);
    background-image: none;
    color: var(--c-text);
}

/* ============================================================
   ALLE Sektionen: HELL (keine dunklen mehr)
   Visuelle Differenzierung durch Glow-Gradients, nicht durch Tinten
   ============================================================ */

/* .section-elevated — dezenter grüner Glow oben rechts */
[data-bs-theme="light"] .section-elevated {
    background:
        radial-gradient(800px 400px at 95% 0%, rgba(71, 95, 23, 0.05), transparent 60%),
        var(--c-bg);
    color: var(--c-text);
    border-top: 1px solid var(--c-border-subtle);
    border-bottom: 1px solid var(--c-border-subtle);
}

[data-bs-theme="light"] .section-elevated::before {
    display: none;
}

/* .about-section — dezenter roter Glow links unten */
[data-bs-theme="light"] .about-section {
    background:
        radial-gradient(800px 400px at 5% 100%, rgba(168, 46, 64, 0.04), transparent 60%),
        var(--c-bg-soft);
    color: var(--c-text);
    border-top: 1px solid var(--c-border-subtle);
    border-bottom: 1px solid var(--c-border-subtle);
}

/* .cta-section — dezenter blauer Glow rechts unten */
[data-bs-theme="light"] .cta-section {
    background:
        radial-gradient(800px 400px at 95% 100%, rgba(37, 99, 235, 0.05), transparent 60%),
        var(--c-bg);
    color: var(--c-text);
    border-top: 1px solid var(--c-border-subtle);
    border-bottom: 1px solid var(--c-border-subtle);
}

/* FAQ */
[data-bs-theme="light"] .faq-section {
    background: var(--c-bg-soft);
    color: var(--c-text);
}

/* Leistungen */
[data-bs-theme="light"] .leistung-section:nth-child(odd) {
    background: var(--c-bg);
    color: var(--c-text);
}

[data-bs-theme="light"] .leistung-section:nth-child(even) {
    background: var(--c-bg-soft);
    color: var(--c-text);
}

/* ============================================================
   Typography
   ============================================================ */
[data-bs-theme="light"] body,
[data-bs-theme="light"] p {
    color: var(--c-text);
}

[data-bs-theme="light"] h1,
[data-bs-theme="light"] h2,
[data-bs-theme="light"] h3,
[data-bs-theme="light"] h4,
[data-bs-theme="light"] h5 {
    color: var(--c-text);
}

[data-bs-theme="light"] .section-subtitle,
[data-bs-theme="light"] .section-lead,
[data-bs-theme="light"] .about-section p,
[data-bs-theme="light"] .cta-section p {
    color: var(--c-text-secondary);
}

[data-bs-theme="light"] .section-tag,
[data-bs-theme="light"] .blog-tag {
    color: var(--c-primary);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* ============================================================
   CARDS — Weiß, klar, mit substanzieller Tiefe
   ============================================================ */
[data-bs-theme="light"] .service-card,
[data-bs-theme="light"] .tool-card,
[data-bs-theme="light"] .testimonial-card,
[data-bs-theme="light"] .blog-card,
[data-bs-theme="light"] .about-feature,
[data-bs-theme="light"] .service-overview-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border-subtle);
    color: var(--c-text);
    box-shadow: var(--c-shadow-sm);
}

[data-bs-theme="light"] .service-card:hover,
[data-bs-theme="light"] .tool-card:hover,
[data-bs-theme="light"] .blog-card:hover,
[data-bs-theme="light"] .about-feature:hover,
[data-bs-theme="light"] .service-overview-card:hover,
[data-bs-theme="light"] .testimonial-card:hover {
    border-color: var(--c-border-accent);
    box-shadow: var(--c-shadow-lg);
    transform: translateY(-3px);
}

[data-bs-theme="light"] .service-card h2,
[data-bs-theme="light"] .service-card h3,
[data-bs-theme="light"] .service-card h4,
[data-bs-theme="light"] .tool-card h2,
[data-bs-theme="light"] .tool-card h3,
[data-bs-theme="light"] .tool-card h4,
[data-bs-theme="light"] .tool-card .tool-name,
[data-bs-theme="light"] .blog-card h2,
[data-bs-theme="light"] .blog-card h3,
[data-bs-theme="light"] .blog-card h4,
[data-bs-theme="light"] .blog-card .blog-title,
[data-bs-theme="light"] .about-feature h2,
[data-bs-theme="light"] .about-feature h3,
[data-bs-theme="light"] .about-feature h4,
[data-bs-theme="light"] .testimonial-card h2,
[data-bs-theme="light"] .testimonial-card h3,
[data-bs-theme="light"] .testimonial-card h4,
[data-bs-theme="light"] .service-overview-card h2,
[data-bs-theme="light"] .service-overview-card h3,
[data-bs-theme="light"] .service-overview-card h4 {
    color: var(--c-text);
}

[data-bs-theme="light"] .service-card p,
[data-bs-theme="light"] .tool-card p,
[data-bs-theme="light"] .tool-card .tool-description,
[data-bs-theme="light"] .blog-card p,
[data-bs-theme="light"] .blog-card .blog-excerpt,
[data-bs-theme="light"] .about-feature p,
[data-bs-theme="light"] .testimonial-card p,
[data-bs-theme="light"] .service-overview-card p {
    color: var(--c-text-secondary);
}

/* ============================================================
   Buttons — Defaults UND :hover/:focus explizit setzen,
   damit Original-CSS-Regeln (mit hartcodiertem #1a1a1a) übersteuert werden.
   ============================================================ */
[data-bs-theme="light"] .btn-primary-custom {
    background: var(--c-primary);
    color: #ffffff !important;
    border: 1px solid var(--c-primary);
    box-shadow: var(--c-shadow-sm);
    text-shadow: none;
}

/* Invertierter Hover: grün → weiß mit grünem Border/Text */
[data-bs-theme="light"] .btn-primary-custom:hover,
[data-bs-theme="light"] .btn-primary-custom:focus,
[data-bs-theme="light"] .wp-care-cta-primary:hover,
[data-bs-theme="light"] .wp-care-cta-primary:focus {
    background: #ffffff !important;
    color: var(--c-primary) !important;
    border: 2px solid var(--c-primary) !important;
    box-shadow: var(--c-shadow-md), 0 0 0 1px rgba(71, 95, 23, 0.10);
    transform: translateY(-2px);
}

[data-bs-theme="light"] .btn-outline-custom {
    background: var(--c-surface);
    color: var(--c-text) !important;
    border: 2px solid var(--c-border);
}

[data-bs-theme="light"] .btn-outline-custom:hover,
[data-bs-theme="light"] .btn-outline-custom:focus {
    background: var(--c-surface);
    color: var(--c-primary) !important;
    border-color: var(--c-primary);
    box-shadow: var(--c-shadow-sm);
}

[data-bs-theme="light"] .cta-box {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-hover) 100%);
    color: #ffffff;
    box-shadow: 0 12px 32px rgba(71, 95, 23, 0.25);
}

[data-bs-theme="light"] .cta-box h2,
[data-bs-theme="light"] .cta-box h3,
[data-bs-theme="light"] .cta-box p {
    color: #ffffff;
}

[data-bs-theme="light"] .cta-box .btn-cta {
    background: #ffffff;
    color: var(--c-primary);
}

/* CTA-Section auf der Startseite — der grüne .cta-container Block
   Überschreibt meine .cta-section p Regel, weil weiß auf grün gehört. */
[data-bs-theme="light"] .cta-container,
[data-bs-theme="light"] .cta-container h1,
[data-bs-theme="light"] .cta-container h2,
[data-bs-theme="light"] .cta-container h3,
[data-bs-theme="light"] .cta-container h4,
[data-bs-theme="light"] .cta-container p,
[data-bs-theme="light"] .cta-container .cta-title,
[data-bs-theme="light"] .cta-container .cta-text {
    color: #ffffff !important;
}

/* CTA Buttons im grünen Container — bleiben weiß mit grünem Text */
[data-bs-theme="light"] .cta-container .btn-cta {
    background: #ffffff !important;
    color: var(--c-primary) !important;
}

[data-bs-theme="light"] .cta-container .btn-cta:hover,
[data-bs-theme="light"] .cta-container .btn-cta:focus {
    background: #ffffff !important;
    color: var(--c-primary-active) !important;
    box-shadow: var(--c-shadow-lg);
}

/* ============================================================
   Navbar
   ============================================================ */
[data-bs-theme="light"] .navbar-custom {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--c-border-subtle);
    box-shadow: var(--c-shadow-xs);
}

@supports (backdrop-filter: blur(1px)) {
    [data-bs-theme="light"] .navbar-custom {
        background: rgba(255, 255, 255, 0.82);
        backdrop-filter: blur(16px) saturate(140%);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
    }
}

[data-bs-theme="light"] .nav-link {
    color: var(--c-text-secondary) !important;
}

[data-bs-theme="light"] .nav-link:hover,
[data-bs-theme="light"] .nav-link:focus,
[data-bs-theme="light"] .nav-link[aria-current="page"] {
    color: var(--c-primary) !important;
}

[data-bs-theme="light"] .dropdown-menu {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    box-shadow: var(--c-shadow-lg);
}

[data-bs-theme="light"] .dropdown-item {
    color: var(--c-text-secondary) !important;
}

[data-bs-theme="light"] .dropdown-item:hover,
[data-bs-theme="light"] .dropdown-item:focus {
    background: var(--c-surface-soft);
    color: var(--c-primary) !important;
}

/* ============================================================
   Footer — hell mit dezentem oberen Akzent-Streifen
   ============================================================ */
[data-bs-theme="light"] footer {
    background: var(--c-bg-soft);
    border-top: 2px solid var(--c-primary);
    color: var(--c-text);
}

[data-bs-theme="light"] footer a {
    color: var(--c-text-secondary);
}

[data-bs-theme="light"] footer a:hover {
    color: var(--c-primary);
}

[data-bs-theme="light"] .footer-title {
    color: var(--c-text);
}

[data-bs-theme="light"] .footer-description {
    color: var(--c-text-secondary);
}

/* ============================================================
   Forms
   ============================================================ */
[data-bs-theme="light"] input,
[data-bs-theme="light"] textarea,
[data-bs-theme="light"] select {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-text);
}

[data-bs-theme="light"] input:focus,
[data-bs-theme="light"] textarea:focus,
[data-bs-theme="light"] select:focus {
    border-color: var(--c-primary);
    box-shadow: var(--c-focus-ring);
    outline: none;
}

[data-bs-theme="light"] input::placeholder,
[data-bs-theme="light"] textarea::placeholder {
    color: var(--c-text-muted);
}

[data-bs-theme="light"] ::selection {
    background: var(--c-primary-soft);
    color: var(--c-text);
}

/* ============================================================
   WordPress Wartung Section — HELL mit grünem Akzent-Glow
   ============================================================ */
[data-bs-theme="light"] .wp-care-section {
    background:
        radial-gradient(1000px 500px at 90% 0%, rgba(71, 95, 23, 0.07), transparent 65%),
        radial-gradient(700px 400px at 5% 100%, rgba(37, 99, 235, 0.04), transparent 60%),
        var(--c-bg);
    color: var(--c-text);
    border-top: 1px solid var(--c-border-subtle);
    border-bottom: 1px solid var(--c-border-subtle);
}

[data-bs-theme="light"] .wp-care-eyebrow {
    color: var(--c-primary);
}

[data-bs-theme="light"] .wp-care-title {
    color: var(--c-text);
}

[data-bs-theme="light"] .wp-care-subtitle {
    color: var(--c-text-secondary);
}

[data-bs-theme="light"] .wp-care-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border-subtle);
    color: var(--c-text);
    box-shadow: var(--c-shadow-sm);
}

[data-bs-theme="light"] .wp-care-card:hover {
    border-color: var(--c-border-accent);
    box-shadow: var(--c-shadow-lg);
    transform: translateY(-3px);
}

[data-bs-theme="light"] .wp-care-card-title {
    color: var(--c-text);
}

[data-bs-theme="light"] .wp-care-card-text {
    color: var(--c-text-secondary);
}

[data-bs-theme="light"] .wp-care-usp {
    background: var(--c-surface);
    border-left-color: var(--c-primary);
    border-top: 1px solid var(--c-border-subtle);
    border-right: 1px solid var(--c-border-subtle);
    border-bottom: 1px solid var(--c-border-subtle);
    box-shadow: var(--c-shadow-sm);
    color: var(--c-text);
}

[data-bs-theme="light"] .wp-care-usp-title {
    color: var(--c-primary);
}

[data-bs-theme="light"] .wp-care-usp-text {
    color: var(--c-text);
}

[data-bs-theme="light"] .wp-care-trust {
    background: var(--c-surface);
    border-color: var(--c-border-accent);
    color: var(--c-text);
    box-shadow: var(--c-shadow-sm);
}

[data-bs-theme="light"] .wp-care-trust-sep {
    background: rgba(15, 23, 42, 0.10);
}

[data-bs-theme="light"] .wp-care-trust-item svg {
    color: var(--c-primary);
}

[data-bs-theme="light"] .wp-care-cta-primary {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-hover) 100%);
    color: #ffffff;
    box-shadow: var(--c-shadow-md), 0 8px 24px rgba(71, 95, 23, 0.30);
}

[data-bs-theme="light"] .wp-care-cta-primary:hover {
    box-shadow: var(--c-shadow-lg), 0 12px 32px rgba(71, 95, 23, 0.40);
    color: #ffffff;
}

[data-bs-theme="light"] .wp-care-cta-secondary {
    background: var(--c-surface);
    color: var(--c-text);
    border-color: var(--c-border);
}

[data-bs-theme="light"] .wp-care-cta-secondary:hover {
    color: var(--c-primary);
    border-color: var(--c-primary);
}

/* ============================================================
   Tools Section
   ============================================================ */
[data-bs-theme="light"] .tools-category-count {
    background: var(--c-surface);
    border-color: var(--c-border);
    color: var(--c-text-secondary);
}

[data-bs-theme="light"] .tools-category-header {
    border-bottom-color: var(--c-border-subtle);
}

[data-bs-theme="light"] .tools-category-title {
    color: var(--c-text);
}

/* ============================================================
   Info / Article-Bands (für falls Blog-Seiten geladen werden)
   ============================================================ */
[data-bs-theme="light"] .info-box {
    background: var(--c-surface);
    border: 1px solid var(--c-border-subtle);
    border-left: 4px solid var(--c-primary);
    color: var(--c-text);
    box-shadow: var(--c-shadow-sm);
}

[data-bs-theme="light"] .info-box h3,
[data-bs-theme="light"] .info-box h4 {
    color: var(--c-primary);
}

[data-bs-theme="light"] .info-box p {
    color: var(--c-text);
}

[data-bs-theme="light"] .article-band-light {
    background: var(--c-bg-soft);
    color: var(--c-text);
}

[data-bs-theme="light"] .article-band-light h2 {
    color: var(--c-primary);
}

[data-bs-theme="light"] .article-band-light h3,
[data-bs-theme="light"] .article-band-light strong {
    color: var(--c-text);
}

[data-bs-theme="light"] .article-band-light em {
    color: var(--c-text-secondary);
}

[data-bs-theme="light"] .article-band-dark {
    background: var(--c-bg);
    color: var(--c-text);
}

[data-bs-theme="light"] .article-band-dark h2,
[data-bs-theme="light"] .article-band-dark h3 {
    color: var(--c-primary);
}

/* ============================================================
   ÜBER-MICH-Seite — nur Light-Theme-spezifische Overrides
   (Basisstyles für .about-* sind in style.css; siehe dort)
   ============================================================ */
.about-stats-strip {
    background: var(--c-surface, #ffffff);
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    padding: 1.5rem 0;
}

.about-stats-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2.5rem;
}

.about-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    color: var(--c-text-secondary, #475569);
    font-weight: 500;
    flex: 1 1 auto;
    justify-content: center;
    white-space: nowrap;
}

.about-stat svg {
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--c-primary, #475F17);
}

.about-stat strong {
    color: var(--c-text, #0f172a);
    font-weight: 700;
}

.about-stat .stat-star {
    color: #f59e0b;
}

[data-bs-theme="dark"] .about-stats-strip {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .about-stat {
    color: var(--text-dark-muted);
}

[data-bs-theme="dark"] .about-stat strong {
    color: var(--text-dark);
}

[data-bs-theme="dark"] .about-stat svg {
    color: var(--hmf-green-light);
}

/* About Person Section (Foto + Text) */
.about-person {
    padding: clamp(3rem, 7vh, 5rem) 0;
}

.about-person-grid {
    display: grid;
    grid-template-columns: minmax(280px, 480px) 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.about-person-photo {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--c-shadow-lg, 0 10px 30px rgba(15, 23, 42, 0.10));
    aspect-ratio: 1 / 1;
}

.about-person-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-person-content h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 1.25rem;
}

.about-person-content p {
    font-size: 1.05rem;
    line-height: 1.75;
    margin: 0 0 1.25rem;
}

.about-person-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.75rem;
}

/* Quote / Highlight Block */
.about-quote {
    margin: clamp(2rem, 5vw, 4rem) auto;
    max-width: 820px;
    padding: 2rem 2.5rem;
    background: var(--c-surface, #ffffff);
    border-left: 4px solid var(--c-primary, #475F17);
    border-radius: 0 16px 16px 0;
    box-shadow: var(--c-shadow-sm);
    font-size: 1.15rem;
    line-height: 1.65;
    font-style: italic;
    color: var(--c-text, #0f172a);
}

.about-quote::before {
    content: "„";
    display: block;
    font-size: 3.5rem;
    line-height: 0.5;
    color: var(--c-primary, #475F17);
    font-family: var(--font-display);
    margin-bottom: 0.5rem;
}

[data-bs-theme="dark"] .about-quote {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-dark);
}

[data-bs-theme="dark"] .about-quote::before {
    color: var(--hmf-green-light);
}

/* Values / Principles Grid */
.about-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.about-value {
    padding: 1.75rem;
    background: var(--c-surface, #ffffff);
    border: 1px solid var(--c-border-subtle, rgba(15, 23, 42, 0.06));
    border-radius: 16px;
    box-shadow: var(--c-shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.about-value:hover {
    transform: translateY(-3px);
    box-shadow: var(--c-shadow-lg);
    border-color: var(--c-border-accent, rgba(71, 95, 23, 0.30));
}

.about-value-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--c-primary, #475F17) 0%, var(--c-primary-hover, #3D4F13) 100%);
    color: #fff;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
}

.about-value-icon svg {
    width: 22px;
    height: 22px;
}

.about-value h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.about-value p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    color: var(--c-text-secondary, #475569);
}

[data-bs-theme="dark"] .about-value {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .about-value h3 {
    color: var(--text-dark);
}

[data-bs-theme="dark"] .about-value p {
    color: var(--text-dark-muted);
}

/* Responsive */
@media (max-width: 767.98px) {
    .about-person-grid {
        grid-template-columns: 1fr;
    }

    .about-person-photo {
        max-width: 360px;
        margin: 0 auto;
    }

    .about-stats-row {
        justify-content: flex-start;
    }

    .about-stat {
        flex: 1 1 calc(50% - 1rem);
        font-size: 0.85rem;
    }
}