/* ---------- Rentenrechner (scoped) ---------- */
#renten-app { --br: rgba(255,255,255,.08); }

/*
  Hard guarantee: the page must never scroll horizontally.
  The Übersicht table is intentionally horizontally scrollable, but ONLY inside
  its own scroll container (.h-scroll).

  This is the most robust fix against layout edge-cases (intrinsic min-width of
  flex items, sticky cells, wide generated tables, etc.) that can otherwise
  surface as a page-level horizontal scrollbar.
*/
html{ overflow-x: hidden; }
body.rr-scope{ overflow-x: hidden; }

/*
  The Übersicht table can become very wide (many dynamic columns).
  Goal: horizontal scrolling must happen ONLY inside the Übersicht container,
  never on the page itself.

  We therefore clip horizontal overflow at the app container level. Nested
  scroll containers (e.g. .h-scroll) still scroll horizontally as intended.
*/
#renten-app{ overflow-x: clip; }
@supports not (overflow: clip){
  #renten-app{ overflow-x: hidden; }
}
/*
  IMPORTANT: the global .card is a flex container.
  Flex items default to min-width:auto which preserves intrinsic content width.
  A very wide child (e.g., the Übersicht table with many columns) can therefore
  force the whole page to become wider than the viewport, creating an unwanted
  horizontal scrollbar on the page.

  Fix: allow flex children to shrink by setting min-width:0.
  Scrolling then happens inside the intended scroll containers (e.g. .h-scroll).
*/
#renten-app .card{background:rgba(255,255,255,.03);border:1px solid var(--br);border-radius:14px;padding:16px 16px 8px;margin:14px 0; min-width:0;}
#renten-app .card > *{min-width:0;}

/*
  Sticky Ergebnisleiste (unten)
  - verhindert Überdeckung am Seitenende via dynamischer CSS-Variable (gesetzt in ui/stickyResultsBar.js)
*/
#renten-app{ padding-bottom: 0; }
#renten-app .grid-rows{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:12px}
#renten-app .grid-rows label{display:flex;flex-direction:column;font-weight:700;font-size:.9rem}
#renten-app .grid-rows input{margin-top:6px;width:100%}

/* Grunddaten layout (Parameter + Personen)
   - entkoppelt die Zeilenhöhen: Personen-Summary beeinflusst nicht mehr die Parameter-Abstände
   - responsive: zwei Spalten auf Desktop, gestapelt auf Tablet/Smartphone
*/
#renten-app .rr-basic-grid{
  display:grid;
  grid-template-columns: minmax(260px, 1fr) minmax(300px, 1fr);
  gap:12px;
  align-items:start;
}
#renten-app .rr-basic-panel{
  border:1px solid var(--br);
  border-radius:12px;
  padding:12px;
  background:rgba(255,255,255,.02);
  min-width:0;
}
#renten-app .rr-basic-panel__title{
  font-weight:900;
  font-size:.95rem;
  margin:0 0 10px;
}
#renten-app .rr-basic-params-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap:10px;
}
#renten-app .rr-basic-params-grid label{display:flex;flex-direction:column;font-weight:700;font-size:.9rem}
#renten-app .rr-basic-params-grid input{margin-top:6px;width:100%}
#renten-app .rr-basic-persons-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:10px;
}

/* Person controls (A/B) in Grunddaten */
#renten-app .rr-person-control{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:700;
  font-size:.9rem;
}
#renten-app .rr-person-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

#renten-app .rr-person-head-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

#renten-app .rr-person-toggle{
  flex:0 0 auto;
}

#renten-app .rr-person-name{
  font-weight:900;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#renten-app .rr-person-control.is-inactive{
  opacity:.9;
}

#renten-app .rr-person-control.is-inactive .rr-person-summary{
  display:none;
}

@media (max-width:520px){
  #renten-app .rr-person-name{ white-space:normal; }
  #renten-app .rr-person-control .rr-person-btn{ width:100%; }
}
#renten-app .rr-person-control .rr-person-label{ display:block; }
#renten-app .rr-person-control .rr-person-btn{ width:auto; white-space:nowrap; }
#renten-app .rr-person-summary{
  font-weight:500;
  font-size:.85rem;
  color: var(--muted);
  line-height:1.25;
  min-height: 0;
}
#renten-app .rr-person-summary .rr-person-summary__row{
  display:flex;
  justify-content:space-between;
  gap:10px;
}
#renten-app .rr-person-summary .rr-person-summary__k{ opacity:.85; }
#renten-app .rr-person-summary .rr-person-summary__v{ color: var(--txt); font-variant-numeric: tabular-nums; }

@media (max-width:900px){
  #renten-app .rr-basic-grid{ grid-template-columns: 1fr; }
}
@media (max-width:520px){
  #renten-app .rr-basic-params-grid{ grid-template-columns: 1fr; }
  #renten-app .rr-person-control .rr-person-btn{ width:100%; }
}

