/* Kluge Finanz — Finanzwissen (Übersichtsseite)
   Ergänzt site.css ausschließlich um Komponenten, die auf dieser Seite
   vorkommen. Alle Farb-, Typografie-, Abstands- und Bewegungswerte werden
   aus site.css (:root-Variablen) übernommen — keine neuen Farbwerte,
   keine neue Easing-Kurve. */

/* ---------- Aktuelle Seite in der Navigation ---------- */
.nav-links a[aria-current="page"],
.mobile-panel a[aria-current="page"],
.footer-col a[aria-current="page"] {
  color: var(--c-gold);
}
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* ---------- Mini-Hero (kompakt) ---------- */
/* Padding jetzt identisch zu .hero--home (site.css) — Hero-Gesamthöhe soll
   sitewide der Startseite entsprechen, siehe Bericht "Hero-Höhe angleichen". */
.fw-hero {
  min-height: auto;
  padding-top: calc(var(--nav-h) + clamp(1.25rem, 4vw, 3rem));
  padding-bottom: clamp(1.75rem, 5vw, 3.5rem);
}
/* .hero-visual-slot (site.css) ist auf Mobile sitewide ausgeblendet, solange
   keine Grafik vorhanden ist. Diese Seite hat inzwischen eine echte Grafik
   (hero-finanzwissen.png) — Override nur für diese Seite, damit sie auf
   Mobile sichtbar bleibt, ohne die anderen Hauptseiten (noch ohne Grafik)
   zu beeinflussen. Gleiches Prinzip wie auf /kreditkarten/, /konten/,
   /kredite/. */
@media (max-width: 1080px) {
  .fw-hero .hero-visual-slot {
    display: block;
    margin-top: 2.5rem;
    width: 100%;
    max-width: 420px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
  }
}

/* ---------- Sektionsabstände (kompakter als Standard .section) ---------- */
.fw-ratgeber-section {
  padding-top: clamp(1rem, 2vw, 1.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.fw-wissen-section {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* ---------- Breite Section-Heads in diesen beiden Bereichen ---------- */
/* site.css begrenzt .section-head/.section-head p standardmäßig auf
   620px/46ch (für schmalere, kürzere Section-Header anderswo gedacht) —
   dieselbe Situation wie bereits auf /kreditkarten/, /konten/, /kredite/
   und /ueber-kluge-finanz/ gelöst: Override nur für diese beiden Bereiche,
   damit Eyebrow/H2/Einleitungstext die volle Contentbreite nutzen. */
#aktuelle-ratgeber .section-head,
#aktuelle-ratgeber .section-head p,
.fw-wissen-section .section-head,
.fw-wissen-section .section-head p {
  max-width: none;
}

/* ---------- Themenkarten ---------- */
.fw-topics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.fw-topic-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: linear-gradient(180deg, rgba(244,239,228,0.035), rgba(244,239,228,0.015));
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: 1.9rem;
  transition: border-color var(--dur-fast) var(--ease-lux), transform var(--dur-fast) var(--ease-lux);
}
.fw-topic-card:hover {
  border-color: var(--c-line-strong);
  transform: translateY(-2px);
}
.fw-topic-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--c-off);
}
.fw-topic-desc {
  flex-grow: 1;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--c-off-dim);
}
.fw-topic-empty {
  flex-grow: 1;
  margin: 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--c-off-faint);
}
.fw-topic-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-gold);
  transition: color var(--dur-fast) var(--ease-lux);
}
.fw-topic-card:hover .fw-topic-link { color: var(--c-gold-bright); }

/* ---------- Themenseiten (Kreditkarten/Konten/Kredite-Archiv) ---------- */
.fw-topic-hero-intro {
  margin-top: 0.9rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--c-off-dim);
  max-width: none;
}
.fw-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--c-off-faint);
  transition: color var(--dur-fast) var(--ease-lux);
}
.fw-back-link span { transition: transform var(--dur-fast) var(--ease-lux); }
.fw-back-link:hover, .fw-back-link:focus-visible { color: var(--c-gold); }
.fw-back-link:hover span, .fw-back-link:focus-visible span { transform: translateX(-4px); }

