/* ============================================================
   pm882807.css  –  Corporate-Identity-Overlay "enzfinanz"
   ------------------------------------------------------------
   Zusätzlich NACH styles.css einbinden:

       <link rel="stylesheet" href="styles.css">
       <link rel="stylesheet" href="pm882807.css">

   Passt Farbwelt und Anmutung von altersvorsorge.html und
   pav-riester-vergleich.html an das Layout / die Corporate
   Identity von https://enzfinanz.de/ an, ohne styles.css zu
   verändern. Wird das Overlay weggelassen, bleibt das
   Original-Styling erhalten.

   Quelle der CI-Werte: Live-Stylesheets der Seite
   (WordPress / GeneratePress, /uploads/generatepress/style.min.css,
    /uploads/generateblocks/style-*.css)
     · Schriften      : bewusst NICHT übernommen – es gilt die
                        Original-Schrift aus styles.css (Segoe UI)
     · Grundanmutung  : hell – Creme-Hintergrund, weiße Karten mit
                        2px Goldrahmen, Gold-Sektionen mit dunkler Schrift
     · Petrol         : #1a2e4a  – NUR Überschriften (wie auf der Website),
                        keine Flächen
     · Kontrast       : #1A202C (Text)  · #4A5568 (Sekundärtext)
     · Akzent (Gold)  : #C5A059 – Rahmen, Linien, Gold-Flächen,
                        aktive Navigation
     · Button / Aktiv : #167D6F  · Hover #106055 (weiße Schrift)
     · Flächen        : #FAF9F6 (Creme) · #FFFFFF · #f4f1eb (Highlight)
     · Nebenfarbe     : #a88a98 (Mauve)
     · Formen         : stark gerundet (Buttons/Karten 25–30px)

   Diagramme: altersvorsorge.js / pav-riester-vergleich.js lesen
   ihre Farben aus den Variablen --chart-* (siehe :root). Ohne
   diese Variablen gelten die Original-Farben.

   Gestaltung: durchgehend Vollfarben, keine Farbverläufe
   (auch Verläufe aus styles.css werden flach überschrieben).

   Anmerkung: Das Gold #C5A059 ist auf Weiß als Textfarbe zu
   kontrastarm (ca. 2,3 : 1). Es wird daher – wie auf der Website –
   für Rahmen, Linien und Flächen (mit dunkler Schrift) eingesetzt.
   Für Text auf hellem Grund dient eine abgedunkelte Variante
   desselben Farbtons (#7d6128).
   ============================================================ */

:root {
    /* Petrol – nur Schriftfarbe */
    --ef-petrol:       #1a2e4a;

    /* Gold-Akzent */
    --ef-gold:         #C5A059;   /* Akzent / Rahmen / Flächen         */
    --ef-gold-2:       #b8914a;   /* Hover (etwas dunkler)             */
    --ef-gold-text:    #7d6128;   /* textfähige Variante auf Hell      */
    --ef-gold-pale:    #f4f1eb;   /* Highlight-Fläche der Website      */
    --ef-gold-soft:    #e8dcc0;   /* Rahmen-Tönung                     */

    /* Button-Grün */
    --ef-green:        #167D6F;
    --ef-green-hover:  #106055;
    --ef-green-pale:   #e7f2f0;
    --ef-focus:        rgba(197,160,89,0.35);

    /* Nebenfarbe */
    --ef-mauve:        #a88a98;

    /* Text & Graustufen */
    --ef-text:         #1A202C;
    --ef-grey:         #4A5568;

    /* Flächen & Ränder */
    --ef-bg:           #FAF9F6;
    --ef-white:        #FFFFFF;
    --ef-bg-soft:      #f4f1eb;
    --ef-border:       #e6e0d4;
    --ef-border-soft:  #efebe3;

    --ef-signal:       #b3261e;

    /* Form */
    --ef-radius:       25px;      /* Pill-Buttons der Website          */
    --ef-radius-field: 10px;      /* Eingabefelder                     */
    --ef-radius-card:  18px;      /* Karten                            */
    --ef-shadow:       0 4px 14px rgba(0,0,0,0.07);

    /* Diagrammfarben (von den JS-Dateien ausgelesen) */
    --chart-primary:   #C5A059;   /* Hauptreihe (Gold)                 */
    --chart-green:     #167D6F;   /* Förder-/pAV-Reihe                 */
    --chart-accent:    #7d6128;   /* zweite Reihe (Bronze)             */
    --chart-yellow:    #e0cc9f;   /* dritte Reihe (helles Gold)        */
    --chart-muted:     #a88a98;   /* Vergleich / Riester (Mauve)       */
    --chart-light:     #e8dcc0;   /* Brutto-Balken                     */
    --chart-title:     #1a2e4a;   /* Diagrammtitel                     */
}