/* Person dialog */
dialog.rr-person-dialog{
  border:1px solid var(--br);
  border-radius:14px;
  padding:0;
  width:min(720px, 96vw);
  background:var(--card);
  color:var(--txt);
}
dialog.rr-person-dialog::backdrop{
  background:rgba(0,0,0,.55);
}
.rr-person-dialog__form{ padding:16px; }
.rr-person-dialog__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.rr-person-dialog__title{ font-size:1.15rem; font-weight:900; }
.rr-person-dialog__sub{ color:var(--muted); font-weight:600; margin-top:2px; }
.rr-person-dialog__close{ min-width:44px; padding:8px 10px; }
.rr-person-dialog__grid{ display:grid; grid-template-columns:repeat(2, minmax(220px, 1fr)); gap:12px; }
.rr-person-dialog__grid .rr-field{ display:flex; flex-direction:column; font-weight:700; font-size:.9rem; }
.rr-person-dialog__grid .rr-field input{ margin-top:6px; width:100%; }
.rr-person-dialog__grid input[type="date"]{ height:42px; padding:8px 12px; border:1px solid var(--br); border-radius:10px; background:var(--card); color:var(--txt); }
.rr-person-dialog__grid .rr-field__label{ display:block; margin-bottom:6px; }

/* Birthdate + BBG toggle in one row (right column on desktop) */
.rr-person-dialog__row{
  grid-column:1 / -1;
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.rr-person-dialog__name{ flex:1 1 220px; min-width:180px; }
.rr-person-dialog__name input{ height:42px; padding:8px 12px; border:1px solid var(--br); border-radius:10px; background:var(--card); color:var(--txt); }
.rr-person-dialog__birth{ flex:0 0 150px; }
.rr-person-dialog__birth input[type="date"]{ width:150px; }
.rr-person-dialog__bbg{
  align-self:flex-end;
  min-height:42px;
  height:42px;
}

.rr-person-dialog__drv45{
  grid-column: 1 / -1;
  height: 42px;
}

.rr-person-dialog__minGrv{
  height: 42px;
}

.rr-person-dialog__gkvAlways{
  height: 42px;
}

/* Forces a new grid row without adding extra visual elements */
.rr-person-dialog__break{ grid-column:1 / -1; height:0; padding:0; margin:0; }
.rr-person-dialog__info{ margin-top:12px; padding:10px 12px; border:1px solid var(--br); border-radius:12px; background:rgba(255,255,255,.03); color:var(--txt); }
.rr-person-dialog__info .rr-person-info__row{ display:flex; justify-content:space-between; gap:12px; }
.rr-person-dialog__info .rr-person-info__k{ color:var(--muted); font-weight:700; }
.rr-person-dialog__info .rr-person-info__v{ font-variant-numeric: tabular-nums; font-weight:900; }
.rr-person-dialog__error{ margin-top:10px; color:#ef4444; font-weight:700; min-height:1.4em; }
.rr-person-dialog__actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }
@media (max-width:640px){
  .rr-person-dialog__grid{ grid-template-columns:1fr; }
}
#renten-app .actions{margin-top:12px;display:flex;gap:10px}
#renten-app .section-title{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#renten-app .section-title .dot{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,165,0,.1);border:1px solid var(--br);font-weight:900}
#renten-app .add-grid{display:grid;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));gap:10px;align-items:end;margin-bottom:12px}
#renten-app .add-grid-b{grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))}
#renten-app .add-grid .btn.icon-only,
#renten-app .add-grid-b .btn.icon-only{width:48px; justify-self:end}
#renten-app .add-grid label{display:flex;flex-direction:column;font-weight:700;font-size:.85rem}
#renten-app .add-grid input,#renten-app .add-grid select{margin-top:6px;width:100%}
#renten-app .btn.icon-only{min-width:44px;padding:8px;display:inline-flex;align-items:center;justify-content:center}
#renten-app .btn.icon-only svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}
#renten-app table.table{width:100%;border-collapse:collapse}
#renten-app .table th,#renten-app .table td{padding:10px 8px;border-bottom:1px solid var(--br);white-space:nowrap}
#renten-app .table tbody tr:nth-child(odd){background:rgba(255,255,255,.02)}

/* Row tinting for Renten & Bausteine tables: match series colors (RR_COLORS) */
#renten-app #tblPensions tbody tr.rr-colored-row,
#renten-app #tblBlocks tbody tr.rr-colored-row{
  background: var(--rr-row-tint, rgba(255,255,255,.02)) !important;
  box-shadow: inset 4px 0 0 var(--rr-row-color, transparent);
}

