/* Unterseite Altersvorsorge "Hallo Zukunft" mit plusrente – ergänzt styles.css
   Leitmotiv: der Kassenbon. Beim Laden druckt er sich aus dem goldenen Schlitz und zeigt,
   wie aus Alltagseinkäufen eine Gutschrift für die Rente wird. Weiter unten läuft die
   Lebenslinie senkrecht durch die Lebenssituationen (Abschnitt "Flexibilität"). */

/* ---------- Startbereich ---------- */
.hz-start {
  background:
    radial-gradient(900px 500px at 85% 10%, rgba(212, 168, 67, 0.10), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--schwarz) 100%);
  padding: 64px 0 96px;
}
.hz-start__raster { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: center; }
.hz-start h1 { animation: einschweben var(--dur-slow) var(--ease-sig) both; max-width: 620px; }
.hz-start__text { font-size: 20px; color: var(--hell); max-width: 580px; margin-bottom: 28px; }
.hz-start .vorteile li { font-size: 18px; }

/* Kassenbon (Signatur-Moment) */
.bon-schacht { position: relative; max-width: 400px; width: 100%; margin-left: auto; padding: 0 14px; overflow: hidden; padding-bottom: 4px; }
.bon-schacht::before {
  content: ""; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 8px;
  background: var(--gold); border-radius: 4px;
}
.bon {
  --papier: #E6EAF0; --tinte: #1C2A4A; --blass: #5A6478;
  margin-top: 4px; padding: 26px 24px 38px; background: var(--papier); color: var(--tinte);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
  animation: bon-drucken 900ms var(--ease-sig) 200ms both;
}
.bon__kopf {
  text-align: center; font-weight: bold; font-size: 17px; margin: 0 0 14px; padding-bottom: 14px;
  border-bottom: 2px dashed rgba(28, 42, 74, 0.28);
}
.bon__zeilen { list-style: none; margin: 0; padding: 0; }
.bon__zeilen li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 9px 0; border-bottom: 1px dotted rgba(28, 42, 74, 0.3); font-size: 17px;
  animation: einschweben var(--dur-med) var(--ease-enter) both;
  animation-delay: calc(520ms + var(--z) * 110ms);
}
.bon__zeilen span { font-weight: bold; }
.bon__zeilen small { display: block; font-weight: normal; font-size: 14px; color: var(--blass); }
.bon__zeilen b { white-space: nowrap; }
.bon__summe {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: 18px 0 12px; padding: 12px 14px; border-radius: 8px;
  background: var(--navy); color: var(--gold); font-weight: bold; font-size: 17px;
  animation: summe-an var(--dur-med) var(--ease-enter) 1300ms both;
}
.bon__summe svg { width: 26px; height: 26px; flex: none; padding: 5px; border-radius: 50%; background: var(--gold); color: var(--navy); }
.bon__fuss { margin: 0; text-align: center; font-size: 13px; color: var(--blass); }
@keyframes bon-drucken { from { transform: translateY(-102%); } }
@keyframes summe-an { from { opacity: 0; transform: scale(0.96); } }

/* ---------- So funktioniert die plusrente ---------- */
.drei-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.drei-schritte li { position: relative; }
.drei-schritte li + li::before {
  content: ""; position: absolute; top: 21px; left: calc(-100% + 20px); width: calc(100% - 24px); height: 2px;
  background: var(--linie);
}
.drei-schritte__nr {
  position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px;
  border-radius: 50%; border: 2px solid var(--gold); background: var(--gold); color: var(--schwarz); font-weight: bold;
}
.drei-schritte h3 { font-size: 21px; margin-bottom: 8px; }
.drei-schritte p { margin: 0; font-size: 17px; max-width: 320px; }
.js-bewegung .drei-schritte__nr { background: var(--schwarz); color: var(--gold); transition: background var(--dur-med) var(--ease-enter), color var(--dur-med) var(--ease-enter); transition-delay: calc(var(--i, 0) * var(--staffel) + 300ms); }
.js-bewegung .drei-schritte .da .drei-schritte__nr { background: var(--gold); color: var(--schwarz); }

.vergleich { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 20px; margin-top: 64px; }
.vergleich__seite { border: 1px solid var(--linie); border-radius: var(--radius); padding: 26px 26px 22px; position: relative; overflow: hidden; }
.vergleich__seite h3 { font-size: 20px; color: var(--hell); }
.vergleich__seite p { margin: 0; font-size: 17px; }
.vergleich__seite--gold { background: rgba(212, 168, 67, 0.08); border-color: rgba(212, 168, 67, 0.45); }
.vergleich__seite--gold h3 { color: var(--gold); }
.vergleich__seite--gold p { color: var(--hell); }
.vergleich__seite--gold::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); transform-origin: top; }
.js-bewegung .vergleich__seite--gold::before { transform: scaleY(0); transition: transform var(--dur-slow) var(--ease-enter) 350ms; }
.js-bewegung .vergleich__seite--gold.da::before { transform: none; }

