/* ============================================================
   HMF-IT Redesign-Layer 2026
   Modus: Redesign - Preserve (IA, Inhalte, Slugs unveraendert)
   Ziel: AI-Default-Aesthetik entfernen, ruhige B2B-Professionalitaet

   Gestaltungsregeln dieses Layers:
   - Eine Akzentfarbe: HMF-Gruen. Rot bleibt der Wortmarke vorbehalten.
   - Radius-System: Interaktiv (Buttons, Badges, Inputs) = 10px,
     Container (Cards, Panels, Bilder) = 14px, Kreise nur fuer
     Avatare/Slider-Dots mit Funktion.
   - Keine Neon-Glows, kein Gradient-Text, keine Blur-Blobs,
   - kein Glassmorphism-Default, kein Pop-Scale-Hover.
   - Schatten: weich, dezent getoent, max. 2 Ebenen.
   Muss als LETZTES Stylesheet geladen werden.
   ============================================================ */

:root {
    /* Glows komplett neutralisieren */
    --glow-green: 0 0 0 rgba(0, 0, 0, 0);
    --glow-green-strong: 0 0 0 rgba(0, 0, 0, 0);
    --glow-red: 0 0 0 rgba(0, 0, 0, 0);
    --glow-red-strong: 0 0 0 rgba(0, 0, 0, 0);

    /* Schatten-System: leiser, kuerzer */
    --shadow-sm: 0 1px 2px rgba(10, 12, 8, 0.18);
    --shadow-md: 0 2px 8px rgba(10, 12, 8, 0.22);
    --shadow-lg: 0 6px 20px rgba(10, 12, 8, 0.26);
    --shadow-xl: 0 10px 28px rgba(10, 12, 8, 0.30);
    --shadow-2xl: 0 14px 36px rgba(10, 12, 8, 0.32);
    --shadow-light-sm: 0 1px 2px rgba(30, 34, 22, 0.06);
    --shadow-light-md: 0 2px 8px rgba(30, 34, 22, 0.07);
    --shadow-light-lg: 0 6px 20px rgba(30, 34, 22, 0.08);
    --shadow-light-xl: 0 10px 28px rgba(30, 34, 22, 0.10);
    --shadow-card-dark: 0 4px 16px rgba(8, 10, 6, 0.32);
    --shadow-card-light: 0 4px 16px rgba(30, 34, 22, 0.07);

    /* Gradients auf Flaechen: durch ruhige Vollfarben ersetzt */
    --gradient-primary: linear-gradient(0deg, var(--hmf-green) 0%, var(--hmf-green) 100%);
    --gradient-secondary: linear-gradient(0deg, var(--hmf-green-dark) 0%, var(--hmf-green-dark) 100%);

    /* Radius-System */
    --radius-interactive: 10px;
    --radius-container: 14px;
    --panel-radius: var(--radius-container);
    --panel-radius-lg: var(--radius-container);

    /* Glas-Surfaces: Blur entfaellt, Translunzenz-Semantik bleibt erhalten
       (Banding-System rechnet mit durchscheinenden Innenflaechen) */
    --glass-bg-dark: rgba(255, 255, 255, 0.05);
    --glass-border-dark: rgba(255, 255, 255, 0.10);
    --glass-bg-light: rgba(20, 24, 14, 0.04);
    --glass-border-light: rgba(20, 24, 14, 0.10);
    --surface-dark-elevated: #15151c;
    --surface-dark-elevated-2: #191922;
    --surface-dark-hover: #1c1c26;
    --surface-light-elevated: #ffffff;
    --surface-light-elevated-2: #fbfbfc;
    --surface-light-hover: #f6f7f4;

    /* Sektionen ohne Gruen-Verlauf-Schimmer */
    --section-bg-dark-accent: #121218;
    --section-bg-light-accent: #f7f8f5;
}

/* ------------------------------------------------------------
   1. AI-Tells entfernen: Blobs, Eyebrows, Floating Cards
   ------------------------------------------------------------ */
.hero-bg-shapes,
.shape,
.floating-card,
.section-tag,
.wp-care-eyebrow {
    display: none !important;
}

/* ------------------------------------------------------------
   2. Typografie: ruhiger, weniger Geschrei
   ------------------------------------------------------------ */