/* keep hover readable without changing the series color */
#renten-app #tblPensions tbody tr.rr-colored-row:hover,
#renten-app #tblBlocks tbody tr.rr-colored-row:hover{
  background: color-mix(in srgb, var(--rr-row-tint) 70%, rgba(255,255,255,.06)) !important;
}
#renten-app .edit-row td{padding:0!important}
#renten-app .edit-wrap{padding:12px}
#renten-app .edit-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:10px;align-items:end}
#renten-app .edit-grid .field{display:flex;flex-direction:column}
#renten-app .edit-grid .field label{font-weight:700;font-size:.85rem;margin-bottom:6px}
#renten-app .edit-grid .actions{display:flex;gap:8px}
@media (max-width:1100px){#renten-app .edit-grid{grid-template-columns:repeat(2,minmax(160px,1fr))}#renten-app .add-grid{grid-template-columns:1fr 1fr}#renten-app .add-grid-b{grid-template-columns:1fr 1fr}}
@media (max-width:640px){#renten-app .edit-grid{grid-template-columns:1fr}}
#renten-app .h-scroll{display:block;width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}

/*
  For the Übersicht table: let it grow to its intrinsic width (so the inner
  scrollbar appears), but never force the page wider.
*/
#renten-app .h-scroll > table#resultTable{
  width: max-content;
  min-width: 100%;
}

/* Prevent page-level horizontal scrolling: wide tables scroll inside their own wrapper */
#renten-app .rr-table-scroll{
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
#renten-app .rr-table-scroll > table{
  width: 100%;
}

/* numeric alignment (headings should align with numeric column content) */
#renten-app table td.num,
#renten-app table th.num{
  text-align:right;
  font-variant-numeric: tabular-nums;
}

/* Ensure header alignment matches the user's requested layout in the “Renten” and
   “Bausteine” tables. The goal here is visual consistency (headers aligned like the
   content), and specifically: the person icon header plus the listed label/date columns
   must be LEFT-aligned.

   Note: numeric columns remain right-aligned via th.num. */

/* Renten: Person-Icon, Bezeichnung, Start, Ende => left */
#renten-app #tblPensions thead th:nth-child(1),
#renten-app #tblPensions thead th:nth-child(2),
#renten-app #tblPensions thead th:nth-child(3),
#renten-app #tblPensions thead th:nth-child(4){
  text-align:left !important;
}

/* Bausteine: Person-Icon, Bezeichnung, Entnahme Art => left */
#renten-app #tblBlocks thead th:nth-child(1),
#renten-app #tblBlocks thead th:nth-child(2),
#renten-app #tblBlocks thead th:nth-child(9){
  text-align:left !important;
}

/* Bausteine: Sparphase, Entnahmephase => right (requested) */
#renten-app #tblBlocks thead th:nth-child(4),
#renten-app #tblBlocks thead th:nth-child(7){
  text-align:right !important;
}

/* Bausteine: letzte Spalte (Aktionen) rechts */
#renten-app #tblBlocks thead th:nth-child(11){
  text-align:right !important;
}

#renten-app td.num .two-line{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
#renten-app td.num .two-line .sub{opacity:.75;font-size:.85em}


/* align OK / Cancel to the right in edit rows (pensions & blocks) */
#renten-app .edit-grid{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:12px}
#renten-app .edit-grid .actions{grid-column:1 / -1;display:flex;justify-content:flex-end;gap:10px}


#chartArea{
  padding:0 !important;
  overflow:hidden;
}

/* Chart sizing */
#chartArea .chart-wrap{
  width:100%;
  height:clamp(280px, 60vh, 78vh);
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  display:flex;
  flex-direction:column;
}
#chartArea .rr-chart-legend{
  margin:0;
  padding:6px 8px;
}
#chartArea .chart-wrap canvas{
  flex:1 1 auto;
  min-height:0;
  width:100% !important;
  height:100% !important;
  display:block;
}

/* Sticky Ergebnisleiste (unten) */
.rr-sticky-results{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  background:var(--card);
  border-top:1px solid var(--br);
  box-shadow: 0 -6px 18px rgba(0,0,0,.06);
  transform: translateY(110%);
  transition: transform .18s ease;
  max-width:100%;
}
.rr-sticky-results.is-visible{ transform: translateY(0); }
.rr-sticky-results[aria-hidden="true"]{ visibility:hidden; }
.rr-sticky-results.is-visible[aria-hidden="false"]{ visibility:visible; }

.rr-sticky-results .rr-sticky-inner{
  padding:8px 12px;
}
.rr-sticky-results .rr-sticky-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:8px 16px;
  align-items:end;
}
.rr-sticky-results .rr-sticky-cell{ min-width:0; }
.rr-sticky-results .rr-sticky-h{
  color:var(--muted);
  font-weight:700;
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.rr-sticky-results .rr-sticky-h--sub{ margin-top:6px; }
.rr-sticky-results .rr-sticky-v{
  color:var(--txt);
  font-weight:900;
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}
.rr-sticky-results .rr-sticky-cell--right{ text-align:right; }

/* Ensure in-page anchors are not hidden behind the sticky site header */
:root{ --rr-scrollTopOffset: 72px; }
#taxsv-card,
#rr-pensions,
#rr-blocks,
#chartArea,
#rr-overview,
#rr-rate-scenarios{
  scroll-margin-top: calc(var(--rr-scrollTopOffset) + 16px);
}