/* ---------- Shops ---------- */
.shops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.shop-bereich { background: rgba(13, 17, 23, .35); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px 22px 14px; }
.shop-bereich h3 { font-size: 18px; margin-bottom: 10px; }
.shop-bereich ul { list-style: none; margin: 0; padding: 0; }
.shop-bereich li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px dotted var(--linie); font-size: 16px; color: var(--hell); }
.shop-bereich b { color: var(--gold); white-space: nowrap; }
/* Die Cashback-Werte gleiten nach der Karte von rechts herein */
.js-bewegung .shop-bereich b { display: inline-block; opacity: 0; transform: translateX(12px); transition: opacity var(--dur-med) var(--ease-enter), transform var(--dur-med) var(--ease-enter); transition-delay: calc(var(--i, 0) * var(--staffel) + 300ms); }
.js-bewegung .shop-bereich.da b { opacity: 1; transform: none; }

/* ---------- Überblick ---------- */
.hz-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.hz-zwei p { max-width: 560px; }
.wahl { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.wahl li {
  display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: center;
  padding: 20px 22px; background: var(--navy); border: 1px solid var(--linie); border-radius: var(--radius);
}
.wahl .symbol { margin: 0; }
.wahl strong { display: block; color: var(--weiss); font-size: 19px; margin-bottom: 2px; }
.wahl p { margin: 0; font-size: 17px; }
.wahl__titel { color: var(--weiss); font-weight: bold; font-size: 19px; margin-bottom: 16px; }
.hinweis-klein { font-size: 16px; margin-top: 18px; }

/* ---------- Exklusivtarif ---------- */
.gruende-drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grund {
  background: rgba(13, 17, 23, .35); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 28px 24px; position: relative; overflow: hidden;
}
.grund::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold);
  transform-origin: top;
}
.grund h3 { font-size: 20px; }
.grund p { margin: 0; font-size: 17px; }
.nur-charta {
  display: flex; align-items: center; gap: 20px; margin-top: 36px; padding: 20px 24px;
  border: 1px solid var(--linie); border-radius: var(--radius); max-width: 760px;
}
.nur-charta img { width: 64px; height: 64px; border-radius: 8px; background: var(--weiss); flex: none; }
.nur-charta p { margin: 0; color: var(--hell); font-size: 17px; }
.js-bewegung .grund::before { transform: scaleY(0); transition: transform var(--dur-slow) var(--ease-enter); transition-delay: calc(var(--i, 0) * var(--staffel) + 250ms); }
.js-bewegung .grund.da::before { transform: none; }

/* ---------- Flexibilität: die Lebenslinie läuft senkrecht ---------- */
.lebensweg__kopf { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 24px; margin: 8px 0 20px; }
.lebensweg__kopf span { color: var(--weiss); font-weight: bold; font-size: 18px; }
.lebensweg__kopf span:first-child { text-align: right; }
.lebensweg__kopf span:last-child { grid-column: 3; color: var(--gold); }
.lebensweg { list-style: none; margin: 0; padding: 0; }
.station { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 24px; align-items: start; position: relative; padding-bottom: 26px; }
.station::before, .station::after {
  content: ""; position: absolute; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; background: var(--linie);
}
.station::after { background: var(--gold); transform-origin: top; }
.station:last-child::before, .station:last-child::after { bottom: calc(100% - 22px); }
.station__lage {
  text-align: right; color: var(--weiss); font-weight: bold; font-size: 18px; line-height: 1.4;
  padding-top: 10px;
}
.station__punkt {
  position: relative; z-index: 1; width: 22px; height: 22px; margin: 11px auto 0; border-radius: 50%;
  border: 2px solid var(--gold); background: var(--gold);
}
.station__loesung {
  list-style: none; margin: 0; padding: 14px 18px; background: var(--navy);
  border: 1px solid var(--linie); border-radius: var(--radius);
}
.station__loesung li { position: relative; padding-left: 26px; font-size: 17px; color: var(--hell); line-height: 1.5; margin: 4px 0; }
.station__loesung li::before {
  content: ""; position: absolute; left: 2px; top: 5px; width: 10px; height: 6px;
  border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg);
}
.stern-hinweis { font-size: 15px; margin-top: 8px; }
/* Beim Hinscrollen: Linienstück zieht sich, der Punkt füllt sich, die Lösung gleitet herein */
.js-bewegung .station::after { transform: scaleY(0); transition: transform var(--dur-slow) var(--ease-enter); }
.js-bewegung .station__punkt { background: var(--schwarz); transform: scale(0.7); transition: background var(--dur-med) var(--ease-enter) 200ms, transform var(--dur-med) var(--ease-enter) 200ms; }
.js-bewegung .station__lage { opacity: 0; transform: translateX(12px); transition: opacity var(--dur-slow) var(--ease-enter), transform var(--dur-slow) var(--ease-enter); }
.js-bewegung .station__loesung { opacity: 0; transform: translateX(-12px); transition: opacity var(--dur-slow) var(--ease-enter) 120ms, transform var(--dur-slow) var(--ease-enter) 120ms; }
.js-bewegung .station.da::after { transform: none; }
.js-bewegung .station.da .station__punkt { background: var(--gold); transform: none; }
.js-bewegung .station.da .station__lage,
.js-bewegung .station.da .station__loesung { opacity: 1; transform: none; }

