/* ============================================================
   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;
}

/* Ausnahme (23.07.2026, Nutzerwunsch): Die "// Kostenlose Tools"-Pill in der
   Online-Tools-Sektion der Startseite bleibt sichtbar. */
#tools .section-tag {
    display: inline-block !important;
}

/* ============================================================
   1b. GROESSEN-ANPASSUNG 22.07.2026 — SCHNELL ZURUECKDREHBAR
   Auf breiten Monitoren wirkte alles klein/"verloren": Bootstrap
   deckelt .container ab 1400px bei 1320px, die Section-Titel bei
   2.4rem.

   >>> ZURUECKSETZEN: NUR die zwei Werte unten auf "alt" stellen. <<<
   Sonst wurde fuer die Vergroesserung nichts geaendert.
   ============================================================ */
:root {
    --layout-max: 1320px;          /* zurückgesetzt 25.07: Standard (Vergrößerung 1440px zurückgenommen) */
    --section-title-max: 2.4rem;   /* zurückgesetzt 25.07: Standard (war testweise 2.58rem) */
}
@media (min-width: 1400px) {
    .container { max-width: var(--layout-max, 1320px); }
}

/* ------------------------------------------------------------
   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;
    /* Obergrenze siehe --section-title-max in Block 1b (alt: 2.4rem) */
    font-size: clamp(1.7rem, 3.4vw, var(--section-title-max, 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; }

/* About-Feature-Karten: Icon-Kaestchen raus, dezenter Akzentbalken links.
   Wirkt seitenuebergreifend einheitlich – auch dort, wo das Icon-Markup
   bereits entfernt wurde. Zeitgemaesser, weniger "Baukasten"-Optik. */
.about-feature .about-icon { display: none !important; }
.about-feature {
    border-left: 3px solid var(--hmf-green) !important;
}
.about-feature:hover, .about-feature:focus-within {
    border-left-color: var(--hmf-green-light) !important;
}
/* Auf schmalen Screens zentriert die Karte – Akzent dann oben statt links,
   damit der Balken nicht "ins Leere" zeigt. */
@media (max-width: 575.98px) {
    .about-feature {
        border-left-width: 1px !important;
        border-top: 3px solid var(--hmf-green) !important;
    }
}

/* Benefit-Cards (Vorteile) auf denselben Stil bringen wie about-feature:
   Icon-Kreis raus, dezenter Akzentbalken links, linksbuendig, Titel in
   gleicher Groesse/Dicke. Seitenuebergreifend einheitlich. */
.benefit-card .icon { display: none !important; }
.benefit-card {
    text-align: left !important;
    border-left: 3px solid var(--hmf-green) !important;
}
.benefit-card:hover, .benefit-card:focus-within {
    border-left-color: var(--hmf-green-light) !important;
}
.benefit-card h3 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.4rem !important;
}
.benefit-card p { font-size: 0.95rem !important; line-height: 1.6; }
@media (max-width: 575.98px) {
    .benefit-card {
        text-align: left !important;
        border-left-width: 1px !important;
        border-top: 3px solid var(--hmf-green) !important;
    }
}

/* service-overview-card (Landingpages, bisher pro Seite inline mit abweichendem
   Look) ins gemeinsame Karten-System holen: solide Flaeche, dezenter Rand,
   einheitlicher Hover. !important, weil die Seiten diese Karte per Inline-<style>
   ueberschreiben. Ergebnis: alle Karten-Typen sehen identisch aus. */
.service-overview-card {
    background: var(--surface-dark-elevated) !important;
    border: 1px solid var(--border-dark-subtle) !important;
    border-radius: var(--radius-container) !important;
    box-shadow: var(--shadow-card-dark) !important;
}
[data-bs-theme="light"] .service-overview-card {
    background: var(--surface-light-elevated) !important;
    border-color: var(--border-light-subtle) !important;
    box-shadow: var(--shadow-card-light) !important;
}
.service-overview-card:hover, .service-overview-card:focus-within {
    border-color: var(--hmf-green) !important;
    box-shadow: var(--shadow-lg) !important;
    background: var(--surface-dark-hover) !important;
}
[data-bs-theme="light"] .service-overview-card:hover,
[data-bs-theme="light"] .service-overview-card:focus-within {
    border-color: var(--hmf-green-dark) !important;
    background: var(--surface-light-hover) !important;
}
@media (prefers-reduced-motion: no-preference) {
    .service-overview-card:hover { transform: translateY(-2px); }
}
.service-overview-card .card-icon { display: none !important; }
/* Karten-Titel brauchen eine EXPLIZITE Farbe: ohne color erbt der h3 in
   gebänderten (hellen) Sektionen eine dunkle Textfarbe und wird auf der
   dunklen Karte unlesbar. Pro Theme passend zur Kartenflaeche setzen. */
