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

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

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

   Quelle der CI-Werte: Live-Stylesheet der Seite
   (Avada/Fusion, .../fusion-styles/bc25d1b1….min.css)
     · Schrift Fließtext/Headlines : Montserrat, 400 / 500
     · Schrift Navigation/Buttons  : "Plus Jakarta Sans", 300–600
     · Headline-Farbe : #280b11   · Fließtext : #515151
     · Primär / Links : #000000   · Link-Hover: #b7b7b7
     · Graustufen     : #3f3f3f · #7a7a7a · #b7b7b7 · #d1d1d1 · #e2e2e2
     · Flächen        : #ffffff · #f0f2f5
     · Warme Akzente  : #f3d4b5 (Sand) · #f2e0cd · #ffe9b3 (Creme)
     · Signal         : #da3224
     · Radius Formular: 6px   · Headlines ohne Versalien, Gewicht 500

   Anmerkung: Der Original-Sandton #f3d4b5 ist als Textfarbe bzw.
   auf hellen Flächen zu kontrastarm. Für Text, Haken, Icons und
   aktive Zustände wird deshalb die dunkle Variante desselben
   Farbtons (Bronze #a7611b, Hue 30°) verwendet; Sand bleibt für
   Flächen, Tönungen und Ränder.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
    /* Monochrome Basis */
    --sm-ink:          #000000;   /* Primärfarbe / Links / CTA        */
    --sm-ink-head:     #280b11;   /* Headline-Farbe der Website       */
    --sm-graphite:     #3f3f3f;   /* dunkle Flächen (Footer/Sidebar)  */
    --sm-graphite-2:   #2a2a2a;   /* Sidebar-Verlauf, tiefer          */
    --sm-grey:         #7a7a7a;
    --sm-grey-light:   #b7b7b7;   /* Link-Hover der Website           */
    --sm-text:         #515151;   /* Fließtext                        */

    /* Flächen & Ränder */
    --sm-bg:           #ffffff;
    --sm-bg-soft:      #f0f2f5;
    --sm-border:       #d1d1d1;
    --sm-border-soft:  #e2e2e2;

    /* Warme Akzente */
    --sm-sand:         #f3d4b5;   /* Akzentfläche / Fokus-Rahmen      */
    --sm-sand-soft:    #f2e0cd;   /* Sektions-Tönung                  */
    --sm-sand-pale:    #faefe2;   /* sehr helle Tönung                */
    --sm-cream:        #ffe9b3;   /* Timeline-/Highlight-Farbe        */
    --sm-bronze:       #a7611b;   /* dunkler Akzent, textfähig        */
    --sm-bronze-dark:  #844d15;   /* Hover                            */
    --sm-signal:       #da3224;   /* Signal / Contra                  */

    /* Typografie & Form */
    --sm-font:         Montserrat, Arial, Helvetica, sans-serif;
    --sm-font-ui:      "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
    --sm-radius:       6px;       /* Formularradius der Website       */
    --sm-radius-lg:    10px;
}

/* ============================================================
   Typografie global
   ============================================================ */
*,
#rl-app * {
    font-family: var(--sm-font);
}

/* Navigation, Buttons und kleine UI-Labels in der zweiten CI-Schrift */
.menu-item,
.btn, .btn-nav, .rsel-btn, .solution-link, .hero-optimize-btn,
.btn-reset-calc, .link-btn, .tab-row label, .segmented label,
.header-badge, .badge, .kpi-label, .comp-label, .menu-number {
    font-family: var(--sm-font-ui);
}

/* das "i" im Info-Icon behält bewusst seine eigene (kursive) Schrift */
.info-icon { font-family: Georgia, "Times New Roman", serif; }

body {
    background-color: var(--sm-bg);
    color: var(--sm-text);
    letter-spacing: 0;
}

/* Überschriften in CI-Manier: Gemischtschreibung, Gewicht 500,
   enge Zeilenhöhe, warmes Fast-Schwarz */
