/* Kluge Finanz — Sparen & Geldanlage
   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. */

/* ---------- Anker-Ziele: Ausgleich für die fixierte Navigation ---------- */
#sg-liste,
#tagesgeld,
#festgeld,
#depot-broker {
  scroll-margin-top: var(--nav-h);
}

/* ---------- 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 jetzt identisch zu .hero--home (site.css) — Hero-Gesamthöhe soll
   sitewide der Startseite entsprechen, siehe Bericht "Hero-Höhe angleichen". */
.sg-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: bereits freigegebene, echte PNG-Grafik (Ausnahme vom
   sitewide gemeinsamen, noch leeren .hero-visual-slot) — bewusst ohne
   Border/Hintergrund, die transparente PNG soll direkt auf dem
   Hero-Hintergrund wirken. Gleiche Höhenformel wie .hero-visual-slot
   (site.css), damit die Hero-Gesamthöhe sitewide konsistent bleibt — die
   PNG selbst skaliert dank object-fit: contain automatisch proportional
   mit, ohne beschnitten oder verzerrt zu werden. */
.sg-hero-visual {
  position: relative;
  min-width: 0;
  height: clamp(240px, 38vw, 297px);
}
.sg-hero-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* ---------- Produktkarten (echte Produkte) ---------- */
/* Übernimmt exakt das bestehende Kartensystem von /kreditkarten/, /konten/,
   /kredite/ (dort z. B. .kd-grid/.kd-card) — nur die Klassennamen sind auf
   diese Seite skaliert, Maße, Radien, Border, Grid-Verhalten sind bewusst
   identisch übernommen. Kein neues Kartendesign. */
.sg-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.sg-product-grid > * { min-width: 0; }
/* Das Grid ist dauerhaft auf drei Spalten ausgelegt (identisch zu .kd-grid
   auf /kredite/) — aktuell ist nur das erste Grid-Item mit der echten
   DKB-Karte belegt, Spalte 2 und 3 bleiben leer, bis weitere geprüfte
   Produkte ergänzt werden. Keine Zentrierung, kein eigener max-width auf
   der Karte, keine sichtbaren Platzhalter für die leeren Spalten. */
.sg-card {
  position: relative;
  overflow: hidden;
}
.sg-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-gold-dim), transparent);
  opacity: 0.7;
}
.sg-card .product-top { padding-right: 0; }
/* .cc-hero-value ist sitewide auf text-transform: uppercase gesetzt (u. a.
   für Beträge wie "2.500–100.000 €" gedacht, wo Groß-/Kleinschreibung keine
   Rolle spielt). Bei einem Zinssatz mit "p. a."-Zusatz würde derselbe
   Mechanismus fälschlich "P. A." erzeugen. Gezielt für die Produktkarten
   dieser Seite zurückgesetzt, ohne die globale Regel für andere Seiten zu
   verändern. */
.sg-card .cc-hero-value {
  text-transform: none;
}

/* ---------- 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) — die
   Überschriften dieser Seite sind länger und sollen die volle Contentbreite
   nutzen. Override für alle Inhaltsbereiche der Seite. */
#sg-liste .section-head,
#sg-liste .section-head p,
#tagesgeld .section-head,
#tagesgeld .section-head p,
#festgeld .section-head,
#festgeld .section-head p,
#depot-broker .section-head,
#depot-broker .section-head p,
#sg-grundlagen .section-head,
#sg-grundlagen .section-head p {
  max-width: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  /* Gestapelt unter dem Hero-Text: feste Höhe durch die tatsächliche
     Bildproportion ersetzen, damit die Fläche exakt zum gerenderten Bild
     passt statt durch object-fit: contain zusätzlichen Leerraum zu
     erzeugen. Grafik wurde auf ein neues 1:1-Motiv aktualisiert (vorher
     1536×1024 = 3:2) — Seitenverhältnis entsprechend angepasst, gleiches
     Prinzip wie auf den anderen Hauptseiten mit 1:1-Hero-Grafiken. */
  .sg-hero-visual {
    margin-top: 2.5rem;
    width: 100%;
    max-width: 420px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
  }
  .sg-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sg-product-grid { grid-template-columns: 1fr; }
}