/* ---------- Kosten & Ablaufleistung ---------- */
.beispiel { width: 100%; border-collapse: collapse; font-size: 17px; }
.beispiel caption { text-align: left; color: var(--weiss); font-weight: bold; font-size: 19px; margin-bottom: 14px; }
.beispiel th, .beispiel td { padding: 12px 10px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: middle; }
.beispiel thead th { color: var(--hell); font-size: 15px; font-weight: bold; }
.beispiel tbody th { color: var(--weiss); white-space: nowrap; }
.beispiel td.zahl-rechts { text-align: right; white-space: nowrap; color: var(--hell); }
.beispiel .balken-zelle { width: 42%; }
.balken { display: flex; align-items: center; gap: 12px; }
.balken__spur { flex: 1; height: 10px; border-radius: 5px; background: rgba(139, 148, 158, 0.14); overflow: hidden; }
.balken__fuellung { display: block; height: 100%; width: var(--w); background: var(--gold); border-radius: 5px; transform-origin: left; }
.balken strong { color: var(--weiss); white-space: nowrap; min-width: 92px; text-align: right; }
.js-bewegung .beispiel .balken__fuellung { transform: scaleX(0); transition: transform var(--dur-slow) var(--ease-enter); transition-delay: calc(200ms + var(--b) * 90ms); }
.js-bewegung .beispiel.da .balken__fuellung { transform: none; }
.fussnote { font-size: 15px; margin-top: 14px; line-height: 1.5; }

.auszeichnungen { display: grid; gap: 20px; }
.auszeichnung {
  display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center;
  padding: 20px; background: var(--navy); border: 1px solid var(--linie); border-radius: var(--radius);
}
.auszeichnung img { background: var(--weiss); border-radius: 8px; padding: 6px; width: 100%; height: auto; }
.auszeichnung--hoch { grid-template-columns: 110px 1fr; }
.auszeichnung h3 { font-size: 19px; margin-bottom: 6px; }
.auszeichnung p { margin: 0; font-size: 16px; }
.platz { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.platz span { font-size: 15px; color: var(--hell); border: 1px solid var(--linie); border-radius: 999px; padding: 4px 12px; }
.platz strong { color: var(--gold); }

/* ---------- Fondsanlage & plusrente ---------- */
.portfolios { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 24px; }
.portfolios div { background: rgba(13, 17, 23, .35); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px; }
.portfolios strong { display: block; color: var(--weiss); font-size: 16px; margin-bottom: 6px; }
.portfolios ul { margin: 0; padding-left: 18px; font-size: 16px; }
.merkmale { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.merkmale li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; font-size: 17px; }
.merkmale li strong { color: var(--weiss); }
.merkmale .haken { width: 26px; height: 26px; margin-top: 1px; }
.merkmale .haken svg { width: 15px; height: 15px; }


/* ---------- Tarifdetails ---------- */
.steckbrief { max-width: 900px; }
.steckbrief dl { margin: 0; }
.steckbrief .zeile { display: grid; grid-template-columns: 300px 1fr; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.steckbrief dt { color: var(--weiss); font-weight: bold; font-size: 17px; }
.steckbrief dd { margin: 0; font-size: 17px; color: var(--hell); }
.mehr-details summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  margin-top: 22px; color: var(--gold); font-weight: bold; font-size: 17px;
  padding: 10px 0; transition: color var(--dur-fast) var(--ease-enter);
}
.mehr-details summary::-webkit-details-marker { display: none; }
.mehr-details summary:hover { color: var(--gold-hell); }
.mehr-details summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.mehr-details summary svg { width: 18px; height: 18px; transition: transform var(--dur-med) var(--ease-enter); }
.mehr-details[open] summary svg { transform: rotate(180deg); }
.mehr-details[open] summary .zu { display: none; }
.mehr-details:not([open]) summary .auf { display: none; }
.mehr-details[open] dl { animation: einschweben var(--dur-med) var(--ease-enter) both; }

/* ---------- Risikohinweis ---------- */
.risiko { border-top: 1px solid var(--linie); padding: 36px 0 8px; }
.risiko p { font-size: 15px; line-height: 1.6; max-width: 900px; }
.risiko strong { color: var(--hell); }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .hz-start__raster, .hz-zwei { gap: 48px; }
  .gruende-drei { grid-template-columns: 1fr; }
  .steckbrief .zeile { grid-template-columns: 220px 1fr; }
}