.rr-sticky-results .rr-sticky-toprow{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 4px 0;
}
.rr-sticky-results .rr-sticky-quicknav{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  flex-wrap:wrap;
}
.rr-sticky-results .rr-qn-btn{
  padding:3px 7px;
  font-size:11px;
  text-decoration:none;
}
.rr-sticky-results .rr-sticky-scenario-switch{
  display:inline-flex;
  gap:6px;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
  margin:0;
}
.rr-sticky-results .rr-ss-btn{
  appearance:none;
  border:1px solid var(--br);
  background: rgba(0,0,0,.04);
  color: var(--txt);
  font-weight:900;
  font-size:12px;
  line-height:1;
  padding:4px 8px;
  border-radius:9999px;
  cursor:pointer;
}
body.dark .rr-sticky-results .rr-ss-btn,
body[data-theme="dark"] .rr-sticky-results .rr-ss-btn,
[data-theme="dark"] .rr-sticky-results .rr-ss-btn{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
}
.rr-sticky-results .rr-ss-btn.is-active{
  background: var(--pri, #ff6b00);
  border-color: var(--pri, #ff6b00);
  color:#fff;
}


@media (max-width:520px){
  .rr-sticky-results .rr-sticky-grid{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* Chart footer (Kapital gesamt letzter Zeitraum) */
#chartArea .chart-footer{
  display:flex;
  align-items:baseline;
  /* All footer metrics should sit on the right, next to each other.
     Only wrap when the viewport is too narrow. */
  justify-content:flex-end;
  gap:10px 16px;
  flex-wrap:wrap;
  /* Ensure footer never touches/overlaps the x-axis labels inside the canvas */
  margin-top:10px;
  padding:8px 2px 2px 2px;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
}
#chartArea .chart-footer .cf-item{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  white-space:nowrap;
  min-width:0;
  text-align:right;
}
/* Legacy: used when only a single right-aligned value existed. Keep but neutralize. */
#chartArea .chart-footer .cf-item--right{margin-left:0;}
#chartArea .chart-footer .cf-k{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:clamp(220px, 28vw, 440px);
  font-size:12px;
  text-align:right;
}
#chartArea .chart-footer .cf-v{white-space:nowrap;}
#chartArea .chart-footer #chartFooterLabel{ text-align:right; }

#chartArea .chart-footer .val{
  color:var(--txt);
  font-weight:900;
}
@media (max-width: 700px){
#chartArea .chart-wrap{height:clamp(220px, 48vh, 70vh);}
}


#renten-app .add-grid-b .grid-break{grid-column:1 / -1;display:block;height:0}

#renten-app .section-title .title-actions{margin-left:auto;display:flex;gap:10px}
#renten-app .section-title .btn{white-space:nowrap}

/* header person icon */
.person-col{ width:48px; text-align:center }
.person-col .th-person-icon{ display:inline-block; width:1.2em; height:1.2em; vertical-align:middle; }
.person-col svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* compact section-title spacing */
#renten-app .section-title{padding:.5rem 1rem .5rem 0 !important;gap:.5rem !important}

/* dot with centered icon */
.section-title .dot.with-icon{display:inline-flex;align-items:center;justify-content:center;width:1.25em;height:1.25em;background:transparent;border:1px solid var(--br);opacity:1;font-weight:700}


/* Sticky header row + first column for Übersicht (#resultTable) */
#renten-app #resultTable thead th{
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(8,12,20,1); /* opaque */
  backdrop-filter: none;
}
#renten-app #resultTable thead th:first-child{
  left: 0;
  z-index: 4; /* corner above both */
}
#renten-app #resultTable tbody td:first-child,
#renten-app #resultTable tfoot td:first-child,
#renten-app #resultTable thead th:first-child{
  position: sticky;
  left: 0;
  background: rgba(8,12,20,1); /* opaque */
  backdrop-filter: none;
}
/* ensure horizontal + vertical scroll works inside container */
#renten-app .h-scroll{display:block;width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}


/* === Sticky Overview Table (keep exact header colors, opaque) === */

/* Make the scrolling happen inside the container so sticky works both ways */
#renten-app .h-scroll{display:block;width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}

/* Fallback opaque header background for cells WITHOUT inline color */
#renten-app #resultTable thead{
  background-color: var(--bg);
}

/* Stick the whole header row; don't override inline background colors */
#renten-app #resultTable thead th{
  position: sticky;
  top: 0;
  z-index: 5;              /* above body cells */
  background-color: inherit; /* let inline bg (exact color) win */
  backdrop-filter: none;
}

