/* ============================================================================
   MyInvest24 — Lateral-Reskin für Ratgeber-Artikel (Welle E, zentral)
   Lädt NACH mi24-system.css auf allen ratgeber/**-Seiten (Injection-Skript).
   Hebt die Artikel-Familie ohne Layout-Umbau auf die Lateral-DNA:
   Sentient-300-Headlines · TASA-Body · Geist-Mono-Labels · monochrom · Pills.
   Fonts/Tokens kommen aus mi24-lateral.css (wird davor geladen).
   ========================================================================== */

/* ---- 1 · Token-Remap (zentrale Quelle, ersetzt die Blau-Skala) ---------- */
:root {
  --m24-blue: rgb(8, 8, 8);
  --m24-blue-light: rgb(99, 99, 99);
  --m24-blue-deep: rgb(3, 3, 3);
  --m24-text: rgb(99, 99, 99);
  --m24-muted: rgb(112, 108, 106);
  --m24-ink: rgb(8, 8, 8);
  --m24-navy: rgb(10, 9, 8);
  --m24-slate: rgb(31, 30, 29);
  --m24-success: rgb(8, 8, 8);
  --m24-warning: rgb(99, 99, 99);
  --m24-danger: rgb(99, 99, 99);
}

/* ---- 2 · Grundtypografie ------------------------------------------------ */
body, body.mi24-design {
  font-family: 'TASA Orbiter', Inter, sans-serif !important;
  color: rgb(99, 99, 99);
  background: rgb(249, 249, 249) !important;
  background-image: none !important;
}
h1, h2, h3,
.article-hero h1, .article-content h2, .article-content h3,
.main-article h2, .main-article h3 {
  font-family: 'Sentient', Georgia, serif !important;
  font-weight: 300 !important;
  letter-spacing: -0.04em;
  color: rgb(8, 8, 8);
  text-wrap: balance;
}
h4, h5, h6 { font-family: 'TASA Orbiter', Inter, sans-serif !important; font-weight: 500 !important; color: rgb(8, 8, 8); }
.article-content, .main-article { font-family: 'TASA Orbiter', Inter, sans-serif; }

/* Meta-Zeilen, Breadcrumb, Kategorie-Pills, Labels → Geist Mono */
.article-hero__meta, .article-meta, .breadcrumb, .breadcrumbs,
.article-hero__category, .toc-title, .related-category,
.footer-col h4, .footer-col h3, .footer-col .footer__coltitle {
  font-family: 'Geist Mono', 'SF Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  color: rgb(112, 108, 106) !important;
  font-variant-numeric: tabular-nums;
}
body.mi24-design .breadcrumb a, body.mi24-design .breadcrumbs a, .breadcrumb a, .breadcrumbs a,
body.mi24-design .breadcrumb a:visited, body.mi24-design .breadcrumbs a:visited,
body.mi24-design .breadcrumb a:link, body.mi24-design .breadcrumbs a:link { color: rgb(112, 108, 106) !important; text-decoration: none; }
body.mi24-design .breadcrumb a:hover, body.mi24-design .breadcrumbs a:hover { color: rgb(8, 8, 8) !important; }

/* Kategorie-Pill monochrom (Hairline statt Farbfläche) */
.article-hero__category, .related-category {
  background: transparent !important;
  border: 1px solid rgb(229, 229, 227) !important;
  border-radius: 45px !important;
  color: rgb(99, 99, 99) !important;
}

/* ---- 3 · Flächen & Hairlines -------------------------------------------- */
.article-hero {
  background: rgb(249, 249, 249) !important;
  border-bottom: 1px solid rgb(229, 229, 227);
}
.article-content a, .main-article a, .article-content a:visited, .main-article a:visited {
  color: rgb(8, 8, 8) !important;
  text-decoration: underline;
  text-decoration-color: rgb(180, 177, 175);
  text-underline-offset: 3px;
}
.article-content a:hover, .main-article a:hover { text-decoration-color: rgb(8, 8, 8); }