.service-overview-card h3 { color: var(--text-dark) !important; }
[data-bs-theme="light"] .service-overview-card h3 { color: var(--text-light) !important; }
/* Gleiches Problem fuer ALLE weiteren Innentexte der dunklen Karte: das
   Auto-Banding faerbt p/li/Tags/Nummer auf hellen Baendern dunkel ein
   (fuer eine WEISSE Karte gedacht) – die Karte bleibt aber per !important
   dunkel, also wird der Text dark-on-dark unlesbar. Hier explizit pinnen. */
.service-overview-card p,
.service-overview-card li,
.service-overview-card .service-tags { color: var(--text-dark-muted) !important; }
.service-overview-card .service-number { color: rgba(255, 255, 255, 0.45) !important; }
.service-overview-card .service-tags { border-top-color: var(--glass-border-dark) !important; }
[data-bs-theme="light"] .service-overview-card p,
[data-bs-theme="light"] .service-overview-card li,
[data-bs-theme="light"] .service-overview-card .service-tags { color: var(--text-light-muted) !important; }
[data-bs-theme="light"] .service-overview-card .service-number { color: rgba(15, 23, 42, 0.50) !important; }
/* strong/b ebenfalls pinnen: das Auto-Banding (section-banding.css) faerbt
   strong in hellen Baendern near-black – auf der dunklen Karte unlesbar
   (z. B. „Alles aus Schutz/Betrieb" in den Wartungs-Tarifen). */
.service-overview-card strong,
.service-overview-card b { color: var(--text-dark) !important; }
[data-bs-theme="light"] .service-overview-card strong,
[data-bs-theme="light"] .service-overview-card b { color: var(--text-light) !important; }

/* Inline-Textlinks in den dunklen Karten (z. B. „Webentwicklung" oder
   „SEO-Optimierung" im Fliesstext): gruen ist auf der dunklen Flaeche schwer
   lesbar. Stattdessen weiss mit feiner weisser Unterlinie – die Unterlinie
   bleibt als Link-Kennzeichnung erhalten. Buttons (btn-cta) ausgenommen. */
.service-overview-card p a:not(.btn-cta),
.service-overview-card li a:not(.btn-cta) {
    color: var(--text-dark) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: rgba(255, 255, 255, 0.65);
}
.service-overview-card p a:not(.btn-cta):hover,
.service-overview-card p a:not(.btn-cta):focus-visible,
.service-overview-card li a:not(.btn-cta):hover,
.service-overview-card li a:not(.btn-cta):focus-visible {
    color: #ffffff !important;
    text-decoration-color: #ffffff;
    text-decoration-thickness: 2px;
}
/* Light Theme: Karte ist hell, dort dunkler Text mit feiner dunkler Linie. */
[data-bs-theme="light"] .service-overview-card p a:not(.btn-cta),
[data-bs-theme="light"] .service-overview-card li a:not(.btn-cta) {
    color: var(--text-light) !important;
    text-decoration-color: rgba(15, 23, 42, 0.45);
}
[data-bs-theme="light"] .service-overview-card p a:not(.btn-cta):hover,
[data-bs-theme="light"] .service-overview-card p a:not(.btn-cta):focus-visible,
[data-bs-theme="light"] .service-overview-card li a:not(.btn-cta):hover,
[data-bs-theme="light"] .service-overview-card li a:not(.btn-cta):focus-visible {
    color: var(--c-text, #0f172a) !important;
    text-decoration-color: currentColor;
}

/* „Mehr erfahren" in den Leistungs-Karten als vollwertiger Button (btn-cta)
   statt gruenem Textlink – deutlich staerkerer Kontrast auf der dunklen
   Karte. .card-cta regelt nur Layout/Platzierung; Farben, 44-px-Zielgroesse
   und :focus-visible kommen vom globalen .btn-cta. */
.service-overview-card .card-cta,
.service-card .card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: auto;
    align-self: flex-start;
    text-decoration: none;
}
.service-overview-card .card-cta svg,
.service-card .card-cta svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.18s ease; }
.service-overview-card .card-cta:hover svg,
.service-overview-card .card-cta:focus-visible svg,
.service-card .card-cta:hover svg,
.service-card .card-cta:focus-visible svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
    .service-overview-card .card-cta svg,
    .service-card .card-cta svg { transition: none; }
    .service-overview-card .card-cta:hover svg,
    .service-overview-card .card-cta:focus-visible svg,
    .service-card .card-cta:hover svg,
    .service-card .card-cta:focus-visible svg { transform: none; }
}
@media (max-width: 575.98px) {
    .service-overview-card .card-cta,
    .service-card .card-cta { align-self: stretch; width: 100%; }
}

