/* ============================================================
ce298143.css – Corporate-Identity-Overlay "Salvenmoser"
------------------------------------------------------------
Zusätzlich NACH styles.css einbinden:
Passt Typografie, Farbwelt und Anmutung der Seiten an das
Layout / die Corporate Identity von https://salvenmoser.de an,
ohne styles.css zu verändern. Wird das Overlay weggelassen,
bleibt das Original-Styling erhalten.
Quelle der CI-Werte: Live-Stylesheet von salvenmoser.de
· Schrift : "Source Sans Pro", Helvetica, Arial, sans-serif
· Navy : #152d54 · Slate : #475b72 / #616f8e
· Akzent : #0fa0ce (Cyan) / #00add3 · Hell-Cyan: #a2dcea
· Text : #222 · Hintergrund: #fff
· Headlines: Versalien mit weitem Zeichenabstand
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');
:root {
--sal-navy: #152d54;
--sal-navy-2: #1d3b66;
--sal-slate: #475b72;
--sal-slate-light: #616f8e;
--sal-blue: #425786;
--sal-cyan: #0fa0ce; /* Primär-Akzent / CTA */
--sal-cyan-dark: #0c84ab; /* Hover */
--sal-cyan-2: #00add3;
--sal-cyan-light: #a2dcea;
--sal-text: #222;
--sal-bg: #ffffff;
--sal-bg-soft: #f4f7f9;
--sal-tint: #eaf6fb; /* helle Cyan-Tönung statt Grün-Tönung */
--sal-tint-2: #dceef6;
--sal-slate-tint: #eef1f5; /* neutrale Slate-Tönung (z. B. Riester) */
--sal-border: #dbe2e8;
--sal-font: "Source Sans Pro", Helvetica, Arial, sans-serif;
--sal-radius: 4px; /* flacher / klarer als das Original */
}
/* ---------- Typografie global ---------- */
*,
#rl-app * {
font-family: var(--sal-font);
}
/* 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(--sal-bg); color: var(--sal-text); }
/* Überschriften in CI-Manier: Versalien, weiter Zeichenabstand, Navy */
.header-title,
.section-title,
.result-heading,
.modal-content h2 {
color: var(--sal-navy);
text-transform: uppercase;
letter-spacing: 0.07em;
font-weight: 700;
}
.section-title { border-bottom-color: var(--sal-cyan); }
.modal-content h2 { border-bottom-color: var(--sal-cyan); }
/* ============================================================
Sidebar / Navigation
============================================================ */
.sidebar { background-color: var(--sal-navy); box-shadow: 2px 0 6px rgba(21,45,84,0.18); }
.menu-item {
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 15px;
}
.menu-item.active { background-color: var(--sal-slate-light); }
.menu-item.active::before { background-color: var(--sal-cyan); }
.menu-item.menu-legal { border-top-color: var(--sal-slate); }
.sidebar-footer { border-top-color: var(--sal-slate); }
/* ============================================================
Header / Badges
============================================================ */
.header { border-bottom: 1px solid var(--sal-border); }
.header-badge { background-color: var(--sal-cyan); border-radius: var(--sal-radius); }
/* ============================================================
Cards & Inhaltsblöcke
============================================================ */
.card { border-radius: var(--sal-radius); border-color: var(--sal-border); }
.card-green { background-color: var(--sal-tint); border-left-color: var(--sal-cyan); }
.card-blue { background-color: var(--sal-tint); border-color: var(--sal-tint-2); }
.card-dark { background-color: var(--sal-navy); }
.icon-card { border-radius: var(--sal-radius); border-color: var(--sal-border); }
.icon-card h3 { color: var(--sal-navy); }
/* KPI-Kacheln */
.kpi-card {
background: linear-gradient(135deg, var(--sal-navy), var(--sal-slate));
border-radius: var(--sal-radius);
}
.kpi-value { color: var(--sal-cyan-light); }
/* Varianten-Tabelle */
.variant-header { border-bottom-color: var(--sal-cyan); }
.variant-header h3 { color: var(--sal-navy); }
.variant li::before { color: var(--sal-cyan); }
/* Personas / Zielgruppen */
.persona-card { border-top-color: var(--sal-cyan); border-radius: var(--sal-radius); }
.persona-card .persona-avatar { background-color: var(--sal-slate); }
.persona-card h3 { color: var(--sal-navy); }
.persona-card .persona-type { color: var(--sal-cyan-dark); }
.persona-card .recommendation { background-color: var(--sal-tint); color: var(--sal-navy); }
/* Timeline */
.timeline::before { background-color: var(--sal-cyan); }
.timeline-item::before { background-color: var(--sal-cyan); box-shadow: 0 0 0 2px var(--sal-cyan); }
.timeline-item h4 { color: var(--sal-navy); }
/* Rechner-Link-Card */
.rechner-link-card {
background: linear-gradient(135deg, var(--sal-tint) 0%, var(--sal-tint-2) 100%);
border-color: var(--sal-tint-2);
border-left-color: var(--sal-cyan);
color: var(--sal-navy);
border-radius: var(--sal-radius);
}
.rechner-link-card:hover {
box-shadow: 0 6px 18px rgba(15,160,206,0.20);
background: linear-gradient(135deg, var(--sal-tint-2) 0%, #cfe6f1 100%);
}
.rechner-link-card .rechner-link-text strong { color: var(--sal-navy); }
.rechner-link-card .rechner-link-arrow { color: var(--sal-cyan); }
/* Highlight-Box */
.highlight-box { background: linear-gradient(135deg, var(--sal-navy), var(--sal-slate)); }
/* Pro / Contra-Listen */
.pros-list { background-color: var(--sal-tint); border-left-color: var(--sal-cyan); }
.pros-list h4 { color: var(--sal-cyan-dark); }
.pros-list li::before { color: var(--sal-cyan); }
/* ============================================================
Formular / Rechner-Eingaben
============================================================ */
.form-section h3 { color: var(--sal-navy); border-bottom-color: var(--sal-cyan); }
.form-group label { color: var(--sal-navy); }
.form-group input:focus,
.form-group select:focus {
border-color: var(--sal-cyan);
box-shadow: 0 0 0 3px rgba(15,160,206,0.15);
}
.slider-value { color: var(--sal-cyan-dark); }
.result-section { border-radius: var(--sal-radius); border-color: var(--sal-border); }
.result-heading { border-bottom-color: #eef2f5; }
.comparison-card.winner { border-color: var(--sal-cyan); background-color: var(--sal-tint); }
.comparison-card .comp-value { color: var(--sal-navy); }
/* Hero-Eingabe */
.hero-input {
background: linear-gradient(135deg, var(--sal-navy) 0%, var(--sal-slate) 100%);
border-radius: 10px;
box-shadow: 0 6px 18px rgba(21,45,84,0.22);
}
.hero-optimize-btn { background: var(--sal-cyan); border-radius: var(--sal-radius); }
.hero-optimize-btn:hover { background: var(--sal-cyan-dark); }
.hero-optimize-hint strong { color: var(--sal-cyan-light); }
/* Input-Karten */
.input-card { border-radius: var(--sal-radius); border-color: var(--sal-border); }
.input-card-head .ic { background: var(--sal-tint); color: var(--sal-cyan-dark); border-radius: var(--sal-radius); }
.input-card-head h4 { color: var(--sal-navy); }
.input-field input[type="number"].plain { color: var(--sal-navy); }
.input-field input[type="number"].plain:focus,
.input-with-suffix input:focus {
border-color: var(--sal-cyan);
box-shadow: 0 0 0 3px rgba(15,160,206,0.15);
}
.input-with-suffix input { color: var(--sal-navy); }
.label-row .slider-value { color: var(--sal-navy); }
/* Stepper */
.stepper:focus-within { border-color: var(--sal-cyan); box-shadow: 0 0 0 3px rgba(15,160,206,0.15); }
.stepper-btn { color: var(--sal-navy); }
.stepper input { color: var(--sal-navy); }
/* Kinder */
.kid-row input[type="date"] { color: var(--sal-navy); }
.kid-row input[type="date"]:focus { border-color: var(--sal-cyan); box-shadow: 0 0 0 3px rgba(15,160,206,0.15); }
.kid-status.ok { background: var(--sal-tint); color: var(--sal-cyan-dark); }
.kid-add { color: var(--sal-navy); }
/* Slider-Thumbs */
.input-field input[type="range"]::-webkit-slider-thumb { background: var(--sal-cyan); }
.input-field input[type="range"]::-moz-range-thumb { background: var(--sal-cyan); }
/* Segmented Controls */
.segmented label:hover { color: var(--sal-navy); }
.segmented input[type="radio"]:checked + label { color: var(--sal-cyan-dark); }
/* Erweiterte Einstellungen */
.advanced-section { border-radius: var(--sal-radius); border-color: var(--sal-border); }
.advanced-section summary { color: var(--sal-navy); }
/* Info-Icon + Tooltip */
.info-icon:hover,
.info-icon:focus { background: var(--sal-cyan); }
.info-icon::after { background: var(--sal-navy); }
.info-icon::before { border-top-color: var(--sal-navy); }
.auto-hint .dot { background: var(--sal-cyan); }
/* ============================================================
Buttons – klar, rechteckig, CI-Farben
============================================================ */
.btn { border-radius: var(--sal-radius); letter-spacing: 0.02em; }
.btn-primary { background-color: var(--sal-cyan); }
.btn-primary:hover { background-color: var(--sal-cyan-dark); }
.btn-secondary { background-color: var(--sal-slate); }
.btn-secondary:hover { background-color: var(--sal-navy); }
.btn-nav { background-color: var(--sal-bg-soft); color: var(--sal-navy); border: 1px solid var(--sal-border); }
.btn-nav:hover { background-color: var(--sal-navy); color: #fff; border-color: var(--sal-navy); }
/* Inline-Riester-Selector */
.rechner-selector { border-radius: var(--sal-radius); border-color: var(--sal-border); }
.rechner-selector-q { color: var(--sal-navy); }
.rsel-btn { background: var(--sal-slate); border-color: var(--sal-slate); border-radius: var(--sal-radius); }
.rsel-btn:hover { background: var(--sal-navy); border-color: var(--sal-navy); }
.rsel-btn.rsel-active { background: var(--sal-cyan); border-color: var(--sal-cyan); }
.rsel-btn.rsel-active:hover { background: var(--sal-cyan-dark); border-color: var(--sal-cyan-dark); }
.btn-reset-calc { color: var(--sal-slate); border-radius: var(--sal-radius); }
/* Lösungs-Links */
.solution-body li::before { color: var(--sal-cyan); }
.solution-link { background-color: var(--sal-cyan); border-radius: var(--sal-radius); }
.solution-link:hover { background-color: var(--sal-cyan-dark); }
.solution-body h4 { color: var(--sal-navy); }
/* 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(--sal-cyan-dark) !important; }
/* Footer */
.footer { border-top: 1px solid var(--sal-border); }
/* ============================================================
Modal: Riester-Abfrage + Rentenlücken-Anwendung (#rl-app)
============================================================ */
.modal-overlay { background: rgba(21,45,84,0.55); }
.modal-content { border-radius: 10px; }
.modal-content .modal-question { color: var(--sal-navy); }
.modal-close:hover { color: var(--sal-navy); }
#rl-app .form-container { border-left-color: var(--sal-navy); }
#rl-app .form-label { color: var(--sal-navy); }
#rl-app .form-input:focus { border-color: var(--sal-cyan); box-shadow: 0 0 0 2px rgba(15,160,206,0.12); }
#rl-app .btn-primary { background-color: var(--sal-cyan); }
#rl-app .btn-primary:hover { background-color: var(--sal-cyan-dark); }
#rl-app .btn-secondary { background-color: var(--sal-slate); }
#rl-app .btn-secondary:hover { background-color: var(--sal-navy); }
#rl-app .result-container { background-color: var(--sal-tint); border-left-color: var(--sal-cyan); }
#rl-app .result-title { color: var(--sal-navy); }
#rl-app .result-title svg { fill: var(--sal-cyan) !important; }
#rl-app .result-value { color: var(--sal-navy); }
#rl-app .result-value.highlight { color: var(--sal-cyan-dark); }
#rl-app .assessment-box { background-color: var(--sal-tint); border-color: var(--sal-tint-2); }
#rl-app .assessment-box h3 { color: var(--sal-navy) !important; }
#rl-app .renten-option { background-color: var(--sal-bg-soft); border-left-color: var(--sal-cyan); }
#rl-app .renten-option a { color: var(--sal-navy); }
#rl-app .renten-option a:hover { color: var(--sal-cyan-dark); }
/* ============================================================
Nur Vergleichsseite (body.page-vergleich)
============================================================ */
/* pAV = Cyan-Akzent, Riester = Slate (neutral, statt Grün/Gelb) */
.kpi-card.kpi-pav { background: linear-gradient(135deg, var(--sal-cyan-dark), var(--sal-cyan)); }
.kpi-card.kpi-riester { background: linear-gradient(135deg, var(--sal-slate), var(--sal-slate-light)); }
.hero-toggle input:checked + .slider-track { background: var(--sal-cyan); }
.compare-column { border-radius: var(--sal-radius); border-color: var(--sal-border); }
.compare-column.pav { background: var(--sal-tint); border-color: var(--sal-tint-2); }
.compare-column.riester { background: var(--sal-slate-tint); border-color: #dbe1ea; }
.compare-column h4 { color: var(--sal-navy); }
.compare-column.pav h4 .badge { background: var(--sal-cyan); color: #fff; }
.compare-column.riester h4 .badge { background: var(--sal-slate); color: #fff; }
.compare-row .val { color: var(--sal-navy); }
.compare-row.highlight .val { color: var(--sal-cyan-dark); }
.compare-column.riester .compare-row.highlight .val { color: var(--sal-slate); }
/* Produkt-Boxen (Vor-/Nachteile) */
.product-box { border-radius: var(--sal-radius); }
.product-box.pav .product-head { background: linear-gradient(135deg, var(--sal-cyan-dark), var(--sal-cyan)); }
.product-box.riester .product-head { background: linear-gradient(135deg, var(--sal-slate), var(--sal-slate-light)); }
.product-body h5 { color: var(--sal-navy); }
.product-body li.pro::before { color: var(--sal-cyan); }
/* Merkmals-Tabelle */
.feature-table { border-radius: var(--sal-radius); }
.feature-table th { background: var(--sal-navy); }
.feature-table th.pav { background: var(--sal-cyan); }
.feature-table th.riester { background: var(--sal-slate); }
.feature-table td.feature-name { color: var(--sal-navy); background: var(--sal-bg-soft); }