/* ---------- Ratgeber-Hinweis (noch keine Artikel) ---------- */
.fw-notice {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  background: rgba(244, 239, 228, 0.02);
  max-width: 640px;
}
.fw-notice p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--c-off-dim);
}

/* ---------- Artikelkarte (Ratgeber-Übersicht) ---------- */
.fw-articles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  align-items: stretch;
}
.fw-article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: 1.9rem;
  background: linear-gradient(180deg, rgba(244,239,228,0.035), rgba(244,239,228,0.015));
  transition: border-color var(--dur-fast) var(--ease-lux), transform var(--dur-fast) var(--ease-lux);
}
/* Vorbereitete, noch nicht fällige Artikel liegen als <article
   class="fw-article-card" hidden ...> im Markup (siehe scripts/
   finanzwissen-publish-sweep.js). Ohne diese Regel würde die
   Author-Regel ".fw-article-card { display:flex }" oben das
   UA-Standardverhalten von [hidden] überstimmen (gleiche Spezifität,
   Author schlägt UA) und die Karte bliebe trotz hidden sichtbar —
   analog zu .fn-news-card[hidden] in finanz-news.css. */
.fw-article-card[hidden] {
  display: none;
}
.fw-article-card:hover {
  border-color: var(--c-line-strong);
  transform: translateY(-2px);
}
.fw-article-category {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 0.7rem;
}
.fw-article-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--c-off);
  margin: 0 0 0.7rem;
}
.fw-article-card h3 a {
  color: inherit;
}
.fw-article-card h3 a:hover { color: var(--c-gold-bright); }
.fw-article-teaser {
  flex-grow: 1;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--c-off-dim);
  max-width: 62ch;
  margin: 0 0 1.1rem;
}
.fw-article-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  font-size: 0.78rem;
  color: var(--c-off-faint);
  margin-bottom: 1.2rem;
}
.fw-article-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--c-gold);
  transition: color var(--dur-fast) var(--ease-lux);
}
.fw-article-cta span { transition: transform var(--dur-fast) var(--ease-lux); }
.fw-article-card:hover .fw-article-cta,
.fw-article-cta:hover,
.fw-article-cta:focus-visible { color: var(--c-gold-bright); }
.fw-article-card:hover .fw-article-cta span { transform: translateX(4px); }

/* ---------- Passende Produktübersichten (bewusst zurückhaltend) ---------- */
.fw-product-links-section {
  border-top: 1px solid var(--c-line);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
}
.fw-product-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
}
.fw-product-links-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-off-faint);
}
.fw-product-links-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}
.fw-product-links-nav a {
  font-size: 0.88rem;
  color: var(--c-off-dim);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-lux), border-color var(--dur-fast) var(--ease-lux);
}
.fw-product-links-nav a:hover, .fw-product-links-nav a:focus-visible {
  color: var(--c-gold);
  border-color: var(--c-gold-dim);
}

/* ---------- Artikelseite: Meta-Zeile im Hero ---------- */
.fw-article-hero .lg-container { max-width: 720px; }
.fw-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--c-off-faint);
}

/* ---------- Artikelseite: Vergleichsübersicht (Kartenarten) ---------- */
.fw-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 0 0 1.1rem;
}
.fw-compare-card {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: 1.3rem 1.4rem;
  background: linear-gradient(180deg, rgba(244,239,228,0.035), rgba(244,239,228,0.015));
}
.fw-compare-card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--c-gold);
  margin: 0 0 0.9rem;
}
.fw-compare-card dl { margin: 0; }
.fw-compare-card dl > div {
  padding-top: 0.6rem;
  margin-top: 0.6rem;
  border-top: 1px solid var(--c-line);
}
.fw-compare-card dl > div:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}
.fw-compare-card dt {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-off-faint);
}
.fw-compare-card dd {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--c-off-dim);
}