/* Startseite „Unser Angebot" (#services): Kacheln hell, Icon-Kaestchen weg.
   Weisse Inseln wie im Banding-Konzept – dunkle Texte sind hier gepinnt,
   damit keine Theme-/Banding-Regel sie auf der hellen Flaeche aufhellt. */
#services .service-card {
    display: flex;
    flex-direction: column;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 4px 6px rgba(15, 23, 42, 0.05), 0 10px 25px rgba(15, 23, 42, 0.06) !important;
}
#services .service-card:hover,
#services .service-card:focus-within {
    border-color: var(--hmf-green-dark) !important;
    background: #ffffff !important;
}
#services .service-card .service-icon { display: none !important; }
#services .service-card .service-title { color: #0f172a !important; }
#services .service-card .service-description { color: #3f4a5a !important; }
#services .service-card .service-list { margin-bottom: 1.5rem; }
#services .service-card .service-list li { color: #1f2937 !important; }
#services .service-card .service-list li svg { color: var(--hmf-green-dark) !important; }
#services .service-card abbr { color: inherit; }
/* CTA auf weisser Kachel: in beiden Themes dunkles Gruen mit Weiss
   (#566320 auf #fff = 5,9:1) statt der hellen Dark-Theme-Variante. */
#services .service-card .btn-cta {
    background: var(--hmf-green-dark) !important;
    color: #ffffff !important;
}
#services .service-card .btn-cta:hover,
#services .service-card .btn-cta:focus {
    background: #475219 !important;
    color: #ffffff !important;
}

/* Verbliebene gruene Karten-Textlinks (weitere Leistungsseiten): hellere
   Brand-Stufe – #8a9e33 auf Kartenflaeche #15151c ≈ 6,2:1 (AA). Im Light
   Theme dunkle Stufe auf heller Karte. */
.service-overview-card .card-link { color: var(--hmf-green-light) !important; }
.service-overview-card .card-link:hover,
.service-overview-card .card-link:focus-visible { color: #ffffff !important; }
[data-bs-theme="light"] .service-overview-card .card-link { color: var(--hmf-green-dark) !important; }
[data-bs-theme="light"] .service-overview-card .card-link:hover,
[data-bs-theme="light"] .service-overview-card .card-link:focus-visible { color: var(--hmf-green) !important; }

/* WP-Care-Karten (Startseite) an den Akzentbalken-Stil angleichen:
   Icon-Kaestchen raus, gruener Akzentbalken links, Titel eine Spur groesser. */
.wp-care-card .wp-care-icon { display: none !important; }
.wp-care-card { border-left: 3px solid var(--hmf-green) !important; }
.wp-care-card:hover, .wp-care-card:focus-within { border-left-color: var(--hmf-green-light) !important; }
.wp-care-card-title { font-size: 1.3rem !important; }
@media (max-width: 575.98px) {
    .wp-care-card {
        border-left-width: 1px !important;
        border-top: 3px solid var(--hmf-green) !important;
    }
}

/* CTA-Box (Tool-Seiten): zentriert. Die Regel stand bisher nur in blog.css,
   die auf Tool-Seiten nicht geladen wird -> Button rutschte nach links. */
.cta-box { text-align: center; }

/* Footer-Auszeichnungen: echte Logos als weisse Chips, damit sie auf dem
   dunklen Footer sichtbar sind. Lokal gehostet (kein Hotlink, DSGVO-konform). */
.footer-badges-logos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    margin-top: 0.25rem;
    max-width: 340px;
}
.footer-badge-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #ffffff;
    border-radius: 10px;
    padding: 10px 14px;
    height: 64px;
    min-width: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.footer-badge-chip:hover,