.header-title,
.section-title,
.result-heading,
.modal-content h2 {
    color: var(--sm-ink-head);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
}
.section-title {
    border-bottom-color: var(--sm-sand);
    font-weight: 500;
}
.modal-content h2 { border-bottom-color: var(--sm-sand); }

/* Nur die Schriftstärke global angleichen – KEINE globale Überschriftenfarbe:
   Überschriften auf dunklem Grund (z. B. .product-head h3) beziehen ihr Weiß
   per Vererbung, und eine generische h1–h5-Farbregel würde diese Vererbung
   schlagen. Die Farbe wird deshalb unten je Kontext gesetzt. */
h1, h2, h3, h4, h5 { font-weight: 500; }
h4, h5 { font-weight: 600; }

/* ============================================================
   Sidebar / Navigation
   ============================================================ */
.sidebar {
    background: linear-gradient(180deg, var(--sm-graphite) 0%, var(--sm-graphite-2) 100%);
    box-shadow: 2px 0 6px rgba(0,0,0,0.16);
}

.menu-item {
    text-transform: none;
    letter-spacing: 0.015em;
    font-size: 15px;
    font-weight: 600;
}
.menu-item:hover { background-color: rgba(243,212,181,0.10); }
.menu-item.active { background-color: rgba(243,212,181,0.16); }
.menu-item.active::before { background-color: var(--sm-sand); }
.menu-item.menu-legal { border-top-color: rgba(255,255,255,0.15); }
.menu-number { color: var(--sm-sand); }
.sidebar-footer { border-top-color: rgba(255,255,255,0.15); }

/* ============================================================
   Header / Badges
   ============================================================ */
.header { border-bottom: 1px solid var(--sm-border); }
.header-badge {
    background-color: var(--sm-ink);
    color: #fff;
    border-radius: var(--sm-radius);
    letter-spacing: 0.015em;
    font-weight: 600;
}

/* ============================================================
   Cards & Inhaltsblöcke
   ============================================================ */