/* First column sticky (header/body/footer); keep opaque dark bg */
#renten-app #resultTable thead th:first-child{
  left: 0;
  z-index: 7; /* corner on top */
  background-color: var(--bg);
}
#renten-app #resultTable tbody td:first-child,
#renten-app #resultTable tfoot td:first-child{
  position: sticky;
  left: 0;
  z-index: 6;
  background-color: var(--bg);
  backdrop-filter: none;
}

/* Ensure header cells overlap the first column cells when scrolling vertically */
#renten-app #resultTable thead th:not(:first-child){
  z-index: 6;
}


/* Ensure Übersicht header text is always readable */
#renten-app #resultTable thead th{
  color: var(--accent) !important;
  text-shadow: none;
}
#renten-app #resultTable thead th:first-child{
  color: var(--accent) !important;
}

/* Tooltip indicator for Übersicht table headers */
#renten-app #resultTable thead th[title]{
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* Custom tooltip (Übersicht – Zell-Tooltips) */
#renten-app #resultTable td.rr-has-tooltip{ cursor: help; }

#rrTooltip.rr-tooltip{
  position: fixed;
  z-index: 99999;
  display: none;
  pointer-events: none;
  max-width: 560px;
  max-height: 70vh;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(11, 18, 32, 0.98);
  border: 1px solid rgba(255,255,255,.12);
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(0,0,0,.48);
  font-size: 13px;
  line-height: 1.35;
}

#rrTooltip .rr-tt-title{ font-weight: 900; margin-bottom: 6px; }
#rrTooltip .rr-tt-sec{ margin-top: 8px; }
#rrTooltip .rr-tt-sec-title{ font-weight: 800; opacity: .92; margin-bottom: 4px; }
#rrTooltip .rr-tt-empty{ opacity: .75; }

#rrTooltip .rr-tt-grid{
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  row-gap: 2px;
}

#rrTooltip .rr-tt-grid.rr-tt-grid-2{
  grid-template-columns: 1fr auto;
}

#rrTooltip .rr-tt-grid.rr-tt-grid-3{
  grid-template-columns: 1fr auto auto;
}

#rrTooltip .rr-tt-val{
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Header row inside 3-column grids (Jährlich / Monatlich) */
#rrTooltip .rr-tt-hdr{
  opacity: .78;
  font-weight: 800;
  font-size: 12px;
  padding-bottom: 2px;
}

#rrTooltip .rr-tt-sum{
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-weight: 900;
}

#rrTooltip .rr-tt-muted{ opacity: .75; font-size: 12px; margin-top: 6px; }

/* Kaufkraft-Zeile (unter "Renten + Entnahmen netto") */
#rrTooltip .rr-tt-kaufkraft{
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
  font-size: 12px;
  opacity: .85;
}
#rrTooltip .rr-tt-kaufkraft__k{ white-space: nowrap; }
#rrTooltip .rr-tt-kaufkraft__v{
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Compact mini-table inside tooltips (used for Steuer gesamt meta rows) */
#rrTooltip table.rr-tt-mini{
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
#rrTooltip table.rr-tt-mini th,
#rrTooltip table.rr-tt-mini td{
  padding: 3px 6px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;
}
#rrTooltip table.rr-tt-mini thead th{
  opacity: .9;
  font-weight: 800;
}
#rrTooltip table.rr-tt-mini th{ text-align: right; }
#rrTooltip table.rr-tt-mini td{ text-align: right; }
#rrTooltip table.rr-tt-mini .rr-tt-mini-left{ text-align: left; }
#rrTooltip .rr-tt-mini-mt{ margin-top: 6px; }

/* --- Final overflow isolation for Übersicht --- */
/* Ensure the scroll happens INSIDE the container and never expands the page */
#renten-app .h-scroll{display:block;width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}
/* Let the table take its natural width but never smaller than the container */
#renten-app #resultTable{
  width:max-content;
  min-width:100%;
}


/* Experimentelle Hinweisbox (Steuern / Sozialversicherung) */
#renten-app .rr-exp-tag{
  font-size: 0.9em;
  opacity: 0.85;
  font-weight: 700;
}

#renten-app .rr-exp-link{
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
#renten-app .rr-exp-link:hover{
  opacity: 1;
}
#renten-app .rr-exp-link:focus{
  outline: 2px solid rgba(255,255,255,0.35);
  outline-offset: 2px;
  border-radius: 4px;
}


#renten-app .rr-experimental-note{
  border-left: 6px solid rgba(245, 158, 11, 0.85);
}

#renten-app .rr-exp-warning{
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  margin: 8px 0 12px 0;
}

#renten-app .rr-exp-p{
  margin: 0 0 10px 0;
  line-height: 1.45;
}



/* Kommentar field in edit rows */
#renten-app .edit-grid .field.full{ grid-column: 1 / -1; }
#renten-app .edit-grid input.rr-auto-locked{
  opacity:0.85;
  cursor: help;
}
#renten-app .edit-grid .field textarea{
  width:100%;
  min-height: 84px;
  resize: vertical;
  padding:10px 12px;
  border-radius: 10px;
  border: 1px solid var(--br);
  background: rgba(255,255,255,.06);
  color: var(--txt);
}
#renten-app .rr-name{
  cursor: help;
  text-decoration: underline dotted rgba(255,255,255,.35);
  text-underline-offset: 3px;
}
#renten-app .rr-name:hover{
  text-decoration-color: rgba(255,255,255,.65);
}