.hero-title {
    font-size: clamp(2.25rem, 4.6vw, 3.4rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.018em;
}

.section-title,
h2.section-title {
    font-weight: 700;
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    letter-spacing: -0.015em;
}

.section-subtitle {
    max-width: 62ch;
}

/* Gradient-Text -> solide Akzentfarbe (Betonung in derselben Familie) */
.gradient-text,
.gradient-text-red {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    filter: none !important;
    color: var(--hmf-green-light);
}
[data-bs-theme="light"] .gradient-text,
[data-bs-theme="light"] .gradient-text-red {
    color: var(--hmf-green-dark);
}
/* Auf weissen Baendern (Dark Theme + banding) braucht der Akzent
   die dunkle Gruen-Stufe: 6.5:1 auf Weiss statt 2.9:1 */
[data-bs-theme="dark"] body.banded .wp-care-section .gradient-text,
[data-bs-theme="dark"] body.banded .about-section .gradient-text,
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .gradient-text {
    color: var(--hmf-green-dark);
}

/* ------------------------------------------------------------
   3. Buttons: solide, flach, klare Zustaende
   ------------------------------------------------------------ */
.btn-primary-custom,
.btn-secondary-custom,
.btn-outline-custom,
.btn-cta {
    border-radius: var(--radius-interactive);
    font-weight: 600;
    padding: 0.85rem 1.6rem;
    text-shadow: none !important;
    transition: background-color 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.btn-primary-custom,
.btn-cta {
    background: var(--hmf-green-dark) !important;
    color: #ffffff !important;
    box-shadow: var(--shadow-sm);
    border: 1px solid transparent;
}
.btn-primary-custom:hover,
.btn-primary-custom:focus,
.btn-cta:hover,
.btn-cta:focus {
    background: #475219 !important;
    color: #ffffff !important;
    box-shadow: var(--shadow-md);
}
[data-bs-theme="dark"] .btn-primary-custom,
[data-bs-theme="dark"] .btn-cta {
    background: var(--hmf-green-light) !important;
    color: #12120a !important;
}
[data-bs-theme="dark"] .btn-primary-custom:hover,
[data-bs-theme="dark"] .btn-primary-custom:focus,
[data-bs-theme="dark"] .btn-cta:hover,
[data-bs-theme="dark"] .btn-cta:focus {
    background: #9cb33d !important;
    color: #12120a !important;
}

/* Sekundaer: neutrale Outline statt rotem Glow-Button */
.btn-secondary-custom,
.btn-outline-custom {
    background: transparent !important;
    border: 1px solid var(--border-light-strong) !important;
    color: var(--text-light) !important;
    box-shadow: none !important;
}
.btn-secondary-custom:hover,
.btn-secondary-custom:focus,
.btn-outline-custom:hover,
.btn-outline-custom:focus {
    background: rgba(86, 99, 32, 0.08) !important;
    border-color: var(--hmf-green-dark) !important;
    color: var(--text-light) !important;
}
[data-bs-theme="dark"] .btn-secondary-custom,
[data-bs-theme="dark"] .btn-outline-custom {
    border-color: var(--border-dark-strong) !important;
    color: var(--text-dark) !important;
}
[data-bs-theme="dark"] .btn-secondary-custom:hover,
[data-bs-theme="dark"] .btn-secondary-custom:focus,
[data-bs-theme="dark"] .btn-outline-custom:hover,
[data-bs-theme="dark"] .btn-outline-custom:focus {
    background: rgba(138, 158, 51, 0.12) !important;
    border-color: var(--hmf-green-light) !important;
    color: var(--text-dark) !important;
}

/* Pop-Hover stilllegen: dezenter 1px-Lift statt Scale + Glow */
@media (prefers-reduced-motion: no-preference) {
    .btn-primary-custom:hover, .btn-primary-custom:focus,
    .btn-secondary-custom:hover, .btn-secondary-custom:focus,
    .btn-outline-custom:hover, .btn-outline-custom:focus,
    .btn-cta:hover, .btn-cta:focus {
        transform: translateY(-1px);
    }
    .btn-primary-custom:active, .btn-cta:active,
    .btn-secondary-custom:active, .btn-outline-custom:active {
        transform: translateY(0) scale(0.99);
    }
}

/* ------------------------------------------------------------
   4. Badges, Tags, Stats
   ------------------------------------------------------------ */
.hero-badge {
    border-radius: var(--radius-interactive);
    background: transparent;
    border: 1px solid var(--border-dark-medium);
    color: var(--text-dark-muted);
    font-weight: 500;
    box-shadow: none;
    backdrop-filter: none;
}
[data-bs-theme="light"] .hero-badge {
    border-color: var(--border-light-medium);
    color: var(--text-light-muted);
    background: transparent;
}
.hero-badge svg { color: var(--hmf-green-light); }
[data-bs-theme="light"] .hero-badge svg { color: var(--hmf-green-dark); }

.blog-tag,
.badge,
.tool-badge {
    border-radius: var(--radius-interactive);
}

.stat-number {
    color: var(--text-dark);
    font-weight: 700;
}
[data-bs-theme="light"] .stat-number { color: var(--text-light); }
.stat-item {
    border-left: 2px solid var(--hmf-green);
    padding-left: 0.9rem;
}

/* ------------------------------------------------------------
   5. Cards: solide Surfaces, ein Akzent, kein Glas
   ------------------------------------------------------------ */
.service-card,
.tool-card,
.testimonial-card,
.blog-card,
.about-feature,
.cta-container,
.contact-card,
.referenz-card,
.pricing-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: var(--radius-container);
    background: var(--surface-dark-elevated);
    border: 1px solid var(--border-dark-subtle);
    box-shadow: var(--shadow-card-dark);
}
[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"] .cta-container,
[data-bs-theme="light"] .contact-card,
[data-bs-theme="light"] .referenz-card,
[data-bs-theme="light"] .pricing-card {
    background: var(--surface-light-elevated);
    border-color: var(--border-light-subtle);
    box-shadow: var(--shadow-card-light);
}

/* Hover: Border-Farbe + leiser Lift. Keine Glows, keine Gradient-Topbars */
.service-card::before,
.service-card-alt::before {
    display: none !important;
}
.service-card:hover, .service-card:focus-within,
.service-card-alt:hover, .service-card-alt:focus-within,
.tool-card:hover, .tool-card:focus-within,
.testimonial-card:hover, .testimonial-card:focus-within,
.blog-card:hover, .blog-card:focus-within {
    border-color: var(--hmf-green) !important;
    box-shadow: var(--shadow-lg) !important;
    background: var(--surface-dark-hover);
}
[data-bs-theme="light"] .service-card:hover,
[data-bs-theme="light"] .service-card:focus-within,
[data-bs-theme="light"] .service-card-alt:hover,
[data-bs-theme="light"] .service-card-alt:focus-within,
[data-bs-theme="light"] .tool-card:hover,
[data-bs-theme="light"] .tool-card:focus-within,
[data-bs-theme="light"] .testimonial-card:hover,
[data-bs-theme="light"] .testimonial-card:focus-within,
[data-bs-theme="light"] .blog-card:hover,
[data-bs-theme="light"] .blog-card:focus-within {
    border-color: var(--hmf-green-dark) !important;
    box-shadow: var(--shadow-light-lg) !important;
    background: var(--surface-light-hover);
}
@media (prefers-reduced-motion: no-preference) {
    .service-card:hover, .tool-card:hover,
    .testimonial-card:hover, .blog-card:hover {
        transform: translateY(-2px);
    }
}

/* Fokus-Sichtbarkeit der Cards bleibt erhalten (A11y) */
.service-card:focus-within,
.tool-card:focus-within,
.blog-card:focus-within,
.testimonial-card:focus-within {
    box-shadow: var(--shadow-lg), var(--focus-ring-shadow) !important;
}

/* Icon-Kacheln: ein Akzent, ruhige Flaeche statt Verlauf */
.service-icon,
.tool-icon,
.about-icon {
    background: rgba(123, 142, 46, 0.14) !important;
    border: 1px solid rgba(123, 142, 46, 0.28);
    border-radius: var(--radius-interactive);
}
.service-icon svg, .tool-icon svg, .about-icon svg {
    color: var(--hmf-green-light) !important;
}
[data-bs-theme="light"] .service-icon svg,
[data-bs-theme="light"] .tool-icon svg,
[data-bs-theme="light"] .about-icon svg {
    color: var(--hmf-green-dark) !important;
}
/* Rote Alt-Varianten auf die eine Akzentfarbe vereinheitlichen */
.service-card-alt .service-icon { background: rgba(123, 142, 46, 0.14) !important; }

/* ------------------------------------------------------------
   6. Hero-Bild & Medien
   ------------------------------------------------------------ */
.hero-image,
.slider-container,
.slide img {
    border-radius: var(--radius-container);
}
.slider-container {
    box-shadow: var(--shadow-lg);
}
.slider-dot {
    border-radius: 50%; /* funktionale Dots, kein Deko-Element */
}

/* ------------------------------------------------------------
   7. Sektionen: klare Flaechen statt Schimmer-Verlaeufe
   ------------------------------------------------------------ */
.section-accent,
.about-section.section-accent {
    background: var(--section-bg-dark-accent);
}
[data-bs-theme="light"] .section-accent,
[data-bs-theme="light"] .about-section.section-accent {
    background: var(--section-bg-light-accent);
}
.cta-section,
.cta-container {
    background-image: none !important;
}

/* ------------------------------------------------------------
   8. Bewegung: kuerzer, kleiner, gezielter (AOS-Beruhigung)
   ------------------------------------------------------------ */
[data-aos] {
    transition-duration: 0.45s !important;
}
[data-aos^="fade-up"] { transform: translate3d(0, 14px, 0); }
[data-aos^="fade-left"] { transform: translate3d(18px, 0, 0); }
[data-aos^="fade-right"] { transform: translate3d(-18px, 0, 0); }
@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ------------------------------------------------------------
   8b. Headings: kein Text-Shadow-Halo im Dark Mode
   ------------------------------------------------------------ */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2 {
    text-shadow: none;
}
.page-title {
    font-weight: 700;
    letter-spacing: -0.015em;
}
.cta-title, .cta-text {
    text-shadow: none;
}

/* ------------------------------------------------------------
   8c. WP-Care-Seite: CTAs ins Button-System eingliedern
   ------------------------------------------------------------ */
.wp-care-cta-primary,
.wp-care-cta-secondary {
    border-radius: var(--radius-interactive);
    font-weight: 600;
}
.wp-care-cta-primary {
    background: var(--hmf-green-dark);
    box-shadow: var(--shadow-sm);
}
.wp-care-cta-primary:hover,
.wp-care-cta-primary:focus {
    background: #475219;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
[data-bs-theme="dark"] .wp-care-cta-primary {
    background: var(--hmf-green-light);
    color: #12120a;
}
[data-bs-theme="dark"] .wp-care-cta-primary:hover,
[data-bs-theme="dark"] .wp-care-cta-primary:focus {
    background: #9cb33d;
    color: #12120a;
}
.wp-care-cta-secondary {
    border-width: 1px;
}
.wp-care-card,
.wp-care-step {
    border-radius: var(--radius-container);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ------------------------------------------------------------
   8d. WP-Care-Section (Startseite): eine Designsprache fuer
   Cards, USP und Trust-Zeile — statt Pill-Kapsel, Mono-Schrift,
   Gradient-Icons mit Glow und Blockquote-Kante
   ------------------------------------------------------------ */

/* Icons: flache Akzent-Tint-Flaeche statt Gradient + Glow */
.wp-care-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-interactive);
    background: rgba(138, 158, 51, 0.16);
    color: var(--hmf-green-light);
    box-shadow: none;
}
[data-bs-theme="light"] .wp-care-icon,
[data-bs-theme="dark"] body.banded .wp-care-icon {
    background: rgba(107, 142, 35, 0.12);
    color: var(--hmf-green-dark);
}
.wp-care-icon svg {
    width: 24px;
    height: 24px;
}

/* Cards: kaum sichtbare Kante, weicher Schatten, mehr Innenraum */
.wp-care-card {
    padding: 2rem;
}
.wp-care-card:hover {
    border-color: var(--glass-border-dark);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
[data-bs-theme="light"] .wp-care-card,
[data-bs-theme="dark"] body.banded .wp-care-card {
    background: #ffffff;
    border: 1px solid rgba(30, 34, 22, 0.06);
    box-shadow: var(--shadow-light-sm);
}
[data-bs-theme="light"] .wp-care-card:hover,
[data-bs-theme="dark"] body.banded .wp-care-card:hover {
    border-color: rgba(30, 34, 22, 0.12);
    box-shadow: var(--shadow-light-lg);
    transform: translateY(-2px);
}

/* USP: zentriertes Tint-Panel in der Sprache der Cards
   statt Blockquote mit linker Kante */
.wp-care-usp {
    max-width: 820px;
    padding: 2rem 2.5rem;
    border: 0;
    border-radius: var(--radius-container);
    background: rgba(255, 255, 255, 0.04);
    text-align: center;
}
[data-bs-theme="light"] .wp-care-usp,
[data-bs-theme="dark"] body.banded .wp-care-usp {
    background: rgba(107, 142, 35, 0.08);
    border: 0;
    box-shadow: none;
}
.wp-care-usp-title {
    font-size: 1.15rem;
}
.wp-care-usp-text {
    max-width: 58ch;
    margin: 0 auto;
}

/* Trust: schlichte Microtrust-Zeile unter den CTAs
   statt Mono-Pill mit Trennstrichen */
.wp-care-trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 2.25rem;
    margin: 2rem 0 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dark-muted);
}
[data-bs-theme="light"] .wp-care-trust {
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--c-text-secondary, #4a4a4a);
}
[data-bs-theme="dark"] body.banded .wp-care-trust {
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--band-tone-text-secondary, #4a4a4a);
}
[data-bs-theme="dark"] body.banded .wp-care-trust-item svg {
    color: var(--hmf-green-dark);
}
.wp-care-trust-item svg {
    width: 15px;
    height: 15px;
}

/* ------------------------------------------------------------
   9. Navigation & Footer: ruhig, ohne Glas-Blur-Pflicht
   ------------------------------------------------------------ */
.navbar {
    box-shadow: none;
    border-bottom: 1px solid var(--border-dark-subtle);
}
[data-bs-theme="light"] .navbar {
    border-bottom-color: var(--border-light-subtle);
}
.footer-badge {
    border-radius: var(--radius-interactive);
    box-shadow: none;
}
/* ------------------------------------------------------------
   10. Banding-Korrekturen: Lesbarkeit auf weissen Baendern
   (Dark Theme + body.banded macht gerade Sektionen hell)
   ------------------------------------------------------------ */
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .btn-outline-custom,
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .btn-secondary-custom,
[data-bs-theme="dark"] body.banded .wp-care-section .btn-outline-custom,
[data-bs-theme="dark"] body.banded .about-section .btn-outline-custom {
    color: #1f2415 !important;
    border-color: rgba(31, 36, 21, 0.40) !important;
    background: transparent !important;
}
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .btn-outline-custom:hover,
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .btn-outline-custom:focus,
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .btn-secondary-custom:hover,
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .btn-secondary-custom:focus {
    color: #1f2415 !important;
    border-color: var(--hmf-green-dark) !important;
    background: rgba(86, 99, 32, 0.08) !important;
}

[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .contact-method {
    background: rgba(20, 24, 14, 0.04);
    border-color: rgba(20, 24, 14, 0.12);
}
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .contact-method .contact-label {
    color: #4a4a4a;
}
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .contact-method .contact-value {
    color: #1a1a1a;
}

/* ------------------------------------------------------------
   11. WCAG-Kontrastfixes (axe-core-Befunde, inkl. Altbestand)
   ------------------------------------------------------------ */
/* Gruener Akzent auf weissen Flaechen braucht die dunkle Stufe
   (#7b8e2e/#8a9e33 auf Weiss: 3.0-3.7:1 -> #566320: 6.5:1) */
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .gradient-text-red,
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .card-link,
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .accordion-button,
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) a[href$="datenschutz.html"],
[data-bs-theme="dark"] body.banded .wp-care-section .card-link,
[data-bs-theme="dark"] body.banded .about-section .card-link,
[data-bs-theme="light"] .card-link {
    color: var(--hmf-green-dark) !important;
}

/* Gedimmter Hell-Text (#b8b8b8) auf weissen Baendern -> dunkles Muted */
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .response-time,
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .response-time span,
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .trust-stat .label,
[data-bs-theme="dark"] body.banded .wp-care-section .trust-stat .label,
[data-bs-theme="dark"] body.banded .page-header + * .trust-stat .label {
    color: #4a4a4a !important;
}
/* Trust-Stats im Page-Header-Band (Wartungsseite) */
[data-bs-theme="dark"] body.banded .trust-stats .label {
    color: #4a4a4a !important;
}

/* Referenzen-Filter: im Light Theme dunkles Muted statt #b8b8b8 */
[data-bs-theme="light"] .filter-btn,
[data-bs-theme="light"] .filter-info {
    color: var(--text-light-muted) !important;
}

/* Mittelgruen (#7b8e2e) auf dunklen Flaechen knapp unter AA (4.3:1)
   -> helle Gruen-Stufe (6.8:1). Betrifft TOC-Links, Szenario-Labels
   und Prozess-Deliverables auf wordpress-webdesign.html */
[data-bs-theme="dark"] .toc-nav a,
[data-bs-theme="dark"] .toc-nav a:hover,
[data-bs-theme="dark"] .toc-nav a.active,
[data-bs-theme="dark"] .scenario-card .scenario-type,
[data-bs-theme="dark"] .process-step .deliverable {
    color: var(--hmf-green-light);
}
[data-bs-theme="dark"] .toc-nav a {
    color: var(--text-dark-muted);
}

/* ------------------------------------------------------------
   12. Kontaktformular: Sichtbarkeit der Felder (WCAG 1.4.11)
   Die Formular-Karte ist in beiden Themes weiss (Light Theme
   direkt, Dark Theme via Banding). Felder bekommen deshalb
   eine robuste helle Behandlung mit >=3:1 Rahmenkontrast.
   ------------------------------------------------------------ */
.contact-form .form-control,
.contact-form select.form-control,
.contact-form textarea.form-control,
[data-bs-theme="dark"] body.banded .contact-form .form-control,
[data-bs-theme="dark"] body.banded .contact-form select.form-control,
[data-bs-theme="dark"] body.banded .contact-form textarea.form-control {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border: 2px solid #767676 !important; /* 4.54:1 auf Weiss */
}
.contact-form .form-control:hover,
[data-bs-theme="dark"] body.banded .contact-form .form-control:hover {
    border-color: var(--hmf-green-dark) !important;
}
.contact-form .form-control:focus,
[data-bs-theme="dark"] body.banded .contact-form .form-control:focus {
    border-color: var(--hmf-green-dark) !important;
    box-shadow: 0 0 0 3px rgba(86, 99, 32, 0.25) !important;
}
.contact-form .form-control::placeholder,
[data-bs-theme="dark"] body.banded .contact-form .form-control::placeholder {
    color: #6a6a6a !important;   /* 4.6:1 auf Weiss */
    opacity: 1 !important;
}
.contact-form .form-control.error,
.contact-form .form-control.is-invalid,
[data-bs-theme="dark"] body.banded .contact-form .form-control.error,
[data-bs-theme="dark"] body.banded .contact-form .form-control.is-invalid {
    border-color: var(--hmf-red) !important;
}

/* Einwilligungs-Checkbox: sichtbarer Rahmen statt 10%-Weiss */
.contact-form .checkbox-custom {
    border: 2px solid #5a5a5a !important;  /* 7:1 auf Weiss */
    background: #ffffff;
}
.contact-form .checkbox-label:hover .checkbox-custom,
.contact-form .checkbox-label input:focus-visible + .checkbox-custom {
    border-color: var(--hmf-green-dark) !important;
}
.contact-form .checkbox-label input:focus-visible + .checkbox-custom {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}
.contact-form .checkbox-label input:checked + .checkbox-custom {
    background: var(--hmf-green-dark) !important;   /* 6.5:1, weisser Haken klar sichtbar */
    border-color: var(--hmf-green-dark) !important;
}

/* Browser-Autofill: Chrome erzwingt sonst grauen Hintergrund mit
   Theme-Textfarbe (im Dark Theme: weisser Text auf Grau = unlesbar) */
.contact-form input:-webkit-autofill,
.contact-form input:-webkit-autofill:hover,
.contact-form input:-webkit-autofill:focus,
.contact-form select:-webkit-autofill,
.contact-form textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #1a1a1a !important;
    caret-color: #1a1a1a;
    transition: background-color 9999s ease-in-out 0s;
}