.card { border-radius: var(--sm-radius); border-color: var(--sm-border-soft); }
.card-green   { background-color: var(--sm-sand-pale); border-left-color: var(--sm-sand); }
.card-blue    { background-color: var(--sm-bg-soft);   border-color: var(--sm-border-soft); }
.card-dark    { background-color: var(--sm-graphite); }
.card-warning { background-color: #fdf4e3; border-color: var(--sm-cream); }

.icon-card { border-radius: var(--sm-radius); border-color: var(--sm-border-soft); }
.icon-card h3 { color: var(--sm-ink-head); }
.icon-circle { background: var(--sm-graphite) !important; }
.icon-circle svg { fill: var(--sm-sand); }

/* KPI-Kacheln */
.kpi-card {
    background: linear-gradient(135deg, var(--sm-graphite) 0%, var(--sm-graphite-2) 100%);
    border-radius: var(--sm-radius);
}
.kpi-value { color: var(--sm-sand); }
.kpi-label { letter-spacing: 0.015em; }

/* Varianten-Tabelle */
.variant-header { border-bottom-color: var(--sm-sand); }
.variant-header h3 { color: var(--sm-ink-head); }
.variant li::before { color: var(--sm-bronze); }

/* Personas / Zielgruppen */
.persona-card { border-top-color: var(--sm-sand); border-radius: var(--sm-radius); }
.persona-card .persona-avatar { background-color: var(--sm-graphite); }
.persona-card h3 { color: var(--sm-ink-head); }
.persona-card .persona-type { color: var(--sm-bronze); }
.persona-card .recommendation {
    background-color: var(--sm-sand-pale);
    color: var(--sm-ink-head);
}

/* Timeline – Creme/Sand als Leitfarbe wie auf der Website */
.timeline::before { background-color: var(--sm-sand); }
.timeline-item::before {
    background-color: var(--sm-cream);
    box-shadow: 0 0 0 2px var(--sm-bronze);
}
.timeline-item h4 { color: var(--sm-ink-head); }

/* Rechner-Link-Card */
.rechner-link-card {
    background: linear-gradient(135deg, var(--sm-sand-pale) 0%, var(--sm-sand-soft) 100%);
    border-color: var(--sm-sand-soft);
    border-left-color: var(--sm-bronze);
    color: var(--sm-ink-head);
    border-radius: var(--sm-radius);
}
.rechner-link-card:hover {
    box-shadow: 0 6px 18px rgba(40,11,17,0.14);
    background: linear-gradient(135deg, var(--sm-sand-soft) 0%, var(--sm-sand) 100%);
}
.rechner-link-card .rechner-link-icon { color: var(--sm-bronze); }
.rechner-link-card .rechner-link-text strong { color: var(--sm-ink-head); }
.rechner-link-card .rechner-link-arrow { color: var(--sm-bronze); }

/* Highlight-Box */
.highlight-box {
    background: linear-gradient(135deg, var(--sm-graphite) 0%, var(--sm-graphite-2) 100%);
}

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

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

/* ============================================================
   Formular / Rechner-Eingaben
   ============================================================ */
.form-section h3 { color: var(--sm-ink-head); border-bottom-color: var(--sm-sand); }
.form-group label { color: var(--sm-ink-head); }
.form-group input,
.form-group select { border-radius: var(--sm-radius); }
.form-group input:focus,
.form-group select:focus {
    border-color: var(--sm-sand);
    box-shadow: 0 0 0 3px rgba(243,212,181,0.45);
}
.form-hint { color: var(--sm-grey); }
.slider-value { color: var(--sm-bronze); }

.result-section { border-radius: var(--sm-radius); border-color: var(--sm-border-soft); }
.result-heading { border-bottom-color: var(--sm-border-soft); }
.result-label { color: var(--sm-grey); }
.result-value { color: var(--sm-ink-head); }
.comparison-card { border-radius: var(--sm-radius); }
.comparison-card.winner { border-color: var(--sm-bronze); background-color: var(--sm-sand-pale); }
.comparison-card .comp-value { color: var(--sm-ink-head); }
.comparison-card .comp-label { color: var(--sm-grey); letter-spacing: 0.015em; }

/* Hero-Eingabe */
.hero-input {
    background: linear-gradient(135deg, var(--sm-graphite) 0%, var(--sm-graphite-2) 100%);
    border-radius: var(--sm-radius-lg);
    box-shadow: 0 6px 18px rgba(0,0,0,0.20);
}
.hero-number,
.hero-unit { color: #fff; }
.hero-sub { color: rgba(255,255,255,0.75); }
.hero-optimize-btn {
    background: var(--sm-sand);
    color: var(--sm-ink-head);
    border-radius: var(--sm-radius);
    font-weight: 600;
}
.hero-optimize-btn:hover { background: #fff; color: var(--sm-ink); }
.hero-optimize-hint strong { color: var(--sm-sand); }
.hero-slider-ticks { color: rgba(255,255,255,0.6); }

/* Input-Karten */
.input-card { border-radius: var(--sm-radius); border-color: var(--sm-border-soft); }
.input-card-head .ic {
    background: var(--sm-sand-pale);
    color: var(--sm-bronze);
    border-radius: var(--sm-radius);
}
.input-card-head h4 { color: var(--sm-ink-head); }
.input-field input[type="number"].plain { color: var(--sm-ink-head); }
.input-field input[type="number"].plain:focus,
.input-with-suffix input:focus {
    border-color: var(--sm-sand);
    box-shadow: 0 0 0 3px rgba(243,212,181,0.45);
}
.input-with-suffix input { color: var(--sm-ink-head); }
.input-with-suffix .suffix { color: var(--sm-grey); }
.label-row .slider-value { color: var(--sm-ink-head); }

/* Stepper */
.stepper { border-radius: var(--sm-radius); }
.stepper:focus-within {
    border-color: var(--sm-sand);
    box-shadow: 0 0 0 3px rgba(243,212,181,0.45);
}
.stepper-btn { color: var(--sm-ink-head); }
.stepper input { color: var(--sm-ink-head); }

/* Kinder */
.kid-row input[type="date"] { color: var(--sm-ink-head); border-radius: var(--sm-radius); }
.kid-row input[type="date"]:focus {
    border-color: var(--sm-sand);
    box-shadow: 0 0 0 3px rgba(243,212,181,0.45);
}
.kid-status.ok { background: var(--sm-sand-pale); color: var(--sm-bronze); }
.kid-add { color: var(--sm-ink-head); }
.kid-remove:hover { color: var(--sm-signal); }

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

/* Segmented Controls */
.segmented { border-radius: var(--sm-radius); }
.segmented label { letter-spacing: 0.015em; }
.segmented label:hover { color: var(--sm-ink-head); }
.segmented input[type="radio"]:checked + label { color: var(--sm-bronze); }

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

/* Erweiterte Einstellungen */
.advanced-section { border-radius: var(--sm-radius); border-color: var(--sm-border-soft); }
.advanced-section summary { color: var(--sm-ink-head); }

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

/* ============================================================
   Buttons – klar, ruhig, monochrom mit warmem Akzent
   ============================================================ */
.btn {
    border-radius: var(--sm-radius);
    letter-spacing: 0.015em;
    font-weight: 600;
}
.btn-primary   { background-color: var(--sm-ink); color: #fff; }
.btn-primary:hover { background-color: var(--sm-graphite); }
.btn-secondary { background-color: var(--sm-grey); }
.btn-secondary:hover { background-color: var(--sm-graphite); }
.btn-nav {
    background-color: var(--sm-bg);
    color: var(--sm-ink);
    border: 2px solid var(--sm-ink);
    font-weight: 500;
}
.btn-nav:hover {
    background-color: var(--sm-ink);
    color: #fff;
    border-color: var(--sm-ink);
}
.link-btn { color: var(--sm-bronze); }

/* Inline-Riester-Selector */
.rechner-selector { border-radius: var(--sm-radius); border-color: var(--sm-border-soft); }
.rechner-selector-q { color: var(--sm-ink-head); }
.rechner-selector-sub { color: var(--sm-grey); }
.rsel-btn {
    background: var(--sm-bg);
    color: var(--sm-ink);
    border: 2px solid var(--sm-border);
    border-radius: var(--sm-radius);
}
.rsel-btn:hover {
    background: var(--sm-bg-soft);
    border-color: var(--sm-grey-light);
    color: var(--sm-ink);
}
.rsel-btn.rsel-active {
    background: var(--sm-ink);
    border-color: var(--sm-ink);
    color: #fff;
}
.rsel-btn.rsel-active:hover { background: var(--sm-graphite); border-color: var(--sm-graphite); }
.btn-reset-calc { color: var(--sm-grey); border-radius: var(--sm-radius); }
.btn-reset-calc:hover { color: var(--sm-ink); }

/* ============================================================
   Lösungs-Karten
   ============================================================ */
.solution-card { border-radius: var(--sm-radius); box-shadow: 0 4px 15px rgba(0,0,0,0.06); }
.solution-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.10); }
.solution-header .brand { font-weight: 600; letter-spacing: 0.01em; }
.solution-body h4 { color: var(--sm-ink-head); }
.solution-body li::before { color: var(--sm-bronze); }
.solution-link {
    background-color: var(--sm-ink);
    border-radius: var(--sm-radius);
    letter-spacing: 0.015em;
}
.solution-link:hover { background-color: var(--sm-graphite); }

/* 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(--sm-bronze) !important; }
.section-content a:not(.rechner-link-card):hover { color: var(--sm-bronze-dark) !important; }

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

/* ============================================================
   Modal: Riester-Abfrage + Rentenlücken-Anwendung (#rl-app)
   ============================================================ */
.modal-overlay { background: rgba(40,11,17,0.55); }
.modal-content { border-radius: var(--sm-radius-lg); }
.modal-content .modal-question { color: var(--sm-ink-head); }
.modal-close:hover { color: var(--sm-ink); }

#rl-app .form-container { border-left-color: var(--sm-graphite); }
#rl-app .form-label { color: var(--sm-ink-head); }
#rl-app .form-input { border-radius: var(--sm-radius); }
#rl-app .form-input:focus {
    border-color: var(--sm-sand);
    box-shadow: 0 0 0 3px rgba(243,212,181,0.45);
}
#rl-app .btn-primary { background-color: var(--sm-ink); }
#rl-app .btn-primary:hover { background-color: var(--sm-graphite); }
#rl-app .btn-secondary { background-color: var(--sm-grey); }
#rl-app .btn-secondary:hover { background-color: var(--sm-graphite); }
#rl-app .result-container {
    background-color: var(--sm-sand-pale);
    border-left-color: var(--sm-bronze);
}
#rl-app .result-title { color: var(--sm-ink-head); }
#rl-app .result-title svg { fill: var(--sm-bronze) !important; }
#rl-app .result-value { color: var(--sm-ink-head); }
#rl-app .result-value.highlight { color: var(--sm-bronze); }
#rl-app .assessment-box {
    background-color: var(--sm-bg-soft);
    border-color: var(--sm-border-soft);
}
#rl-app .assessment-box h3 { color: var(--sm-ink-head) !important; }
#rl-app .renten-option {
    background-color: var(--sm-bg-soft);
    border-left-color: var(--sm-sand);
}
#rl-app .renten-option a { color: var(--sm-ink-head); }
#rl-app .renten-option a:hover { color: var(--sm-bronze); }