/* Tooltip over name cells (Renten / Bausteine) */
#rrNameTooltip{
  position: fixed;
  z-index: 9999;
  transform: translate(-50%, -100%);
  pointer-events: none;
  max-width: min(520px, calc(100vw - 24px));
}
#rrNameTooltip .rr-name-tt{
  background: var(--card);
  color: var(--txt);
  border: 1px solid var(--br);
  border-left: 4px solid var(--rr-tt-accent, var(--accent));
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}
#rrNameTooltip .rr-name-tt-title{
  font-weight: 800;
  margin: 0 0 8px 0;
  line-height: 1.2;
}
#rrNameTooltip .rr-name-tt-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  font-size: 13px;
}
#rrNameTooltip .rr-name-tt-kv{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
#rrNameTooltip .rr-name-tt-kv .k{
  opacity: .78;
  white-space: nowrap;
}
#rrNameTooltip .rr-name-tt-kv .v{
  font-weight: 650;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#rrNameTooltip .rr-name-tt-sep{
  height:1px;
  background: var(--br);
  margin: 10px 0 8px 0;
  opacity:.9;
}
#rrNameTooltip .rr-name-tt-comment-title{
  font-size: 12px;
  font-weight: 800;
  opacity: .82;
  margin-bottom: 4px;
}
#rrNameTooltip .rr-name-tt-comment-body{
  font-size: 13px;
  line-height: 1.35;
  white-space: pre-wrap;
}
#rrNameTooltip .muted{ opacity: .6; }
@media (max-width: 520px){
  #rrNameTooltip .rr-name-tt-grid{ grid-template-columns: 1fr; }
  #rrNameTooltip{ transform: translate(-50%, -100%); }
}


/* Row reorder handles (Renten / Bausteine) */
#renten-app .rr-drag-handle{ cursor: grab; }
#renten-app .rr-drag-handle:active{ cursor: grabbing; }
#renten-app tr.rr-dragging{ opacity: .55; }


/* Actions column (Renten & Bausteine): right aligned, drag handle last */
#renten-app td.rr-row-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}
#renten-app td.rr-row-actions .rr-drag-handle{
  cursor:grab;
}
#renten-app td.rr-row-actions .rr-drag-handle:active{
  cursor:grabbing;
}
#renten-app tr.rr-dragging{
  opacity:.65;
}

/* Disabled rows (excluded from calculation) */
#renten-app tr.is-disabled{
  opacity: .55;
}
#renten-app tr.is-disabled .rr-name{
  text-decoration: line-through;
}

/* Bausteine: combined "Entnahme Art" cell */
#renten-app .rr-withdraw-kind{
  display:flex;
  flex-direction:column;
  line-height:1.15;
  gap:2px;
}
#renten-app .rr-withdraw-kind .rr-withdraw-mode{
  font-size: 12px;
  font-weight: 750;
  opacity: .78;
  white-space: nowrap;
}
#renten-app .rr-withdraw-kind .rr-withdraw-param{
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

/* Enable/disable toggle button */
#renten-app td.rr-row-actions .rr-enable-toggle{
  min-width: 34px;
}

/* Bausteine: Sparphase (Spar ab / Sparen bis zusammengefasst) */
#renten-app td.rr-phase-cell{ white-space:nowrap; }
#renten-app .rr-phase{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.1;
}
#renten-app .rr-phase-from{ font-weight:400; }
#renten-app .rr-phase-to{ opacity:0.75; }

/* ===== Rendite-Szenarien (Unterhalb Übersicht) ===== */
#renten-app .rr-muted{
  opacity: .78;
  margin: 10px 0 14px 0;
}

#renten-app #rr-rate-scenarios .rr-scenarios{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:stretch;
  margin: 6px 0 14px 0;
}

#renten-app #rr-rate-scenarios .rr-scenario{
  flex: 1 1 280px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 14px;
  padding: 12px;
}

#renten-app #rr-rate-scenarios .rr-scenario-head{
  font-weight: 850;
  margin: 0 0 10px 0;
}

#renten-app #rr-rate-scenarios .rr-scenario-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 10px;
}

#renten-app #rr-rate-scenarios .rr-scenario-grid .field label{
  display:block;
  font-size: 12px;
  opacity: .8;
  margin: 0 0 4px 0;
}

#renten-app #rr-rate-scenarios .rr-scenario-grid .field input{
  width: 100%;
  min-width: 12ch;
}

#renten-app #rr-rate-scenarios #rrScenarioTable th:first-child,
#renten-app #rr-rate-scenarios #rrScenarioTable td:first-child{
  white-space: nowrap;
}