/* ---------- Handy ---------- */
@media (max-width: 820px) {
  .hz-start { padding: 40px 0 64px; }
  .hz-start__raster, .hz-zwei { grid-template-columns: 1fr; }
  .hz-start__text { font-size: 18px; }
  .lebensweg__kopf { display: none; }
  .station { grid-template-columns: 24px 1fr; gap: 16px; }
  .station::before, .station::after { left: 11px; }
  .station__punkt { grid-row: 1 / span 2; grid-column: 1; margin: 2px 0 0; }
  .station__lage { grid-column: 2; text-align: left; padding-top: 0; }
  .station__loesung { grid-column: 2; }
  .js-bewegung .station__lage { transform: translateY(12px); }
  .js-bewegung .station__loesung { transform: translateY(12px); }
  .beispiel .balken-zelle { width: auto; }
  .beispiel thead .nur-gross, .beispiel .nur-gross { display: none; }
  .auszeichnung, .auszeichnung--hoch { grid-template-columns: 96px 1fr; gap: 16px; padding: 16px; }
  .portfolios { grid-template-columns: 1fr; }
  .steckbrief .zeile { grid-template-columns: 1fr; gap: 4px; }
  .nur-charta { flex-direction: column; align-items: flex-start; }
}
.auszeichnung--text { grid-template-columns: 1fr; }
@media (max-width: 820px) { .auszeichnung--text { grid-template-columns: 1fr; } }
/* Kosten: der Tabelle mehr Breite geben */
.hz-zwei--breit { grid-template-columns: 1.3fr 0.9fr; gap: 48px; }
.beispiel td { white-space: nowrap; }
.auszeichnung { grid-template-columns: 120px 1fr; }
.auszeichnung--hoch { grid-template-columns: 90px 1fr; }
@media (max-width: 1024px) { .hz-zwei--breit { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .auszeichnung, .auszeichnung--hoch { grid-template-columns: 96px 1fr; } .auszeichnung--text { grid-template-columns: 1fr; } }
.auszeichnung.auszeichnung--text { grid-template-columns: 1fr; }
/* Handy: Kostentabelle kompakt, damit sie ohne seitliches Scrollen passt */
@media (max-width: 820px) {
  .beispiel { font-size: 15px; }
  .beispiel th, .beispiel td { padding: 10px 4px; }
  .beispiel thead th { font-size: 13px; line-height: 1.3; }
  .beispiel tbody th { white-space: normal; }
  .balken strong { min-width: 0; }
  .beispiel caption { font-size: 18px; }
}
/* Cashback-Abschnitte: Tablet und Handy */
@media (max-width: 1024px) {
  .shops { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .bon-schacht { margin: 8px auto 0; }
  .drei-schritte { grid-template-columns: 1fr; gap: 24px; }
  .drei-schritte li { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; }
  .drei-schritte li + li::before { display: none; }
  .drei-schritte__nr { grid-row: 1 / span 2; margin: 0; }
  .drei-schritte h3 { margin: 8px 0 4px; }
  .vergleich { grid-template-columns: 1fr; margin-top: 44px; }
  .shops { grid-template-columns: 1fr; }
}
/* Startbereich: Siegel unter dem Kassenbon */
.hz-start__rechts { max-width: 400px; width: 100%; margin-left: auto; }
.start-siegel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; padding: 0 14px;
  animation: einschweben var(--dur-med) var(--ease-enter) 1500ms both;
}
.start-siegel__karte {
  display: grid; gap: 8px; align-content: start; text-align: center; text-decoration: none;
  font-size: 15px; line-height: 1.35; color: var(--hell);
  transition: transform var(--dur-fast) var(--ease-enter), color var(--dur-fast) var(--ease-enter);
}
.start-siegel__karte img { width: 100%; height: 120px; object-fit: contain; background: var(--weiss); border-radius: 8px; padding: 6px; }
.start-siegel__karte:hover { transform: translateY(-3px); color: var(--gold); }
.start-siegel__karte:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.start-siegel__stern { grid-column: 1 / -1; margin: 2px 0 0; font-size: 14px; line-height: 1.5; }
@media (max-width: 820px) { .hz-start__rechts { margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .start-siegel { animation: none; } .start-siegel__karte:hover { transform: none; } }

/* Kassenbon: Hinweis auf weitere Shops */
.bon__zeilen li.bon__weitere { justify-content: center; border-bottom: 0; padding-top: 12px; }
.bon__zeilen li.bon__weitere span { font-weight: normal; font-style: italic; color: var(--blass); font-size: 16px; }