/* ============================================================
   Grundlagen
   ============================================================ */
body {
    background-color: var(--ef-bg);
    color: var(--ef-text);
    letter-spacing: 0.02em;
}
p { line-height: 1.7; }

/* Überschriften: Gewicht 400, Petrol als Schriftfarbe wie auf der Website */
.header-title,
.section-title,
.result-heading,
.modal-content h2 {
    color: var(--ef-petrol);
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: none;
    line-height: 1.25;
}
.section-title { border-bottom-color: var(--ef-gold); }
.modal-content h2 { border-bottom-color: var(--ef-gold); }

/* Nur die Schriftstärke global angleichen – KEINE globale Überschriftenfarbe:
   Überschriften auf farbigem Grund (z. B. .product-head h3) beziehen ihre
   Farbe per Vererbung. Die Farbe wird deshalb unten je Kontext gesetzt. */
h1, h2, h3, h4, h5 { font-weight: 400; }

/* Inline-Farben der HTML-Dateien (Original-Navy #153854 u. a.) auf die
   CI-Farben ziehen */
[style*="color:#153854"],
[style*="color: #153854"]            { color: var(--ef-petrol) !important; }
[style*="border-left:4px solid #153854"] { border-left-color: var(--ef-gold) !important; }
[style*="background:#eef5ff"]        { background: var(--ef-gold-pale) !important; }
[style*="border:1px solid #d0e0ff"]  { border-color: var(--ef-gold-soft) !important; }
[style*="fill: #42810E"],
[style*="fill: #42810e"]             { fill: var(--ef-green) !important; }

/* ============================================================
   Sidebar / Navigation – helle Leiste wie die Website-Navigation,
   Gold als Aktiv-Fläche
   ============================================================ */
.sidebar {
    background: var(--ef-gold-pale);
    border-right: 2px solid var(--ef-gold);
    box-shadow: 2px 0 8px rgba(0,0,0,0.05);
}

.logo {
    border-radius: var(--ef-radius-card);
    border: 2px solid var(--ef-gold);
    box-shadow: none;
}

.menu-item {
    color: var(--ef-grey);
    text-transform: none;
    letter-spacing: 0.1em;
    font-size: 16px;
    font-weight: 500;
}
.menu-item:hover {
    color: var(--ef-text);
    background-color: var(--ef-white);
}
.menu-item.active {
    color: var(--ef-text);
    background-color: var(--ef-gold);
}
.menu-item.active::before { background-color: var(--ef-green); }
.menu-number { color: var(--ef-gold-text); }
.menu-item.active .menu-number { color: var(--ef-text); }
.menu-item.menu-legal {
    color: var(--ef-grey);
    border-top-color: var(--ef-gold-soft);
}
.sidebar-footer {
    color: var(--ef-grey);
    border-top-color: var(--ef-gold-soft);
}

/* ============================================================
   Header / Badges
   ============================================================ */
.header { border-bottom: 1px solid var(--ef-border); }
.header-badge {
    background-color: var(--ef-gold);
    color: var(--ef-text);
    border-radius: var(--ef-radius);
    letter-spacing: 0.1em;
    font-weight: 600;
}

/* ============================================================
   Cards & Inhaltsblöcke – weiße Karten, goldene Rahmen
   ============================================================ */