#renten-app #rr-rate-scenarios td.rr-delta{
  font-variant-numeric: tabular-nums;
}

#renten-app #rr-rate-scenarios td.rr-delta.pos{ color: #22c55e; }
#renten-app #rr-rate-scenarios td.rr-delta.neg{ color: #ef4444; }

/* === Renten: automatische GRV aus Rentenpunkten === */
#renten-app .rr-check{
  display:flex;
  align-items:center;
  gap:0.55rem;
  font-weight:600;
  white-space:nowrap;
  user-select:none;
}
#renten-app .rr-check input[type="checkbox"]{
  width:1.15rem;
  height:1.15rem;
}
#renten-app .rr-auto-badge{
  display:inline-flex;
  align-items:center;
  margin-left:0.55rem;
  padding:0.1rem 0.45rem;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.04em;
  opacity:0.85;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.18);
}

/* Implicit/derived values shown in tables (do not write back into inputs) */
.rr-implicit{font-style: italic; opacity: 0.65;}



/* rr_need_schedule_enhance */
/* Bedarf-Plan: Icon + Badge */
.rr-need-plan-btn{
  width:42px;
  height:34px;
  padding:0;
  display:grid;
  place-items:center;
  position:relative;
}
.rr-need-plan-btn svg{
  width:18px;
  height:18px;
  display:block;
}
.rr-need-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#d32f2f;
  color:#fff;
  font-size:11px;
  line-height:18px;
  font-weight:700;
  text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  display:none;
}

/* Dark Theme: Bedarf-Dialog lesbar (keine weißen Flächen) */
@media (prefers-color-scheme: dark){
  dialog.rr-need-dlg,
  dialog.rr-need-dialog{
    background:#121821 !important;
    color:rgba(255,255,255,.92) !important;
    border-color:rgba(220,220,220,.28) !important;
  }
  dialog.rr-need-dlg::backdrop,
  dialog.rr-need-dialog::backdrop{
    background:rgba(0,0,0,.60) !important;
  }
  .rr-need-in,
  .rr-need-input{
    background:rgba(255,255,255,.06) !important;
    color:rgba(255,255,255,.92) !important;
    border-color:rgba(220,220,220,.28) !important;
  }
  .rr-need-in:disabled,
  .rr-need-input:disabled{
    background:rgba(255,255,255,.03) !important;
    opacity:.78;
  }
  .rr-need-dlg-h, .rr-need-dlg-f,
  .rr-need-dialog__head, .rr-need-dialog__foot{
    border-color:rgba(220,220,220,.16) !important;
  }
  .rr-need-row{
    border-top-color:rgba(220,220,220,.14) !important;
  }
}

body.dark dialog.rr-need-dlg,
body.dark dialog.rr-need-dialog,
body[data-theme="dark"] dialog.rr-need-dlg,
body[data-theme="dark"] dialog.rr-need-dialog,
[data-theme="dark"] dialog.rr-need-dlg,
[data-theme="dark"] dialog.rr-need-dialog{
  background:#121821 !important;
  color:rgba(255,255,255,.92) !important;
}


/* Übersicht: Ergebnis-Auswahl (Rentenplan/Szenarien) */
#renten-app .rr-overview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
#renten-app .rr-overview-controls{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-left:auto;
}
#renten-app .rr-overview-controls label{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
}
#renten-app .rr-overview-controls select{
  min-width: 12ch;
}


/* Szenarien: Parameter im Dialog, Abweichungen als Kurztext in der Tabellen-Kopfzeile */
#rr-rate-scenarios .rr-scenarios-editor{
  display:none;
}

#rr-rate-scenarios #rrScenarioTable thead .rr-scenario-table__controls th{
  vertical-align:top;
  padding-top:10px;
  padding-bottom:8px;
}

#rr-rate-scenarios #rrScenarioTable thead .rr-scenario-table__controls-pad{
  border-bottom:0;
}

#rr-rate-scenarios #rrScenarioTable thead .rr-scenario-table__controls-cell{
  text-align:center;
  border-bottom:0;
}

#rr-rate-scenarios .rr-scenario-col-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
}

#rr-rate-scenarios .rr-scenario-col-btn{
  white-space:nowrap;
  display:block;
  margin:0 auto;
}

#rr-rate-scenarios .rr-scenario-summary{
  width:100%;
  text-align:left;
}

#rr-rate-scenarios .rr-scenario-summary__empty{
  font-size:.85rem;
  opacity:.85;
  padding-top:2px;
}

/* Szenarien Dialog */
dialog.rr-scenario-dialog{
  border:0;
  padding:0;
  background:transparent;
  max-width: min(980px, calc(100vw - 24px));
  width: min(980px, calc(100vw - 24px));
}
dialog.rr-scenario-dialog::backdrop{
  background:rgba(0,0,0,.55);
}