/* Info-/Fakten-Boxen: ruhige Hairline-Karten statt Farbboxen */
.key-facts, .highlight-box, .expert-tip, .calc-box, .toc-cta, .sidebar-box {
  background: rgb(255, 255, 255) !important;
  border: 1px solid rgb(229, 229, 227) !important;
  border-left-width: 1px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.key-facts h3, .highlight-box h3, .expert-tip h3 { color: rgb(8, 8, 8) !important; }
.highlight-box--warning { background: rgb(249, 249, 249) !important; }

/* Tabellen: schwarzer Header, Hairline-Zebra */
.data-table th, table th {
  background: rgb(3, 3, 3) !important;
  color: rgb(255, 255, 255) !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  font-weight: 400 !important;
}
.data-table td, table td { border-color: rgb(229, 229, 227) !important; }
.data-table tr:nth-child(even) td { background: rgb(249, 249, 249) !important; }

/* ---- 4 · Buttons → genau eine Pill-Form --------------------------------- */
.btn-primary, .btn-primary-large, .btn-primary-small,
.toc-cta .btn, .sidebar-box .btn, .cta-section .btn,
a.button, .cta-button {
  background: rgb(3, 3, 3) !important;
  color: rgb(255, 255, 255) !important;
  border: 0 !important;
  border-radius: 45px !important;
  font-family: 'TASA Orbiter', Inter, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: transform 0.2s ease-out, background-color 0.2s ease-out !important;
}
.btn-primary:hover, .btn-primary-large:hover, .btn-primary-small:hover,
a.button:hover, .cta-button:hover {
  background: rgb(26, 26, 26) !important;
  transform: scale(1.03);
}
.btn-secondary, .btn-outline, .btn-secondary-large {
  background: transparent !important;
  border: 1px solid rgb(229, 229, 227) !important;
  border-radius: 45px !important;
  color: rgb(8, 8, 8) !important;
}

/* ---- 5 · TOC & Sidebar --------------------------------------------------- */
.toc-sticky, .mobile-toc { border-color: rgb(229, 229, 227) !important; background: rgb(255, 255, 255) !important; }
.toc-link { color: rgb(99, 99, 99) !important; }
.toc-link:hover, .toc-link.active { color: rgb(8, 8, 8) !important; }
.toc-link.active { border-color: rgb(8, 8, 8) !important; }
.toc-progress { background: rgb(8, 8, 8) !important; }
.sidebar-box.cta, .toc-cta {
  background: rgb(3, 3, 3) !important;
  color: rgb(255, 255, 255) !important;
  border: 0 !important;
}
.sidebar-box.cta h3, .sidebar-box.cta h4, .toc-cta h3, .toc-cta h4,
.sidebar-box.cta p, .toc-cta p { color: rgba(255, 255, 255, 0.85) !important; }
.sidebar-box.cta .btn, .toc-cta .btn, .sidebar-box.cta a.button {
  background: rgb(255, 255, 255) !important;
  color: rgb(3, 3, 3) !important;
}

/* ---- 6 · FAQ / Related / Vergleichskarten -------------------------------- */
.faq-item { border-color: rgb(229, 229, 227) !important; background: transparent !important; }
.faq-q, .faq-item summary { color: rgb(8, 8, 8) !important; font-weight: 500; }
.related-card, .comparison-card {
  background: rgb(255, 255, 255) !important;
  border: 1px solid rgb(229, 229, 227) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.related-card:hover { transform: translateY(-4px); border-color: rgb(99, 99, 99) !important; }
.related-arrow { color: rgb(8, 8, 8) !important; }

/* ---- 7 · Header/Footer der Artikel-Familie ------------------------------- */
.header, header.header {
  background: rgba(249, 249, 249, 0.85) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(229, 229, 227) !important;
  box-shadow: none !important;
}
.header-nav a { color: rgb(99, 99, 99) !important; }
.header-nav a:hover { color: rgb(8, 8, 8) !important; }
.header .btn, .header-cta .btn, .header .btn-primary {
  background: rgb(3, 3, 3) !important;
  color: rgb(255, 255, 255) !important;
  border-radius: 45px !important;
}
.footer, footer.footer { background: rgb(3, 3, 3) !important; }
.footer a { color: rgba(255, 255, 255, 0.6) !important; }
.footer a:hover { color: rgb(255, 255, 255) !important; }
/* Auf rgb(3,3,3) braucht 11px-Text >=4.5:1 — 112er-Grau schafft nur 3.97:1 */
.footer-col h4, .footer-col h3, .footer-col .footer__coltitle { color: rgb(152, 148, 146) !important; }
/* WCAG 2.2 Touch-Targets >=24px: Padding statt Listen-Gap, Rhythmus bleibt */
.footer-col a, .footer-contact a, .footer-legal-nav a { display: inline-block; padding-block: 4px; }
.footer-col ul { display: flex; flex-direction: column; gap: 2px; }

/* ---- 7b · Kategorie-Hub (page-hero) --------------------------------------- */
body.mi24-design[class] .page-hero {
  background: rgb(249, 249, 249) !important;
  background-image: none !important;
  color: rgb(99, 99, 99) !important;
  border-bottom: 1px solid rgb(229, 229, 227);
}
body.mi24-design[class] .page-hero h1 { color: rgb(8, 8, 8) !important; }
body.mi24-design[class] .page-hero__lead, body.mi24-design[class] .page-hero p { color: rgb(99, 99, 99) !important; }
.page-hero__count, .hub-count, [class*="__count"] {
  background: transparent !important;
  border: 1px solid rgb(229, 229, 227) !important;
  border-radius: 45px !important;
  color: rgb(99, 99, 99) !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  box-shadow: none !important;
}
.page-hero__count svg { stroke: rgb(99, 99, 99) !important; width: 13px; height: 13px; }

/* Haupt-/Breadcrumb-Flächen der Hub-Familie */
body.mi24-design .main-content { background: rgb(249, 249, 249) !important; }
body.mi24-design .breadcrumb a, body.mi24-design .breadcrumbs a, body.mi24-design .breadcrumb a:visited {
  color: rgb(112, 108, 106) !important;
}
body.mi24-design .breadcrumb a:hover, body.mi24-design .breadcrumbs a:hover { color: rgb(8, 8, 8) !important; }

/* Hub-Artikelkarten: Hairline statt Schatten, Pfeil-Hover wie lx-Karten */
body.mi24-design .article-card {
  background: rgb(255, 255, 255) !important;
  border: 1px solid rgb(229, 229, 227) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease-out !important;
}
body.mi24-design .article-card:hover {
  transform: translateY(-4px);
  border-color: rgb(99, 99, 99) !important;
  box-shadow: none !important;
}
.article-card__title { color: rgb(8, 8, 8) !important; font-weight: 500 !important; }
.article-card__arrow { color: rgb(8, 8, 8) !important; }
.article-card p { color: rgb(99, 99, 99) !important; }

/* ---- 7c · Glossar ----------------------------------------------------------- */
body.mi24-design .glossary-search__input {
  background: rgb(255, 255, 255) !important;
  border: 1px solid rgb(229, 229, 227) !important;
  border-radius: 12px !important;
  color: rgb(8, 8, 8) !important;
  box-shadow: none !important;
  font-family: 'TASA Orbiter', Inter, sans-serif !important;
}
body.mi24-design .glossary-search__input::placeholder { color: rgb(112, 108, 106) !important; }
body.mi24-design .glossary-search__input:focus {
  border-color: rgb(8, 8, 8) !important;
  box-shadow: none !important;
  background: rgb(255, 255, 255) !important;
}
body.mi24-design .glossary-search__hint {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  color: rgb(112, 108, 106) !important;
}
/* Buchstaben-Navigation: ruhige Hairline-Pills */
body.mi24-design .alphabet-nav a, body.mi24-design .glossary-nav a, body [class*="letter-nav"] a, body.mi24-design .glossary-alphabet a {
  background: transparent !important;
  border: 1px solid rgb(229, 229, 227) !important;
  border-radius: 45px !important;
  color: rgb(99, 99, 99) !important;
  box-shadow: none !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 12px !important;
  transition: border-color 0.2s, color 0.2s !important;
}
body.mi24-design .alphabet-nav { background: rgb(249, 249, 249) !important; border-color: rgb(229, 229, 227) !important; }
body.mi24-design .alphabet-nav a:hover, body.mi24-design .glossary-nav a:hover, body [class*="letter-nav"] a:hover, body.mi24-design .glossary-alphabet a:hover {
  border-color: rgb(8, 8, 8) !important;
  color: rgb(8, 8, 8) !important;
  background: transparent !important;
  transform: none !important;
}
.glossary-section__letter {
  font-family: 'Sentient', Georgia, serif !important;
  font-weight: 300 !important;
  color: rgb(8, 8, 8) !important;
  border-bottom: 1px solid rgb(229, 229, 227) !important;
}
body.mi24-design .glossary-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.glossary-card__title { color: rgb(8, 8, 8) !important; }
.glossary-card__excerpt { color: rgb(99, 99, 99) !important; }


/* ---- 7d · Rechner-Seiten (calc-*) + Kontakt ------------------------------- */
body.mi24-design[class] .calc-card, body.mi24-design[class] .calculator,
body.mi24-design[class] .contact-card, body.mi24-design[class] .company-card {
  background: rgb(255, 255, 255) !important;
  border: 1px solid rgb(229, 229, 227) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px -32px rgba(8, 8, 8, 0.12) !important;
}
body.mi24-design[class] .calc-input, body.mi24-design[class] .calc-field input,
body.mi24-design[class] .calc-field select {
  border: 1px solid rgb(229, 229, 227) !important;
  border-radius: 12px !important;
  background: rgb(255, 255, 255) !important;
  color: rgb(8, 8, 8) !important;
  box-shadow: none !important;
}
body.mi24-design[class] .calc-input:focus { border-color: rgb(8, 8, 8) !important; outline: none !important; }
body.mi24-design[class] .calc-label, body.mi24-design[class] .calc-section-label,
body.mi24-design[class] .results-card__metric-label {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  color: rgb(112, 108, 106) !important;
}
body.mi24-design[class] .results-card__metric-value {
  font-family: 'Sentient', Georgia, serif !important;
  font-weight: 300 !important;
  color: rgb(8, 8, 8) !important;
  font-variant-numeric: tabular-nums;
}
body.mi24-design[class] .calc-btn {
  background: rgb(3, 3, 3) !important;
  background-image: none !important;
  color: rgb(255, 255, 255) !important;
  border: 0 !important;
  border-radius: 45px !important;
  box-shadow: none !important;
}
body.mi24-design[class] .calc-btn:hover { background: rgb(26, 26, 26) !important; }
body.mi24-design[class] input[type="range"]::-webkit-slider-thumb { background: rgb(3, 3, 3) !important; border-color: rgb(3, 3, 3) !important; }
body.mi24-design[class] input[type="range"]::-webkit-slider-runnable-track { background: rgb(229, 229, 227) !important; }
body.mi24-design[class] .contact-card__icon, body.mi24-design[class] .company-card__item-icon {
  background: rgb(249, 249, 249) !important;
  border: 1px solid rgb(229, 229, 227) !important;
  border-radius: 12px !important;
  color: rgb(8, 8, 8) !important;
}
body.mi24-design[class] .contact-card__icon svg, body.mi24-design[class] .company-card__item-icon svg { stroke: rgb(8, 8, 8) !important; }
body.mi24-design[class] .contact-card__link { color: rgb(8, 8, 8) !important; }
body.mi24-design[class] .company-card { background: rgb(255, 255, 255) !important; }
body.mi24-design[class] .company-card__item-content, body.mi24-design[class] .company-card__item-content p { color: rgb(99, 99, 99) !important; }
body.mi24-design[class] .company-card__item-content h4 { color: rgb(8, 8, 8) !important; }
body.mi24-design[class] .company-card__name, body.mi24-design[class] .company-card__title { color: rgb(8, 8, 8) !important; }
body.mi24-design[class] .company-card a { color: rgb(8, 8, 8) !important; }
body.mi24-design[class] .other-calcs__item {
  background: rgb(255, 255, 255) !important;
  border: 1px solid rgb(229, 229, 227) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
body.mi24-design[class] .other-calcs__icon { filter: grayscale(1); }
/* Ergebnis-Panel bleibt DUNKEL (Konzept), aber flach + Lateral-Typo */
body.mi24-design[class] .results-card {
  background: rgb(3, 3, 3) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  color: rgb(255, 255, 255) !important;
}
body.mi24-design[class] .results-card__main-value {
  font-family: 'Sentient', Georgia, serif !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: rgb(255, 255, 255) !important;
}
body.mi24-design[class] .results-card__label, body.mi24-design[class] .results-card__metric-label {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6) !important;
}
body.mi24-design[class] .results-card .results-card__metric-value { color: rgb(255, 255, 255) !important; font-family: 'Sentient', Georgia, serif !important; font-weight: 300 !important; }
body.mi24-design[class] .calc-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; }
body.mi24-design[class] .calc-btn svg { width: 16px !important; height: 16px !important; flex: none; }


/* ---- 7e · Utility-/Legal-Seiten (Impressum, Datenschutz, AGB, 404) -------- */
/* Diese Templates definieren eigene Slate-Variablen — auf Lateral remappen */
body.mi24-design.mi24-page-utility {
  --bg: rgb(249, 249, 249);
  --bg-alt: rgb(255, 255, 255);
  --border: rgb(229, 229, 227);
  --text: rgb(99, 99, 99);
  --muted: rgb(112, 108, 106);
  --accent: rgb(8, 8, 8);
  background: rgb(249, 249, 249) !important;
}
body.mi24-design.mi24-page-utility .hero {
  background: rgb(249, 249, 249) !important;
  background-image: none !important;
  border-bottom: 1px solid rgb(229, 229, 227);
}
body.mi24-design.mi24-page-utility .hero__subtitle,
body.mi24-design.mi24-page-utility .hero__sub { color: rgb(99, 99, 99) !important; }
body.mi24-design.mi24-page-utility .info-box {
  background: rgb(255, 255, 255) !important;
  border: 1px solid rgb(229, 229, 227) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
body.mi24-design.mi24-page-utility .info-box, body.mi24-design.mi24-page-utility .info-box p { color: rgb(99, 99, 99) !important; }
body.mi24-design.mi24-page-utility .stand {
  font-family: 'Geist Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  color: rgb(112, 108, 106) !important;
}
body.mi24-design.mi24-page-utility .part-header { color: rgb(8, 8, 8) !important; border-color: rgb(229, 229, 227) !important; background: transparent !important; }
body.mi24-design.mi24-page-utility a { color: rgb(8, 8, 8); }

/* sr-only: auf manchen Templates nicht definiert — Screenreader-Labels
   duerfen nie sichtbar rendern */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---- 8 · Letzte Buntfarben-Reste neutralisieren --------------------------- */
.article-content svg [fill="#10b981"], .article-content svg [stroke="#10b981"],
.article-content svg [fill="#0369a1"], .article-content svg [stroke="#0369a1"] {
  fill: rgb(8, 8, 8);
  stroke: rgb(8, 8, 8);
}
::selection { background: rgb(8, 8, 8); color: rgb(249, 249, 249); }

/* ---- Quellen-Sektion (E-E-A-T: amtliche Quellen am Artikelende) ---------- */
.article-sources { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgb(229, 229, 227); }
.article-sources__label {
  font-family: 'Geist Mono', 'SF Mono', monospace;
  font-size: 11px; font-weight: 400; letter-spacing: 0.05em;
  text-transform: uppercase; color: rgb(112, 108, 106); margin: 0 0 14px;
}
.article-sources ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.article-sources li { font-size: 14px; line-height: 1.6; }
.article-sources a { color: rgb(8, 8, 8); text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding-block: 3px; }
.article-sources a:hover { color: rgb(99, 99, 99); }