/* ------------------------------------------------------------
   13. Tastatur-Navigation: per JS geoeffnete Untermenues sichtbar
   (die bestehende .show-Regel gilt nur innerhalb einer Desktop-
   Media-Query; Tastatur muss ueberall funktionieren)
   ------------------------------------------------------------ */
.dropdown-submenu.show > .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    display: block;
}
/* Reine CSS-:hover-Einblendung der Untermenues deaktivieren:
   die offenen Panels ueberlappen sich und halten den :hover-
   Zustand mehrerer Eintraege gleichzeitig fest (alle Submenues
   sichtbar). Einzige Wahrheitsquelle ist jetzt die .show-Klasse,
   die das JS (Hover mit Verzoegerung, Klick, Tastatur) mit
   Geschwister-Schliessung verwaltet. */
@media (min-width: 992px) {
    .dropdown-submenu:hover:not(.show) > .dropdown-menu {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* ------------------------------------------------------------
   14. Prozess-Schritt-Zahlen: sichtbar statt 15%-Geisterziffer
   (ki-loesungen, wordpress-agentur, online-marketing, branding,
   wordpress, wordpress-wartung). Konturziffer: deutlich sichtbar,
   ohne den darueberliegenden Text zu stoeren.
   ------------------------------------------------------------ */
.prozess-step .step-bg {
    color: transparent !important;
    -webkit-text-stroke: 2px rgba(138, 158, 51, 0.85);
    paint-order: stroke;
}
[data-bs-theme="light"] .prozess-step .step-bg {
    -webkit-text-stroke: 2px rgba(86, 99, 32, 0.65);
}
/* Fallback fuer Browser ohne text-stroke: kraeftige Vollfarbe */
@supports not (-webkit-text-stroke: 1px black) {
    .prozess-step .step-bg {
        color: rgba(138, 158, 51, 0.45) !important;
    }
    [data-bs-theme="light"] .prozess-step .step-bg {
        color: rgba(86, 99, 32, 0.30) !important;
    }
}

/* ------------------------------------------------------------
   15. Gruene CTA-Bloecke (cta-box auf Blog/Tool-Seiten,
   cta-container auf der Startseite)
   Vorher: weisser Text auf Mittelgruen (3.7:1, AA-Fail) und durch
   Sektion 3 dieses Layers ein gruener Button auf gruenem Kasten.
   Jetzt: Dunkelgruene Flaeche (Weiss darauf: 6.5:1) + inverser
   weisser Button (10:1). Diese Regeln stehen NACH Sektion 3 und
   gewinnen per Spezifitaet + Reihenfolge.
   ------------------------------------------------------------ */
.cta-box,
.cta-container {
    background: var(--hmf-green-dark) !important;   /* #566320 */
    border-radius: var(--radius-container);
    box-shadow: var(--shadow-lg) !important;
    border: none;
}
/* Rotierender Licht-Overlay (Endlos-Animation) und Glanz-Verlauf:
   Deko-Effekte ohne Funktion, stoeren die Flaechenruhe -> aus */
.cta-container::before,
.cta-container::after {
    display: none !important;
    animation: none !important;
}
.cta-box h3,
.cta-box p,
.cta-container .cta-title,
.cta-container .cta-text {
    color: #ffffff !important;
}
.cta-box p,
.cta-container .cta-text {
    color: rgba(255, 255, 255, 0.92) !important;    /* 5.9:1 auf #566320 */
}

/* Inverser Button: weiss auf Dunkelgruen, in BEIDEN Themes */
.cta-box .btn-cta,
.cta-container .btn-cta,
.cta-box .btn-primary-custom,
.cta-container .btn-primary-custom,
[data-bs-theme="dark"] .cta-box .btn-cta,
[data-bs-theme="dark"] .cta-container .btn-cta,
[data-bs-theme="light"] .cta-box .btn-cta,
[data-bs-theme="light"] .cta-container .btn-cta {
    background: #ffffff !important;
    color: #3a4517 !important;                      /* 10:1 auf Weiss */
    border-radius: var(--radius-interactive);
    box-shadow: var(--shadow-sm) !important;
}
.cta-box .btn-cta:hover, .cta-box .btn-cta:focus,
.cta-container .btn-cta:hover, .cta-container .btn-cta:focus,
[data-bs-theme="dark"] .cta-box .btn-cta:hover,
[data-bs-theme="dark"] .cta-box .btn-cta:focus,
[data-bs-theme="dark"] .cta-container .btn-cta:hover,
[data-bs-theme="dark"] .cta-container .btn-cta:focus {
    background: #eef0e4 !important;
    color: #2c350f !important;
    box-shadow: var(--shadow-md) !important;
}
/* Sekundaer-Buttons im CTA-Block: weisse Outline auf Dunkelgruen */
.cta-container .btn-outline-custom,
[data-bs-theme="dark"] .cta-container .btn-outline-custom,
[data-bs-theme="light"] .cta-container .btn-outline-custom {
    border-color: rgba(255, 255, 255, 0.75) !important;
    color: #ffffff !important;
    background: transparent !important;
}
.cta-container .btn-outline-custom:hover,
.cta-container .btn-outline-custom:focus {
    border-color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}
/* Fokus-Ring auf Dunkelgruen sichtbar machen */
.cta-box .btn-cta:focus-visible,
.cta-container .btn-cta:focus-visible,
.cta-container .btn-outline-custom:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 3px;
}

/* ------------------------------------------------------------
   16. Outline-Variante des CTA-Buttons wiederherstellen
   (Sektion 3 fuellt .btn-cta gruen und hat die auf mehreren
   Seiten genutzte Klasse .btn-cta-outline mit ueberschrieben)
   ------------------------------------------------------------ */
.btn-cta.btn-cta-outline,
[data-bs-theme="dark"] .btn-cta.btn-cta-outline {
    background: transparent !important;
    color: var(--text-dark) !important;
    border: 1px solid var(--border-dark-strong) !important;
    box-shadow: none !important;
}
[data-bs-theme="light"] .btn-cta.btn-cta-outline {
    color: var(--text-light) !important;
    border-color: var(--border-light-strong) !important;
}
.btn-cta.btn-cta-outline:hover,
.btn-cta.btn-cta-outline:focus,
[data-bs-theme="dark"] .btn-cta.btn-cta-outline:hover,
[data-bs-theme="dark"] .btn-cta.btn-cta-outline:focus {
    background: rgba(138, 158, 51, 0.12) !important;
    border-color: var(--hmf-green-light) !important;
    color: var(--text-dark) !important;
}
[data-bs-theme="light"] .btn-cta.btn-cta-outline:hover,
[data-bs-theme="light"] .btn-cta.btn-cta-outline:focus {
    background: rgba(86, 99, 32, 0.08) !important;
    border-color: var(--hmf-green-dark) !important;
    color: var(--text-light) !important;
}
/* Innerhalb der dunkelgruenen CTA-Bloecke: weisse Outline */
.cta-box .btn-cta.btn-cta-outline,
.cta-container .btn-cta.btn-cta-outline,
[data-bs-theme="dark"] .cta-box .btn-cta.btn-cta-outline,
[data-bs-theme="dark"] .cta-container .btn-cta.btn-cta-outline,
[data-bs-theme="light"] .cta-box .btn-cta.btn-cta-outline,
[data-bs-theme="light"] .cta-container .btn-cta.btn-cta-outline {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    color: #ffffff !important;
}
.cta-box .btn-cta.btn-cta-outline:hover,
.cta-box .btn-cta.btn-cta-outline:focus,
.cta-container .btn-cta.btn-cta-outline:hover,
.cta-container .btn-cta.btn-cta-outline:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* ------------------------------------------------------------
   17. Navigation einzeilig zwischen 992px und 1440px
   ("Ueber mich" brach bei ~1350px in zwei Zeilen um)
   ------------------------------------------------------------ */
@media (min-width: 992px) and (max-width: 1439.98px) {
    .nav-link {
        padding: 0.5rem 0.6rem !important;
        font-size: 0.95rem;
    }
    .navbar .nav-item {
        white-space: nowrap;
    }
}
@media (min-width: 992px) {
    .navbar .nav-link {
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------
   18. Tool-Hilfeseiten: Kontrastfixes (Altbestand)
   cookie-scanner-hilfe: Severity-Badges 1.6-4.1:1,
   Ghost-Button im CTA-Block; inp-analyse: Blau-Akzent + Muted-Text
   ------------------------------------------------------------ */
/* Severity-Badges: Textfarbe pro Theme auf >=4.5:1 gegen den
   getoenten Badge-Hintergrund anheben */
.severity-critical { color: #f1948a !important; }   /* 6.0:1 dark */
.severity-warning  { color: #f7c66a !important; }
.severity-info     { color: #85c1e9 !important; }   /* 5.7:1 dark */
.severity-ok       { color: #b3c66a !important; }
[data-bs-theme="light"] .severity-critical { color: #922b21 !important; }  /* 5.6:1 */
[data-bs-theme="light"] .severity-warning  { color: #7e5109 !important; }
[data-bs-theme="light"] .severity-info     { color: #1a5276 !important; }
[data-bs-theme="light"] .severity-ok       { color: #475219 !important; }

/* Ghost-Button im (jetzt dunkelgruenen) CTA-Block: solide weiss
   wie alle CTA-Primaerbuttons, statt 20%-Weiss-Flaeche */
.cta-box .btn,
.cta-box a.btn {
    background: #ffffff !important;
    color: #3a4517 !important;
    border: none !important;
}
.cta-box .btn:hover,
.cta-box .btn:focus {
    background: #eef0e4 !important;
    color: #2c350f !important;
}

/* inp-analyse: Blau-Akzent themesicher */
.info-hint strong {
    color: #79a8f5 !important;      /* >=4.5:1 auf dunklen Panels */
}
[data-bs-theme="light"] .info-hint strong {
    color: #1d4ed8 !important;      /* 6.3:1 auf hellem Panel */
}
/* Muted-Hellgrau auf weisser Result-Karte (Light Theme) */
[data-bs-theme="light"] .result-card p,
[data-bs-theme="light"] .result-card .text-muted {
    color: var(--text-light-muted) !important;
}