.rr-scenario-dialog__panel{
  border-radius:14px;
  background:#fff;
  color:#111;
  box-shadow:0 18px 60px rgba(0,0,0,.25);
  overflow:hidden;
}

.rr-scenario-dialog__head,
.rr-scenario-dialog__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,.10);
}
.rr-scenario-dialog__foot{
  border-bottom:0;
  border-top:1px solid rgba(0,0,0,.10);
  justify-content:flex-end;
}

.rr-scenario-dialog__title{
  font-weight:800;
  letter-spacing:.2px;
}
.rr-scenario-dialog__close{
  border:0;
  background:transparent;
  font-size:22px;
  line-height:1;
  padding:4px 8px;
  cursor:pointer;
  color:inherit;
}

.rr-scenario-dialog__body{
  padding:12px;
  max-height: min(78vh, 860px);
  overflow:auto;
}

/* Szenarien Dialog: kompakt (zwei Werte pro Zeile), ohne separate Szenario-Überschrift */
dialog.rr-scenario-dialog .rr-scenario{
  border:0;
  background:transparent;
  padding:0;
}
dialog.rr-scenario-dialog .rr-scenario-head{
  display:none;
}
dialog.rr-scenario-dialog .rr-scenario-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap:10px;
}
dialog.rr-scenario-dialog .rr-scenario-grid .field label{
  display:block;
  font-size:12px;
  opacity:.85;
  margin:0 0 4px 0;
}
dialog.rr-scenario-dialog .rr-scenario-grid .field input{
  width:100%;
  min-width:12ch;
}

dialog.rr-scenario-dialog .rr-scenario-person-row{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: 90px repeat(3, minmax(170px, 1fr));
  gap:10px;
  align-items:end;
}

dialog.rr-scenario-dialog .rr-scenario-person-label{
  font-weight:800;
  opacity:.85;
  white-space:nowrap;
  padding-top:18px;
}

@media (max-width: 720px){
  dialog.rr-scenario-dialog .rr-scenario-person-row{
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
  dialog.rr-scenario-dialog .rr-scenario-person-label{
    grid-column: 1 / -1;
    padding-top:0;
  }
}

/* Dark theme */
/* Szenario: Rentenbeginn Hinweise (wie Personen-Dialog) */
dialog.rr-scenario-dialog .rr-scenario-pension-info{
  grid-column: 1 / -1;
  border-radius:14px;
  padding:10px 12px;
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.10);
}

dialog.rr-scenario-dialog .rr-scenario-pension-info .rr-person-info__row{ display:flex; justify-content:space-between; gap:12px; }
dialog.rr-scenario-dialog .rr-scenario-pension-info .rr-person-info__k{ opacity:.85; font-weight:700; }
dialog.rr-scenario-dialog .rr-scenario-pension-info .rr-person-info__v{ font-variant-numeric: tabular-nums; font-weight:900; }
dialog.rr-scenario-dialog .rr-scenario-pension-info__error{ margin-top:8px; font-weight:800; opacity:.95; color:#ef4444; }
dialog.rr-scenario-dialog .rr-scenario-pension-info--error{ border-color: rgba(180, 40, 40, .45); }

body.dark dialog.rr-scenario-dialog .rr-scenario-pension-info,
body[data-theme="dark"] dialog.rr-scenario-dialog .rr-scenario-pension-info,
[data-theme="dark"] dialog.rr-scenario-dialog .rr-scenario-pension-info{
  background:rgba(255,255,255,.04);
  border-color:rgba(220,220,220,.16);
}
body.dark dialog.rr-scenario-dialog .rr-scenario-pension-info--error,
body[data-theme="dark"] dialog.rr-scenario-dialog .rr-scenario-pension-info--error,
[data-theme="dark"] dialog.rr-scenario-dialog .rr-scenario-pension-info--error{
  border-color: rgba(255, 120, 120, .45);
}
body.dark dialog.rr-scenario-dialog .rr-scenario-dialog__panel,
body[data-theme="dark"] dialog.rr-scenario-dialog .rr-scenario-dialog__panel,
[data-theme="dark"] dialog.rr-scenario-dialog .rr-scenario-dialog__panel{
  background:#121821;
  color:rgba(255,255,255,.92);
}
body.dark dialog.rr-scenario-dialog .rr-scenario-dialog__head,
body.dark dialog.rr-scenario-dialog .rr-scenario-dialog__foot,
body[data-theme="dark"] dialog.rr-scenario-dialog .rr-scenario-dialog__head,
body[data-theme="dark"] dialog.rr-scenario-dialog .rr-scenario-dialog__foot,
[data-theme="dark"] dialog.rr-scenario-dialog .rr-scenario-dialog__head,
[data-theme="dark"] dialog.rr-scenario-dialog .rr-scenario-dialog__foot{
  border-color:rgba(220,220,220,.16);
}
#renten-app #rr-rate-scenarios td.num.neg,
#renten-app #rr-rate-scenarios .neg{ color:#ef4444; }