/* ============================================================
   Nur Vergleichsseite (body.page-vergleich)
   ============================================================ */
/* pAV = warmer Sand-/Bronze-Akzent, Riester = neutrales Grau */
.kpi-card.kpi-pav {
    background: linear-gradient(135deg, var(--sm-bronze-dark) 0%, var(--sm-bronze) 100%);
}
.kpi-card.kpi-pav .kpi-value { color: var(--sm-cream); }
.kpi-card.kpi-riester {
    background: linear-gradient(135deg, var(--sm-graphite) 0%, var(--sm-grey) 100%);
}
.kpi-card.kpi-riester .kpi-value { color: #fff; }

/* Toggle: heller Sand als Aktiv-Zustand. Der Knauf muss dann von Weiß auf
   Graphit wechseln, sonst verschwindet er auf der hellen Sandfläche. */
.hero-toggle input:checked + .slider-track { background: var(--sm-sand); }
.hero-toggle input:checked + .slider-track::before { background: var(--sm-graphite); }
.hero-toggle-label { color: rgba(255,255,255,0.85); }

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

.compare-column { border-radius: var(--sm-radius); border-color: var(--sm-border-soft); }
.compare-column.pav { background: var(--sm-sand-pale); border-color: var(--sm-sand-soft); }
.compare-column.riester { background: var(--sm-bg-soft); border-color: var(--sm-border-soft); }
.compare-column h4 { color: var(--sm-ink-head); }
.compare-column.pav h4 .badge { background: var(--sm-bronze); color: #fff; }
.compare-column.riester h4 .badge { background: var(--sm-graphite); color: #fff; }
.compare-row .label { color: var(--sm-grey); }
.compare-row .val { color: var(--sm-ink-head); }
.compare-row.highlight .val { color: var(--sm-bronze); }
.compare-column.riester .compare-row.highlight .val { color: var(--sm-graphite); }

/* Produkt-Boxen (Vor-/Nachteile) */
.product-box { border-radius: var(--sm-radius); }
.product-box.pav .product-head {
    background: linear-gradient(135deg, var(--sm-bronze-dark) 0%, var(--sm-bronze) 100%);
}
.product-box.riester .product-head {
    background: linear-gradient(135deg, var(--sm-graphite) 0%, var(--sm-grey) 100%);
}
.product-body h5 { color: var(--sm-ink-head); }
.product-body li.pro::before { color: var(--sm-bronze); }
.product-body li.con::before { color: var(--sm-signal); }

/* Merkmals-Tabelle */
.feature-table { border-radius: var(--sm-radius); }
.feature-table th { background: var(--sm-graphite); }
.feature-table th.pav { background: var(--sm-bronze); }
.feature-table th.riester { background: var(--sm-grey); }
.feature-table td.feature-name {
    color: var(--sm-ink-head);
    background: var(--sm-bg-soft);
}