/* ---------- Artikelseite: Datentabelle (z. B. Betriebsausgaben-Übersicht) ---------- */
/* Analog zu .fn-rate-table (Finanz-News, siehe finanz-news.css) — bislang
   nutzte kein Finanzwissen-Artikel eine echte <table>, deshalb neu, aber
   bewusst mit denselben Tokens wie die übrige Artikel-Typografie (keine
   neue Farbe, kein neuer Radius). Scroll-Wrapper verhindert horizontalen
   Seiten-Scroll auf schmalen Viewports. */
.fw-data-table-wrap {
  margin: 0 0 1.9rem;
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
}
.fw-data-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.fw-data-table caption {
  caption-side: top;
  text-align: left;
  padding: 0.9rem 1.1rem 0;
  font-size: 0.78rem;
  color: var(--c-gold);
}
.fw-data-table th,
.fw-data-table td {
  padding: 0.7rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-off-dim);
  vertical-align: top;
}
.fw-data-table thead th {
  font-weight: 600;
  color: var(--c-off);
}
.fw-data-table tbody tr:last-child th,
.fw-data-table tbody tr:last-child td {
  border-bottom: none;
}

/* ---------- Artikelseite: Disclaimer am Ende ---------- */
.fw-disclaimer {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--c-off-faint);
}

/* ---------- Startseite: "Neu im Finanzwissen" ---------- */
/* Nur auf der Startseite verwendet (#neu-im-finanzwissen) — Startseiten-
   Rhythmus-Korrektur, Abstände um ca. 18% reduziert (72px → 59,2px bei
   1280px), siehe site.css für die übrigen Startseiten-Section-Anpassungen. */
.fw-latest {
  padding-top: clamp(2.5rem, 5vw, 3.7rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.7rem);
}
.fw-latest-card {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: clamp(1.9rem, 4vw, 2.6rem);
  background: linear-gradient(180deg, rgba(244,239,228,0.035), rgba(244,239,228,0.015));
}
.fw-latest-card h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  margin: 0.8rem 0 0.9rem;
  line-height: 1.3;
}
.fw-latest-teaser {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--c-off-dim);
  margin: 0 0 1.2rem;
}
.fw-latest-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  font-size: 0.8rem;
  color: var(--c-off-faint);
  margin-bottom: 1.3rem;
}
.fw-latest-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--c-gold);
  transition: color var(--dur-fast) var(--ease-lux);
}
.fw-latest-cta span { transition: transform var(--dur-fast) var(--ease-lux); }
.fw-latest-cta:hover, .fw-latest-cta:focus-visible { color: var(--c-gold-bright); }
.fw-latest-cta:hover span { transform: translateX(4px); }

/* ---------- Breite Artikelseite (.lg-container.fw-wide) ----------
   legal.css setzt .lg-container sitewide auf max-width:760px (schmale
   Lesespalte für Rechtstexte). Für Finanzwissen-Artikel wird diese
   Spalte hier gezielt wieder auf die sitewide .container-Breite
   geöffnet (zwei Klassen schlagen die eine Klasse aus legal.css
   unabhängig von der Ladereihenfolge) — Hero, Fließtext und Ad-Slots
   nutzen dadurch einheitlich die volle Breite, keine separate,
   schmalere Lesespalte für den Text; adsovo-slots.js berücksichtigt
   fw-wide entsprechend bei der Formatwahl. Nur auf Finanzwissen-
   Artikelseiten gesetzt (public/finanzwissen/<slug>/) — Finanz-News-
   Artikel und die Rechtstextseiten Impressum/Datenschutz bleiben
   unverändert bei der schmalen Lesespalte. */
.lg-container.fw-wide {
  max-width: var(--container);
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .fw-topics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .fw-articles { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fw-topics { grid-template-columns: 1fr; }
  .fw-compare-grid { grid-template-columns: 1fr; }
}