/* Kluge Finanz — Über Kluge Finanz
   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 ---------- */
/* Padding identisch zu .hero--home (site.css) — Hero-Gesamthöhe soll
   sitewide der Startseite entsprechen. Struktur jetzt wie auf den anderen
   Hauptseiten: .hero-inner (site.css) übernimmt Grid/Stapel-Anhebung/
   max-width, keine Sonderregeln mehr nötig. */
.uk-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-ueber-kluge-finanz.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/, /finanzwissen/. */
@media (max-width: 1080px) {
  .uk-hero .hero-visual-slot {
    display: block;
    margin-top: 2.5rem;
    width: 100%;
    max-width: 420px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
  }
}

/* ---------- Vertikaler Rhythmus zwischen den Inhaltsabschnitten ---------- */
/* Ursache der ungleichmäßigen Übergänge: .content-grid (site.css) hat anders
   als .section-prose (site.css: margin-bottom: clamp(2.5rem, 6vw, 4.5rem))
   kein eigenes margin-bottom. Sections, die mit .section-prose enden, haben
   dadurch automatisch mehr Abstand zum nächsten Abschnitt als der Bereich
   "Was Kluge Finanz macht", der mit .content-grid endet — sichtbar am
   spürbar engeren Übergang zu "So entstehen unsere Produktchecks".
   Fix: derselbe Spacing-Wert wie .section-prose, nur für diese eine
   .content-grid-Instanz (nicht die globale .content-grid-Klasse, die auch
   auf Kreditkarten/Konten/Kredite in anderem Kontext verwendet wird). */
#uk-leistungen .content-grid {
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

/* ---------- Breite Section-Heads auf dieser Seite ---------- */
/* site.css begrenzt .section-head/.section-head p standardmäßig auf
   620px/46ch (für schmalere, kürzere Section-Header anderswo gedacht) — auf
   dieser Seite sollen Überschriften und Introtexte durchgehend die volle
   Contentbreite nutzen, daher hier für die gesamte Seite aufgehoben. */
.uk-page .section-head,
.uk-page .section-head p {
  max-width: none;
}