.calculator-intro { padding: 62px 0 28px; background: #fff; }
.calculator-intro h1 { font-size: clamp(38px, 5vw, 60px); }
.calculator-intro p { max-width: 760px; color: var(--muted); font-size: 18px; }
.back-link { display: inline-block; margin-bottom: 30px; color: var(--muted); font-weight: 700; }
.calculator-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr); gap: 22px; align-items: start; }
.calculator-panel, .results-panel { padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 35px rgba(28,45,68,.04); }
.results-panel { position: sticky; top: 96px; }
.panel-heading, .table-section-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 24px; }
.compact-heading { margin-top: 4px; margin-bottom: 18px; }
.panel-heading h2, .table-section-heading h2 { margin: 4px 0 0; font-size: 28px; }
.text-button { color: var(--accent); background: none; border: 0; cursor: pointer; font-weight: 800; }
.section-divider { height: 1px; margin: 28px 0; background: var(--line); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: block; position: relative; }
.field-label { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 14px; font-weight: 800; }
.field small, .target-field small { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; }
.input-wrap, .compound-input { display: flex; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-small); overflow: visible; }
.input-wrap:focus-within, .compound-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input-wrap input, .compound-input input { min-width: 0; width: 100%; padding: 13px 14px; border: 0; outline: 0; background: transparent; font-weight: 800; }
.input-wrap > span { padding: 0 14px; color: var(--muted); font-weight: 800; white-space: nowrap; }
select { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--bg); outline: 0; font-weight: 700; }
.compound-input select { width: 120px; border: 0; border-left: 1px solid var(--line); border-radius: 0 var(--radius-small) var(--radius-small) 0; }
.calculated-field .input-wrap, .calculated-field .compound-input { background: var(--accent-soft); border-color: rgba(15,118,110,.32); }
.calculated-field input:disabled { color: var(--accent-dark); opacity: 1; cursor: not-allowed; }
.target-field { padding: 18px; border: 1px solid rgba(15,118,110,.2); border-radius: 16px; background: var(--accent-soft); }
.target-field select { background: #fff; }
.tooltip-wrap { position: relative; display: inline-flex; }
.info-button { width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 1px solid #a9bac7; border-radius: 50%; color: var(--muted); background: #fff; font-size: 12px; font-weight: 900; cursor: help; }
.tooltip { position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 10px); width: 260px; padding: 12px 13px; color: #fff; background: #152231; border-radius: 10px; box-shadow: var(--shadow); font-size: 12px; font-weight: 500; line-height: 1.45; opacity: 0; visibility: hidden; transform: translate(-50%, 5px); transition: .15s ease; pointer-events: none; }
.tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; border: 6px solid transparent; border-top-color: #152231; transform: translateX(-50%); }
.tooltip-wrap:hover .tooltip, .tooltip-wrap:focus-within .tooltip, .tooltip-wrap.tooltip-open .tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.advanced-box { margin-top: 28px; border: 1px solid var(--line); border-radius: 16px; overflow: visible; background: #fbfcfd; }
.advanced-box summary { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; cursor: pointer; list-style: none; }
.advanced-box summary::-webkit-details-marker { display: none; }
.advanced-box summary span:first-child { display: flex; flex-direction: column; }
.advanced-box summary small { color: var(--muted); font-weight: 500; }
.summary-plus { font-size: 24px; color: var(--accent); transition: transform .2s ease; }
.advanced-box[open] .summary-plus { transform: rotate(45deg); }
.advanced-content { padding: 4px 20px 22px; }
.calculation-actions { display: flex; align-items: center; gap: 18px; margin-top: 26px; }
.calculation-actions p { margin: 0; color: var(--muted); font-size: 12px; }
.calculate-button { min-width: 190px; }
.error-box { margin-top: 16px; padding: 13px 15px; color: #9b1c1c; background: #fee2e2; border: 1px solid #fecaca; border-radius: 12px; font-weight: 700; }
.result-placeholder { min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--muted); padding: 30px; border: 1px dashed #c5d0d9; border-radius: 16px; background: #fbfcfd; }
.result-placeholder strong { margin: 12px 0 4px; color: var(--text); font-size: 18px; }
.placeholder-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--accent); background: var(--accent-soft); font-size: 22px; font-weight: 900; }
.dirty-notice { margin-bottom: 12px; padding: 10px 12px; color: #7a5200; background: #fff4cc; border-radius: 10px; font-size: 13px; font-weight: 700; }
.primary-result { padding: 24px; border-radius: 16px; color: #fff; background: var(--accent); }
.primary-result span { display: block; opacity: .82; font-weight: 700; }
.primary-result strong { display: block; margin-top: 5px; font-size: 38px; letter-spacing: -0.04em; }
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.result-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.result-card { padding: 16px; border-radius: 14px; background: var(--bg); }
.result-card span, .result-card small { display: block; color: var(--muted); }
.result-card span { font-size: 12px; font-weight: 700; }
.result-card strong { display: block; margin: 5px 0; font-size: 20px; }
.export-box { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 18px; padding: 17px; border: 1px solid var(--line); border-radius: 14px; }
.export-box div:first-child { display: flex; flex-direction: column; }
.export-box span { color: var(--muted); font-size: 12px; }
.export-actions { display: flex; gap: 8px; }
button:disabled { opacity: .45; cursor: not-allowed; }
.disclaimer { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-small); color: var(--muted); background: var(--surface-soft); font-size: 12px; }
.table-count { padding: 6px 10px; border-radius: 999px; color: var(--accent-dark); background: var(--accent-soft); font-size: 12px; font-weight: 800; }
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; min-width: 1250px; }
th, td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
th:first-child, td:first-child, th:nth-child(2), td:nth-child(2) { text-align: center; }
th { position: sticky; top: 0; color: var(--muted); background: #fbfcfd; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: #fbfcfd; }
.empty-table { padding: 40px; text-align: center !important; color: var(--muted); }
@media (max-width: 1050px) { .calculator-layout { grid-template-columns: 1fr; } .results-panel { position: static; } }
@media (max-width: 700px) { .form-grid, .result-grid, .result-grid-three { grid-template-columns: 1fr; } .calculator-panel, .results-panel { padding: 20px; } .table-section-heading, .export-box, .calculation-actions { align-items: flex-start; flex-direction: column; } .export-actions { width: 100%; } .export-actions .button { flex: 1; } .tooltip { left: 0; transform: translate(0, 5px); } .tooltip-wrap:hover .tooltip, .tooltip-wrap:focus-within .tooltip, .tooltip-wrap.tooltip-open .tooltip { transform: translate(0,0); } .tooltip::after { left: 10px; transform: none; } }

.irr-box { margin-top: 16px; border: 1px solid rgba(15,118,110,.22); border-radius: 14px; background: var(--accent-soft); }
.irr-box summary { padding: 13px 15px; color: var(--accent-dark); font-weight: 800; cursor: pointer; }
.irr-box p { margin: 0; padding: 0 15px 15px; color: #355d5a; font-size: 12px; line-height: 1.6; }
.table-heading-actions { display: flex; align-items: center; gap: 12px; }
.schedule-view-control { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 800; }
.schedule-view-control select { width: 125px; padding: 8px 10px; background: #fff; }
.year-summary-row { background: var(--accent-soft) !important; }
.year-summary-row td { color: var(--accent-dark); font-weight: 900; border-top: 2px solid rgba(15,118,110,.28); border-bottom: 2px solid rgba(15,118,110,.28); }
@media (max-width: 700px) { .table-heading-actions { width: 100%; align-items: flex-start; flex-direction: column; } }


.transfer-notice { margin-top: 10px; padding: 10px 13px; border-radius: 10px; color: var(--accent-dark); background: var(--accent-soft); font-size: 13px; font-weight: 700; }
.preview-layout { display:grid;grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr);gap:22px;align-items:start; }
.preview-values { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px; }
.preview-values div { padding:16px;border-radius:14px;background:var(--bg); }
.preview-values span,.preview-values strong { display:block; }.preview-values span{color:var(--muted);font-size:12px;font-weight:700}.preview-values strong{margin-top:5px;font-size:20px}
@media(max-width:900px){.preview-layout{grid-template-columns:1fr}}
@media(max-width:560px){.preview-values{grid-template-columns:1fr}}

/* Dezente Querverweise zwischen vollständig getrennten Darlehensrechnern */
.related-calculators-section {
  padding: 64px 0 78px;
  background: #fff;
  border-top: 1px solid var(--line);
}

.related-calculators-heading {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(280px, 1.1fr);
  gap: 42px;
  align-items: end;
  margin-bottom: 24px;
}

.related-calculators-heading h2 {
  margin: 5px 0 0;
  font-size: clamp(26px, 3vw, 36px);
}

.related-calculators-heading p {
  margin: 0;
  color: var(--muted);
}

.related-calculators-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.related-calculator-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  padding: 19px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.related-calculator-card:hover {
  border-color: rgba(15, 118, 110, .35);
  background: var(--surface);
  transform: translateY(-2px);
}

.related-calculator-card strong,
.related-calculator-card small {
  display: block;
}

.related-calculator-card small {
  margin-top: 2px;
  color: var(--muted);
}

.related-calculator-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 19px;
  font-weight: 900;
}

.related-calculator-arrow {
  color: var(--accent);
  font-size: 20px;
  font-weight: 900;
}

@media (max-width: 760px) {
  .related-calculators-heading,
  .related-calculators-grid {
    grid-template-columns: 1fr;
  }
}


.budget-cross-section{padding:42px 0 0;background:#fff;border-top:1px solid var(--line)}.budget-cross-link{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:15px;align-items:center;padding:20px 22px;border:1px solid rgba(15,118,110,.24);border-radius:17px;background:var(--accent-soft)}.budget-cross-link strong,.budget-cross-link small{display:block}.budget-cross-link small{margin-top:3px;color:#416d69}.budget-cross-link:hover{border-color:rgba(15,118,110,.5)}


/* Version 0.9 – optische Überarbeitung ohne Änderung der Rechnerlogik */
.calculator-intro{
  padding:66px 0 34px;
  background:
    radial-gradient(circle at 82% 18%,rgba(11,117,109,.09),transparent 28%),
    linear-gradient(180deg,#fff 0%,#f8fbfb 100%);
  border-bottom:1px solid var(--line)
}
.calculator-intro h1{font-size:clamp(40px,5vw,62px)}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:28px;
  padding:7px 10px;
  border-radius:9px;
  color:var(--muted);
  background:rgba(255,255,255,.7);
  border:1px solid var(--line)
}
.calculator-panel,.results-panel{
  border-radius:24px;
  border-color:#dce5e7;
  box-shadow:var(--shadow-soft)
}
.calculator-panel{background:rgba(255,255,255,.96)}
.results-panel{background:#fff}
.input-wrap,.compound-input,select{background:#f7f9fa}
.input-wrap:focus-within,.compound-input:focus-within{
  box-shadow:0 0 0 4px rgba(11,117,109,.10)
}
.result-card{border:1px solid #e7edef;background:#f7f9fa}
.primary-result{
  border-radius:18px;
  background:linear-gradient(145deg,var(--accent),var(--accent-dark));
  box-shadow:0 12px 28px rgba(11,117,109,.16)
}
.advanced-box{background:#f8fafb}
.related-calculators-section{background:#f8fbfb}
.related-calculator-card{background:#fff;box-shadow:0 5px 18px rgba(17,38,48,.035)}


/* Version 0.15.2 - Seitentitel-Icons */
.page-title-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  padding:8px 12px 8px 9px;
  border-radius:999px;
  border:1px solid rgba(14,117,110,.10);
  box-shadow:0 8px 20px rgba(18,37,49,.05)
}
.page-title-chip .page-title-icon{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(255,255,255,.72)
}
.page-title-chip .page-title-icon svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
  display:block
}
.page-title-chip span:last-child{
  font-size:12px;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase
}
.page-title-chip.tone-finance{color:#0e6e69;background:linear-gradient(180deg,#eaf8f4 0%,#dff3ee 100%)}
.page-title-chip.tone-household{color:#21577a;background:linear-gradient(180deg,#edf5fb 0%,#e1eef8 100%)}
.page-title-chip.tone-savings{color:#3a7d4c;background:linear-gradient(180deg,#edf8ef 0%,#e3f2e6 100%)}
.page-title-chip.tone-income{color:#8a5b14;background:linear-gradient(180deg,#fff5e6 0%,#feedd0 100%)}
.page-title-chip.tone-helper{color:#4b5b74;background:linear-gradient(180deg,#eff3f9 0%,#e6ecf5 100%)}
html[data-theme="dark"] .page-title-chip{
  border-color:var(--line);
  box-shadow:none
}
html[data-theme="dark"] .page-title-chip .page-title-icon{background:rgba(255,255,255,.07)}
html[data-theme="dark"] .page-title-chip.tone-finance{color:#7fd9ca;background:#173532}
html[data-theme="dark"] .page-title-chip.tone-household{color:#9fcaed;background:#1a2e3e}
html[data-theme="dark"] .page-title-chip.tone-savings{color:#a7dbb0;background:#1b3322}
html[data-theme="dark"] .page-title-chip.tone-income{color:#f2d28b;background:#352b16}
html[data-theme="dark"] .page-title-chip.tone-helper{color:#c2cfdf;background:#1d2734}


/* Version 0.15.3 - konsistentere Rechnerseiten */
.calculator-intro{
  position:relative;
  overflow:hidden;
  padding:78px 0 34px;
  border-bottom:1px solid rgba(14,117,110,.08);
  background:
    radial-gradient(circle at 88% 18%, rgba(15,119,111,.10), transparent 27%),
    linear-gradient(180deg,#ffffff 0%,#f8fbfc 100%)
}
.calculator-intro::after{
  content:"";
  position:absolute;
  right:-120px;
  top:-90px;
  width:300px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(216,175,89,.10), transparent 62%);
  pointer-events:none
}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:18px;
  padding:9px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  box-shadow:0 8px 18px rgba(18,37,49,.04)
}
.page-title-chip{
  margin-bottom:18px
}
.calculator-panel,.results-panel{
  border:1px solid rgba(18,37,49,.07);
  box-shadow:0 16px 40px rgba(18,37,49,.05)
}
.panel-heading h2,.table-section-heading h2{
  letter-spacing:-.03em
}
.table-heading-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}
.schedule-view-control{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff
}
.schedule-view-control span{
  color:var(--muted);
  font-size:12px;
  font-weight:800
}
.legal-info-box{
  border:1px solid rgba(14,117,110,.10);
  box-shadow:0 8px 18px rgba(18,37,49,.03)
}
.related-calculator-card,
.budget-cross-link{
  border:1px solid rgba(18,37,49,.07);
  box-shadow:0 12px 26px rgba(18,37,49,.04)
}
.related-calculator-card:hover,
.budget-cross-link:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(18,37,49,.08)
}
html[data-theme="dark"] .calculator-intro{
  border-color:var(--line);
  background:
    radial-gradient(circle at 88% 18%, rgba(78,199,183,.12), transparent 28%),
    linear-gradient(180deg,#101b21 0%,#0d171d 100%)!important
}
html[data-theme="dark"] .back-link{
  background:#15232b;
  box-shadow:none
}
html[data-theme="dark"] .schedule-view-control{
  background:#15232b;
  border-color:var(--line)
}


/* Version 0.15.5 - Seitentitel-Icons passend zum Markenlogo */
.page-title-chip .page-title-icon{
  border-radius:50%
}


/* Version 0.15.7 - Querverweis-Icons als SVG + Darkmode-Fixes */
.related-calculator-icon svg{
  width:20px;
  height:20px;
  display:block;
  stroke:currentColor;
  fill:none
}
.budget-cross-section{
  background:#f8fbfb
}
html[data-theme="dark"] .budget-cross-section{
  background:var(--bg)!important;
  border-top-color:var(--line)!important
}
html[data-theme="dark"] .budget-cross-link{
  background:#15302e!important;
  border-color:#295650!important;
  box-shadow:0 12px 26px rgba(0,0,0,.16)
}
html[data-theme="dark"] .budget-cross-link strong{
  color:var(--text)!important
}
html[data-theme="dark"] .budget-cross-link small{
  color:#9dc3be!important
}


/* Version 0.15.8 - hilfreiche SEO-/Ratgeberinhalte */
.seo-content-section{
  padding:54px 0 64px;
  border-top:1px solid var(--line);
  background:#f8fbfb
}
.seo-content-head{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(320px,1.15fr);
  gap:42px;
  align-items:end;
  margin-bottom:24px
}
.seo-content-head h2{
  margin:7px 0 0;
  font-size:clamp(28px,3vw,40px);
  letter-spacing:-.035em
}
.seo-content-head p{
  margin:0;
  color:var(--muted);
  line-height:1.75
}
.seo-content-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px
}
.seo-content-card{
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 26px rgba(18,37,49,.035)
}
.seo-content-card h3{
  margin:0 0 8px;
  font-size:17px;
  letter-spacing:-.02em
}
.seo-content-card p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
  font-size:14px
}
.seo-faq{
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid var(--line)
}
.seo-faq h3{margin:0 0 13px;font-size:21px}
.seo-faq-list{display:grid;gap:10px}
.seo-faq-item{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  overflow:hidden
}
.seo-faq-item summary{
  cursor:pointer;
  padding:15px 17px;
  font-weight:820;
  list-style:none
}
.seo-faq-item summary::-webkit-details-marker{display:none}
.seo-faq-item summary::after{
  content:"+";
  float:right;
  color:var(--accent);
  font-size:18px
}
.seo-faq-item[open] summary::after{content:"−"}
.seo-faq-item p{
  margin:0;
  padding:0 17px 17px;
  color:var(--muted);
  line-height:1.7;
  font-size:14px
}
html[data-theme="dark"] .seo-content-section{background:#111d23;border-color:var(--line)}
html[data-theme="dark"] .seo-content-card,
html[data-theme="dark"] .seo-faq-item{background:#152128;border-color:var(--line)}
@media(max-width:900px){
  .seo-content-head{grid-template-columns:1fr;gap:12px}
  .seo-content-grid{grid-template-columns:1fr}
}