/* Gemeinsame Bausteine für datengestützte Ratgeber: Kennzahlen, Diagramme, Rechner, Methodik.
   Basis-Typografie und Layout bleiben im jeweiligen Beitrag, damit alle Ratgeber gleich aussehen. */

a { color: #9a6a72; }
td { font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; margin: 24px 0; -webkit-overflow-scrolling: touch; }
.table-wrap table { margin: 0; }

.note { background: white; border: 1px solid #f0e2dc; border-radius: 12px; padding: 20px 24px; margin: 24px 0; }
.note strong { color: #2A372C; }
.note p:last-child { margin-bottom: 0; }

/* Kennzahlen */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #ecdcd6; border: 1px solid #ecdcd6; border-radius: 12px; overflow: hidden; margin: 8px 0 40px; }
.stat { background: white; padding: 18px 16px; }
.stat .n { display: block; font-family: 'Playfair Display', serif; font-size: 26px; color: #2A372C; line-height: 1.25; font-variant-numeric: tabular-nums; padding-bottom: 0.06em; }
.stat .l { display: block; font-size: 13px; color: #6b7268; line-height: 1.4; margin-top: 4px; }

/* Diagramm-Rahmen */
figure.chart { background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 24px 24px 18px; margin: 28px 0; }
.chart-title { font-weight: 600; color: #2A372C; font-size: 16px; margin-bottom: 4px; }
.chart-sub { font-size: 13px; color: #6b7268; margin-bottom: 20px; }
figure.chart figcaption { font-size: 13px; color: #6b7268; margin-top: 16px; line-height: 1.55; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: #5b6459; margin-top: 14px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* Säulendiagramm (Verteilung) */
.hist { position: relative; display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; align-items: end; height: 220px; padding-top: 28px; border-bottom: 1px solid #d9cfc9; }
.hist .col { position: relative; height: 100%; display: flex; align-items: flex-end; }
.hist .bar { width: 100%; background: #e8c1c5; border-radius: 4px 4px 0 0; transition: background-color .25s ease; }
.hist .col.median .bar { background: #3b4a3a; }
.hist .col.mine .bar { background: #b9858c; }
.hist .cnt { position: absolute; left: 0; right: 0; text-align: center; font-size: 11px; color: #6b7268; font-variant-numeric: tabular-nums; }
.hist-band { position: absolute; top: 0; bottom: 0; border: 1px dashed #9a6a72; border-bottom: none; border-radius: 6px 6px 0 0; pointer-events: none; }
.hist-band span { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; color: #9a6a72; background: white; padding: 0 4px; }
.hist-x { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; margin-top: 6px; }
.hist-x span { text-align: center; font-size: 11px; color: #6b7268; font-variant-numeric: tabular-nums; }

.mybudget { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #f0e8e4; }
.mybudget label { font-size: 14px; font-weight: 600; color: #2A372C; }
.mybudget input { width: 150px; border: 1px solid #d1d5db; border-radius: 8px; padding: 8px 10px; font-size: 15px; font-variant-numeric: tabular-nums; }
.mybudget input:focus { outline: 2px solid #e8c1c5; border-color: transparent; }
.mybudget output { font-size: 14px; color: #3b4a3a; flex-basis: 100%; min-height: 1.5em; }

/* Horizontale Balken */
.hbars { display: grid; gap: 12px; }
.hrow, .range-row { display: grid; grid-template-columns: 132px 1fr; gap: 12px; align-items: center; }
.hrow .lab, .range-row .lab { font-size: 14px; color: #2A372C; line-height: 1.3; }
.lab small { display: block; font-size: 12px; color: #8a9087; }
.htrack { position: relative; height: 28px; background: #faf4f1; border-radius: 6px; }
.hfill { position: absolute; left: 0; top: 0; bottom: 0; background: #e8c1c5; border-radius: 6px; }
.hfill.dark { background: #3b4a3a; }
.hfill.mid { background: #b9858c; }
.hval { position: absolute; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 600; color: #2A372C; font-variant-numeric: tabular-nums; padding-left: 8px; white-space: nowrap; }
.hval.in { color: white; }
.hline { position: absolute; top: -6px; bottom: -6px; border-left: 2px dashed #9a6a72; }

/* Spannweiten (Median + mittlere Hälfte) */
.rtrack { position: relative; height: 30px; }
.rtrack::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid #efe5e0; }
.riqr { position: absolute; top: 9px; height: 12px; background: #f1d9dc; border-radius: 6px; }
.rmed { position: absolute; top: 5px; width: 4px; height: 20px; margin-left: -2px; background: #3b4a3a; border-radius: 2px; }
.rlab { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; color: #2A372C; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: 6px; }
.raxis { display: grid; grid-template-columns: 132px 1fr; gap: 12px; margin-top: 4px; }
.raxis div { position: relative; height: 18px; }
.raxis span { position: absolute; transform: translateX(-50%); font-size: 11px; color: #8a9087; font-variant-numeric: tabular-nums; }

/* Rechner */
.calc { background: white; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 28px; margin: 28px 0; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.calc label.f { display: block; font-size: 13px; font-weight: 600; color: #2A372C; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.calc input[type=range] { width: 100%; accent-color: #3b4a3a; }
.calc input[type=date], .calc select { width: 100%; border: 1px solid #d1d5db; border-radius: 8px; padding: 9px 10px; font-size: 15px; background: white; color: #2A372C; font-family: inherit; }
.calc .gval { font-variant-numeric: tabular-nums; font-weight: 600; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; align-self: end; }
.checks label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.checks input { accent-color: #3b4a3a; width: 16px; height: 16px; }
.calc-out { margin-top: 24px; padding-top: 20px; border-top: 1px solid #f0e8e4; }
.calc-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.calc-total .big { font-family: 'Playfair Display', serif; font-size: 34px; color: #2A372C; font-variant-numeric: tabular-nums; line-height: 1.25; padding-bottom: 0.06em; }
.calc-total .small { font-size: 14px; color: #5b6459; }
.stack { display: flex; height: 18px; border-radius: 9px; overflow: hidden; margin: 16px 0 12px; background: #faf4f1; }
.stack span { height: 100%; transition: flex-grow .35s ease; }
.calc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; font-size: 14px; margin: 0; list-style: none; }
.calc-list li { display: flex; justify-content: space-between; gap: 8px; margin: 0; padding: 3px 0; border-bottom: 1px solid #f6efeb; }
.calc-list li i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; }
.calc-list b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-pos { font-size: 14px; color: #3b4a3a; margin-top: 14px; margin-bottom: 0; }
.download { display: inline-flex; align-items: center; gap: 10px; background: #2A372C; color: white !important; text-decoration: none; padding: 12px 20px; border-radius: 10px; font-weight: 600; font-size: 15px; }
.download:hover { background: #3b4a3a; }

/* Ablauf-Schritte und Zeitachse */
.steps { list-style: none; margin: 24px 0; padding: 0; counter-reset: s; display: grid; gap: 12px; }
.steps li { counter-increment: s; background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 18px 20px 18px 64px; position: relative; margin: 0; }
.steps li::before { content: counter(s); position: absolute; left: 18px; top: 16px; width: 32px; height: 32px; border-radius: 50%; background: #3b4a3a; color: white; font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.steps li strong { display: block; color: #2A372C; margin-bottom: 2px; }
.steps li span.when { display: inline-block; font-size: 12px; font-weight: 600; color: #9a6a72; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.steps li p { margin: 0; font-size: 15px; }

.tl { position: relative; margin: 8px 0 0; padding: 0; list-style: none; }
.tl li { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 10px 0; margin: 0; border-bottom: 1px solid #f6efeb; font-size: 15px; transition: opacity .3s ease; }
.tl li:last-child { border-bottom: none; }
.tl .d { font-weight: 600; color: #2A372C; font-variant-numeric: tabular-nums; }
.tl li.past { opacity: .45; }
.tl li.past .d::after { content: " vorbei"; font-weight: 400; color: #a8443b; font-size: 12px; }
.tl li.next .d { color: #9a6a72; }

.method { background: #f7efeb; border-radius: 12px; padding: 20px 22px; margin: 24px 0; }
.method p, .method li { font-size: 14px; line-height: 1.6; color: #4d574b; }
.method h3 { margin-top: 0; font-size: 16px; }

/* Quellen: kleiner Auslöser, Liste im Popup */
.src-trigger { margin: 12px 0 0; }
.src-btn { display: inline-flex; align-items: center; gap: 6px; background: white; border: 1px solid #e3d3cd; border-radius: 999px; padding: 5px 14px; font: inherit; font-size: 13px; color: #6f5258; cursor: pointer; }
.src-btn:hover { background: #fdf8f6; border-color: #d4adb1; }
.src-btn:focus-visible { outline: 2px solid #e8c1c5; outline-offset: 2px; }
.src-dialog { margin: auto; border: none; border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 640px); box-shadow: 0 20px 50px rgba(0,0,0,0.25); color: #3b4a3a; background: white; }
.src-dialog::backdrop { background: rgba(42,55,44,0.45); }
.src-dialog[open] { display: flex; flex-direction: column; }
.src-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 10px; border-bottom: 1px solid #f0e8e4; }
.src-head h3 { margin: 0; font-size: 16px; color: #2A372C; }
.src-close { background: none; border: none; font-size: 24px; line-height: 1; color: #6b7268; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.src-close:hover { background: #f6efeb; }
.src-body { overflow-y: auto; padding: 12px 20px 20px; }
.src-body p { font-size: 13px; color: #6b7268; margin-bottom: 10px; }
.sources { font-size: 13px; line-height: 1.5; color: #4d574b; margin: 0 0 0 18px; }
.sources li { margin-bottom: 7px; word-break: break-word; }
.sources a { color: #9a6a72; }

@media (max-width: 640px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  figure.chart { padding: 18px 14px 14px; }
  .hist { gap: 2px; height: 190px; }
  .hist-x { gap: 2px; }
  .hist-x span, .hist .cnt { font-size: 10px; }
  .hrow, .range-row, .raxis { grid-template-columns: 92px 1fr; gap: 8px; }
  .hrow .lab, .range-row .lab { font-size: 13px; }
  .calc { padding: 20px 16px; }
  .calc-grid { grid-template-columns: 1fr; }
  .calc-list { grid-template-columns: 1fr; }
  .steps li { padding-left: 58px; }
  .tl li { grid-template-columns: 96px 1fr; gap: 10px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hist .bar, .stack span, .tl li { transition: none; }
}