.card {
    background-color: var(--ef-white);
    border-radius: var(--ef-radius-card);
    border-color: var(--ef-border);
}
.card-green   { background-color: var(--ef-green-pale); border-left-color: var(--ef-green); }
.card-blue    { background-color: var(--ef-gold-pale);  border-color: var(--ef-gold-soft); }
.card-dark    { background-color: var(--ef-green); color: #fff; }
.card-warning { background-color: #fff8e1; border-color: var(--ef-gold); }

.icon-card {
    background-color: var(--ef-white);
    border-radius: var(--ef-radius-card);
    border: 2px solid var(--ef-gold);
    box-shadow: var(--ef-shadow);
}
.icon-card h3 { color: var(--ef-petrol); }
/* Icon-Kreise: hell mit Goldring statt dunkler Vollfläche
   (überschreibt auch die Inline-Hintergründe der HTML-Datei) */
.icon-circle {
    background: var(--ef-gold-pale) !important;
    border: 2px solid var(--ef-gold);
}
.icon-circle svg { fill: var(--ef-green); }

/* KPI-Kacheln – weiße Karte mit Goldrahmen */
.kpi-card {
    background: var(--ef-white);
    color: var(--ef-text);
    border: 2px solid var(--ef-gold);
    border-radius: var(--ef-radius-card);
    box-shadow: var(--ef-shadow);
}
.kpi-value { color: var(--ef-green); }
.kpi-label { color: var(--ef-grey); letter-spacing: 0.05em; }

/* Varianten-Tabelle */
.variant-table { border-radius: var(--ef-radius-card); }
.variant-header { border-bottom-color: var(--ef-gold); }
.variant-header h3 { color: var(--ef-petrol); }
.variant li::before { color: var(--ef-green); }

/* Personas / Zielgruppen */
.persona-card { border-top-color: var(--ef-gold); border-radius: var(--ef-radius-card); }
.persona-card .persona-avatar { background-color: var(--ef-green); }
.persona-card h3 { color: var(--ef-petrol); }
.persona-card .persona-type { color: var(--ef-gold-text); }
.persona-card .recommendation {
    background-color: var(--ef-gold-pale);
    color: var(--ef-text);
}

/* Timeline – Gold-Linie, grüne Punkte */
.timeline::before { background-color: var(--ef-gold); }
.timeline-item::before {
    background-color: var(--ef-green);
    box-shadow: 0 0 0 2px var(--ef-gold);
}
.timeline-item h4 { color: var(--ef-petrol); }

/* Rechner-Link-Card */
.rechner-link-card {
    background: var(--ef-gold-pale);
    border-color: var(--ef-gold-soft);
    border-left-color: var(--ef-gold);
    color: var(--ef-text);
    border-radius: var(--ef-radius-card);
}
.rechner-link-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
    background: var(--ef-gold-soft);
}
.rechner-link-card .rechner-link-icon { color: var(--ef-green); }
.rechner-link-card .rechner-link-text strong { color: var(--ef-petrol); }
.rechner-link-card .rechner-link-arrow { color: var(--ef-green); }

/* Highlight-Box – Gold-Sektion mit dunkler Schrift wie auf der Website */
.highlight-box {
    background: var(--ef-gold);
    color: var(--ef-text);
    border-radius: var(--ef-radius-card);
}
.highlight-box h3 { color: var(--ef-text); }

/* Pro / Contra-Listen */
.pros-list { background-color: var(--ef-green-pale); border-left-color: var(--ef-green); }
.pros-list h4 { color: var(--ef-green); }
.pros-list li::before { color: var(--ef-green); }
.cons-list { background-color: var(--ef-bg-soft); border-left-color: var(--ef-signal); }
.cons-list h4 { color: var(--ef-signal); }
.cons-list li::before { color: var(--ef-signal); }

/* Disclaimer */
.disclaimer {
    background-color: var(--ef-bg-soft);
    border: 1px solid var(--ef-border);
    border-radius: var(--ef-radius-card);
    color: var(--ef-grey);
}

/* Riester-Auswahlleiste */
.riester-choice-bar {
    background: var(--ef-gold-pale);
    border-color: var(--ef-gold-soft);
    border-left-color: var(--ef-gold);
    color: var(--ef-text);
    border-radius: var(--ef-radius-card);
}

/* ============================================================
   Formular / Rechner-Eingaben – Gold-Fokus
   ============================================================ */
.form-section h3 { color: var(--ef-petrol); border-bottom-color: var(--ef-gold); }
.form-group label { color: var(--ef-text); }
.form-group input,
.form-group select { border-radius: var(--ef-radius-field); }
.form-group input:focus,
.form-group select:focus {
    border-color: var(--ef-gold);
    box-shadow: 0 0 0 3px var(--ef-focus);
}
.form-hint { color: var(--ef-grey); }
.slider-value { color: var(--ef-green); }

.result-section {
    background-color: var(--ef-white);
    border-radius: var(--ef-radius-card);
    border-color: var(--ef-border);
}
.result-heading { border-bottom-color: var(--ef-border); }
.result-label { color: var(--ef-grey); }
.result-value { color: var(--ef-text); }
.comparison-card { border-radius: var(--ef-radius-card); }
.comparison-card.winner { border-color: var(--ef-gold); background-color: var(--ef-gold-pale); }
.comparison-card .comp-value { color: var(--ef-green); }
.comparison-card .comp-label { color: var(--ef-grey); letter-spacing: 0.05em; }

/* Hero-Eingabe – grüne Vollfläche, weiße Schrift */
.hero-input {
    background: var(--ef-green);
    border-radius: var(--ef-radius-card);
    box-shadow: 0 6px 18px rgba(22,125,111,0.22);
}
.hero-number,
.hero-unit { color: #fff; }
.hero-sub { color: rgba(255,255,255,0.85); }
.hero-optimize-btn {
    background: var(--ef-gold);
    color: var(--ef-text);
    border-radius: var(--ef-radius);
    font-weight: 400;
    letter-spacing: 0.1em;
}
.hero-optimize-btn:hover { background: var(--ef-gold-2); color: var(--ef-text); }
.hero-optimize-hint strong { color: #fff; }
.hero-slider-ticks { color: rgba(255,255,255,0.75); }

/* Input-Karten */
.input-card {
    background-color: var(--ef-white);
    border-radius: var(--ef-radius-card);
    border-color: var(--ef-border);
}
.input-card-head .ic {
    background: var(--ef-gold-pale);
    color: var(--ef-green);
    border-radius: 50%;
}
.input-card-head h4 { color: var(--ef-petrol); }
.input-field input[type="number"].plain { color: var(--ef-text); }
.input-field input[type="number"].plain:focus,
.input-with-suffix input:focus {
    border-color: var(--ef-gold);
    box-shadow: 0 0 0 3px var(--ef-focus);
}
.input-with-suffix input { color: var(--ef-text); border-radius: var(--ef-radius-field); }
.input-with-suffix .suffix { color: var(--ef-grey); }
.label-row .slider-value { color: var(--ef-green); }

/* Stepper */
.stepper { border-radius: var(--ef-radius-field); }
.stepper:focus-within {
    border-color: var(--ef-gold);
    box-shadow: 0 0 0 3px var(--ef-focus);
}
.stepper-btn { color: var(--ef-green); }
.stepper input { color: var(--ef-text); }

/* Kinder */
.kid-row input[type="date"] { color: var(--ef-text); border-radius: var(--ef-radius-field); }
.kid-row input[type="date"]:focus {
    border-color: var(--ef-gold);
    box-shadow: 0 0 0 3px var(--ef-focus);
}
.kid-status.ok { background: var(--ef-green-pale); color: var(--ef-green); }
.kid-status.no { background: #f8d7da; color: #842029; }
.kid-add { color: var(--ef-green); }
.kid-remove { border-radius: var(--ef-radius-field); }
.kid-remove:hover { color: var(--ef-signal); }

/* Slider-Thumbs */
.input-field input[type="range"]::-webkit-slider-thumb { background: var(--ef-green); }
.input-field input[type="range"]::-moz-range-thumb { background: var(--ef-green); }
.hero-slider::-webkit-slider-thumb { background: var(--ef-gold); }
.hero-slider::-moz-range-thumb { background: var(--ef-gold); }

/* Segmented Controls */
.segmented { border-radius: var(--ef-radius); }
.segmented label { letter-spacing: 0.05em; }
.segmented label:hover { color: var(--ef-text); }
.segmented input[type="radio"]:checked + label { color: var(--ef-green); }

/* Tab-Row (Radio-Chips) */
.tab-row label { border-radius: var(--ef-radius); color: var(--ef-text); }
.tab-row label:hover { border-color: var(--ef-gold); }
.tab-row label:has(input:checked) {
    background: var(--ef-green);
    border-color: var(--ef-green);
    color: #fff;
}

/* Erweiterte Einstellungen */
.advanced-section {
    background-color: var(--ef-white);
    border-radius: var(--ef-radius-card);
    border-color: var(--ef-border);
}
.advanced-section summary { color: var(--ef-petrol); }
.advanced-section[open] summary { border-bottom-color: var(--ef-border-soft); }

/* Info-Icon + Tooltip */
.info-icon:hover,
.info-icon:focus { background: var(--ef-green); }
.info-icon::after { background: var(--ef-text); }
.info-icon::before { border-top-color: var(--ef-text); }
.auto-hint .dot { background: var(--ef-gold); }

/* ============================================================
   Buttons – Pill-Form mit Sperrung wie die Website; Grün als
   Haupt-CTA, Gold-Rahmen als zweite Stufe
   ============================================================ */
.btn {
    border-radius: var(--ef-radius);
    letter-spacing: 0.1em;
    font-weight: 400;
}
.btn-primary   { background-color: var(--ef-green); color: #fff; }
.btn-primary:hover { background-color: var(--ef-green-hover); color: #fff; }
.btn-secondary { background-color: var(--ef-grey); color: #fff; }
.btn-secondary:hover { background-color: var(--ef-text); }
.btn-print {
    background-color: var(--ef-white);
    color: var(--ef-green);
    border: 2px solid var(--ef-green);
}
.btn-print:hover { background-color: var(--ef-green); color: #fff; }
.btn-nav {
    background-color: var(--ef-white);
    color: var(--ef-text);
    border: 2px solid var(--ef-gold);
    font-weight: 500;
}
.btn-nav:hover {
    background-color: var(--ef-gold);
    color: var(--ef-text);
    border-color: var(--ef-gold);
}
.link-btn { color: var(--ef-green); }
.link-btn:hover { color: var(--ef-green-hover); }

/* Inline-Riester-Selector */
.rechner-selector {
    background-color: var(--ef-white);
    border-radius: var(--ef-radius-card);
    border-color: var(--ef-border);
}
.rechner-selector-q { color: var(--ef-petrol); }
.rechner-selector-sub { color: var(--ef-grey); }
.rsel-btn {
    background: var(--ef-white);
    color: var(--ef-text);
    border: 2px solid var(--ef-gold);
    border-radius: var(--ef-radius);
}
.rsel-btn:hover {
    background: var(--ef-gold-pale);
    border-color: var(--ef-gold);
    color: var(--ef-text);
}
.rsel-btn.rsel-active {
    background: var(--ef-green);
    border-color: var(--ef-green);
    color: #fff;
}
.rsel-btn.rsel-active:hover { background: var(--ef-green-hover); border-color: var(--ef-green-hover); }
.btn-reset-calc { color: var(--ef-grey); border-radius: var(--ef-radius); }
.btn-reset-calc:hover { color: var(--ef-text); }

/* ============================================================
   Lösungs-Karten – Anbieter-Farben der Kopfzeilen bleiben erhalten,
   aber als Vollfarbe statt Verlauf
   ============================================================ */
.solution-header.dws       { background: #1e2c50; }
.solution-header.vanguard  { background: #96151d; }
.solution-header.blackrock { background: #000000; }
.solution-header.allianz   { background: #003781; }
.solution-card {
    border: 2px solid var(--ef-gold);
    border-radius: var(--ef-radius-card);
    box-shadow: var(--ef-shadow);
}
.solution-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.12); }
.solution-header .brand { font-weight: 600; letter-spacing: 0.05em; }
.solution-body h4 { color: var(--ef-petrol); }
.solution-body li::before { color: var(--ef-green); }
.solution-link {
    background-color: var(--ef-green);
    color: #fff;
    border-radius: var(--ef-radius);
    letter-spacing: 0.1em;
}
.solution-link:hover { background-color: var(--ef-green-hover); color: #fff; }

/* Inhalts-Links (auch solche mit grünem Inline-Style, z. B. die BMF-Quelle)
   auf den CI-Akzent ziehen – die große Rechner-Link-Karte ausgenommen. */
.section-content a:not(.rechner-link-card) { color: var(--ef-green) !important; }
.section-content a:not(.rechner-link-card):hover { color: var(--ef-green-hover) !important; }

/* Footer */
.footer { border-top: 1px solid var(--ef-border); }

/* ============================================================
   Modal: Riester-Abfrage + Rentenlücken-Anwendung (#rl-app)
   ============================================================ */
.modal-overlay { background: rgba(26,32,44,0.55); }
.modal-content { border-radius: var(--ef-radius-card); border: 2px solid var(--ef-gold); }
.modal-content .modal-question { color: var(--ef-petrol); }
.modal-close:hover { color: var(--ef-text); }

#rl-app .form-container { border-left-color: var(--ef-gold); }
#rl-app .form-label { color: var(--ef-text); }
#rl-app .form-input { border-radius: var(--ef-radius-field); }
#rl-app .form-input:focus {
    border-color: var(--ef-gold);
    box-shadow: 0 0 0 3px var(--ef-focus);
}
#rl-app .btn-primary { background-color: var(--ef-green); color: #fff; }
#rl-app .btn-primary:hover { background-color: var(--ef-green-hover); }
#rl-app .btn-secondary { background-color: var(--ef-grey); }
#rl-app .btn-secondary:hover { background-color: var(--ef-text); }
#rl-app .result-container {
    background-color: var(--ef-gold-pale);
    border-left-color: var(--ef-gold);
}
#rl-app .result-title { color: var(--ef-petrol); }
#rl-app .result-title svg { fill: var(--ef-green) !important; }
#rl-app .result-value { color: var(--ef-text); }
#rl-app .result-value.highlight { color: var(--ef-green); }
#rl-app .assessment-box {
    background-color: var(--ef-bg-soft);
    border-color: var(--ef-gold-soft);
}
#rl-app .assessment-box h3 { color: var(--ef-petrol) !important; }
#rl-app .renten-option {
    background-color: var(--ef-bg-soft);
    border-left-color: var(--ef-gold);
}
#rl-app .renten-option a { color: var(--ef-green); }
#rl-app .renten-option a:hover { color: var(--ef-green-hover); }

/* ============================================================
   Nur Vergleichsseite (body.page-vergleich)
   ============================================================ */
/* pAV = Grün (CI-Buttonfarbe), Riester = helle Gold-Tönung */
.kpi-card.kpi-pav {
    background: var(--ef-green);
    border-color: var(--ef-green);
    color: #fff;
}
.kpi-card.kpi-pav .kpi-value,
.kpi-card.kpi-pav .kpi-label { color: #fff; }
.kpi-card.kpi-riester {
    background: var(--ef-gold-pale);
    border-color: var(--ef-gold);
    color: var(--ef-text);
}
.kpi-card.kpi-riester .kpi-value { color: var(--ef-text); }
.kpi-card.kpi-riester .kpi-label { color: var(--ef-grey); }

/* Toggle: Gold als Aktiv-Zustand, weißer Knauf */
.hero-toggle input:checked + .slider-track { background: var(--ef-gold); }
.hero-toggle-label { color: rgba(255,255,255,0.9); }

/* Neutrale Ergebniskarten auf den CI-Cremeton ziehen */
.page-vergleich .comparison-card { background: var(--ef-bg-soft); }

.compare-column { border-radius: var(--ef-radius-card); border-color: var(--ef-border); }
.compare-column.pav { background: var(--ef-green-pale); border-color: var(--ef-green); }
.compare-column.riester { background: var(--ef-white); border-color: var(--ef-gold); }
.compare-column h4 { color: var(--ef-petrol); }
.compare-column.pav h4 .badge { background: var(--ef-green); color: #fff; border-radius: var(--ef-radius); }
.compare-column.riester h4 .badge { background: var(--ef-gold); color: var(--ef-text); border-radius: var(--ef-radius); }
.compare-row .label { color: var(--ef-grey); }
.compare-row .val { color: var(--ef-text); }
.compare-row.highlight .val { color: var(--ef-green); }
.compare-column.riester .compare-row.highlight .val { color: var(--ef-gold-text); }

/* Produkt-Boxen (Vor-/Nachteile) */
.product-box { border-radius: var(--ef-radius-card); }
.product-box.pav .product-head {
    background: var(--ef-green);
    color: #fff;
}
.product-box.riester .product-head {
    background: var(--ef-gold);
    color: var(--ef-text);
}
.product-body h5 { color: var(--ef-petrol); }
.product-body li.pro::before { color: var(--ef-green); }
.product-body li.con::before { color: var(--ef-signal); }

/* Merkmals-Tabelle */
.feature-table { border-radius: var(--ef-radius-card); }
.feature-table th { background: var(--ef-gold-pale); color: var(--ef-text); }
.feature-table th.pav { background: var(--ef-green); color: #fff; }
.feature-table th.riester { background: var(--ef-gold); color: var(--ef-text); }
.feature-table td.feature-name {
    color: var(--ef-text);
    background: var(--ef-bg-soft);
}