.footer-badge-chip:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}
.footer-badge-chip img {
    max-height: 42px;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
}
/* ProvenExpert ist ein breites Querformat -> darf hoeher/breiter werden,
   damit es den Chip aehnlich gut fuellt wie das eRecht24-Logo. */
.footer-badge-chip img[src*="provenexpert"] {
    max-height: 56px;
}
.footer-badge-chip-text {
    display: flex;
    flex-direction: column;
    line-height: 1.12;
    text-align: center;
}
.footer-badge-chip-text strong { font-size: 0.95rem; color: #0b3aa0; letter-spacing: -0.01em; }
.footer-badge-chip-text > span { font-size: 0.62rem; color: #5b6b8c; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1px; }

/* ------------------------------------------------------------
   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;
}

/* FAQ-Accordions auf hellen Baendern: weisse Karten mit Tiefe statt grauer
   Kaesten (analog zur Light-Theme-Optik). Banding stylt sonst nur die Schrift. */
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .accordion-item {
    background: #ffffff !important;
    border: 1px solid var(--band-tone-border) !important;
    box-shadow: var(--band-tone-shadow);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .accordion-item:hover,
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .accordion-item:focus-within {
    border-color: var(--band-tone-border-accent) !important;
    box-shadow: var(--band-tone-shadow-lg);
}
@media (prefers-reduced-motion: no-preference) {
    [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .accordion-item:hover { transform: translateY(-2px); }
}
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .accordion-button:not(.collapsed) {
    background: rgba(86, 99, 32, 0.12) !important;
    color: var(--band-tone-primary) !important;
}

/* ------------------------------------------------------------
   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.
   Gilt fuer Kontaktformular UND Projektplaner (eigene Form-Klasse,
   gleiche checkbox-custom-Struktur) */
.contact-form .checkbox-custom,
.projektplaner-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,
.projektplaner-form .checkbox-label:hover .checkbox-custom,
.projektplaner-form .checkbox-label input:focus-visible + .checkbox-custom {
    border-color: var(--hmf-green-dark) !important;
}
.contact-form .checkbox-label input:focus-visible + .checkbox-custom,
.projektplaner-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,
.projektplaner-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 !important;
    }
    .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;
}

/* ============================================================
   ENTSCHLACKTE KARTEN 2026
   Reduzierter, editorialer Karten-Stil: Deko-Icons + Häkchen-Listen
   raus, stattdessen optionale Nummer-Eyebrow + dezente Keyword-Zeile.
   Rein additive Klassen (greifen nur, wo im Markup gesetzt) -> kein
   Einfluss auf bestehende Karten ohne diese Klassen.
   Nutzt ausschliesslich vorhandene Tokens (keine neuen Farben).
   ============================================================ */

/* Nummer-Eyebrow — NUR für sequenzielle Übersichts-/Angebots-Raster */
.service-number {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 1.1rem;
    font-variant-numeric: tabular-nums;
}
[data-bs-theme="light"] .service-number { color: rgba(15, 23, 42, 0.50); }

/* Keyword-Zeile statt Häkchen-Liste */
.service-tags {
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--glass-border-dark);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-dark-muted);
}
[data-bs-theme="light"] .service-tags {
    border-top-color: var(--glass-border-light);
    color: var(--text-light-muted);
}
.service-tags abbr { text-decoration: none; }

/* Auf hellen Auto-Banding-Bändern (Dark-Theme + body.banded) lesbar halten */
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .service-number {
    color: rgba(15, 23, 42, 0.50);
}
[data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .service-tags {
    border-top-color: var(--band-tone-border);
    color: var(--band-tone-text-secondary);
}