/* ===== VARIABLES ===== */
:root {
  --nav-width: 240px;
  --sidebar-width: 300px;
  --primary: #1a2f5e;
  --primary-light: #2563eb;
  --primary-muted: #3b5998;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706;
  --bg: #f0f4f8;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;
  --muted: #64748b;
  --input-bg: #ffffff;
  --readonly-bg: #f1f5f9;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --radius: 10px;
}

/* ===== RESET & BASE ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

/* ===== LEFT NAVIGATION ===== */
#sidebar-nav {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--nav-width);
  background: linear-gradient(180deg, #0f1e3d 0%, #1a2f5e 60%, #1e3a6e 100%);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nav-brand {
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.nav-brand i { font-size: 22px; color: #60a5fa; }
.nav-brand .brand-sub { font-size: 10px; color: rgba(255,255,255,.5); font-weight: 400; display: block; margin-top: 1px; }

.nav-sections {
  list-style: none;
  padding: 12px 10px;
  flex: 1;
  overflow-y: auto;
}
.nav-sections li { margin-bottom: 2px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  transition: all .2s;
}
.nav-item:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-item.active { background: rgba(96,165,250,.2); color: #93c5fd; }
.nav-item .section-num {
  width: 22px; height: 22px;
  background: rgba(255,255,255,.15);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.nav-item.active .section-num { background: #2563eb; color: #fff; }

.nav-footer {
  padding: 14px 10px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.btn-export {
  width: 100%;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  transition: background .2s;
}
.btn-export:hover { background: #b91c1c; }
.btn-export i { font-size: 16px; }

/* ===== MAIN WRAPPER ===== */
#main-wrapper {
  margin-left: var(--nav-width);
  display: flex;
  min-height: 100vh;
}
#content {
  flex: 1;
  padding: 24px 28px;
  margin-right: var(--sidebar-width);
  max-width: 960px;
}
.page-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--border);
}
.page-header h1 { font-size: 22px; font-weight: 700; color: var(--primary); }
.page-header p { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* ===== SECTION CARDS ===== */
.calc-section {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, #f8faff 0%, #fff 100%);
}
.section-badge {
  width: 34px; height: 34px;
  background: var(--primary);
  color: #fff;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
  flex-shrink: 0;
}
.section-title { font-size: 16px; font-weight: 700; color: var(--primary); line-height: 1.2; }
.section-subtitle { font-size: 12px; color: var(--muted); margin-top: 2px; }
.section-body { padding: 22px; }

/* ===== FORM ELEMENTS ===== */
.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.form-control, .form-select {
  border: 1.5px solid var(--border);
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text);
  background: var(--input-bg);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
  height: 40px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
  outline: none;
}
.form-control.readonly-field {
  background: var(--readonly-bg);
  cursor: not-allowed;
  color: var(--muted);
  border-color: #e2e8f0;
}
.computed-badge {
  display: inline-block;
  font-size: 9px;
  background: #dbeafe;
  color: #1d4ed8;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  vertical-align: middle;
  margin-left: 5px;
}
.input-warn-msg {
  font-size: 11px;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 5px;
  padding: 4px 8px;
  margin-top: 4px;
}

/* Input with suffix */
.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-wrap .form-control { padding-right: 40px; }
.input-suffix {
  position: absolute;
  right: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
}
.input-wrap-left .form-control { padding-left: 28px; padding-right: 8px; }
.input-prefix {
  position: absolute;
  left: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
}

/* Info icon */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  background: #dbeafe;
  color: #2563eb;
  border-radius: 50%;
  font-size: 9px;
  cursor: help;
  flex-shrink: 0;
  transition: background .15s;
}
.info-icon:hover { background: #bfdbfe; }
.info-icon i { font-size: 11px; }
.sb-tt-sub { font-size: 11px; color: #94a3b8; margin-top: 3px; display: block; line-height: 1.4; }
.sb-popover { --bs-popover-max-width: 240px; font-size: 12px; }
.sb-popover .popover-header { font-size: 12px; font-weight: 700; padding: 6px 10px; }
.sb-popover .popover-body { padding: 8px 10px; line-height: 1.5; }

/* ===== COSTS TABLE ===== */
.costs-table {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.costs-header {
  background: #f8fafc;
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}
.costs-row {
  display: grid;
  grid-template-columns: 1fr 130px 150px;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid #f1f5f9;
  gap: 10px;
}
.costs-row:last-child { border-bottom: none; }
.costs-row.costs-total {
  background: #f8fafc;
  font-weight: 600;
  border-top: 1.5px solid var(--border) !important;
}
.costs-label {
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.costs-value {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ===== RESULT FIELDS ===== */
.result-field {
  background: var(--readonly-bg);
  border: 1.5px dashed #cbd5e1;
  border-radius: 7px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}

.result-highlight {
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
  border: 2px solid #bfdbfe;
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.result-highlight-label {
  font-size: 13px;
  font-weight: 700;
  color: #1d4ed8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.result-highlight-value {
  font-size: 20px;
  font-weight: 800;
  color: #1d4ed8;
  font-variant-numeric: tabular-nums;
}

/* Sub-highlights */
.result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.result-row:last-child { border-bottom: none; }
.result-row-label { font-size: 13px; color: var(--muted); }
.result-row-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ===== INFO BOX ===== */
.info-box {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: 7px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: #92400e;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.info-box i { color: #f59e0b; font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.info-box-blue {
  background: #eff6ff;
  border-color: #bfdbfe;
  border-left-color: #2563eb;
  color: #1e40af;
}
.info-box-blue i { color: #2563eb; }

/* ===== GROUP DIVIDERS ===== */
.group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.group-label.positive { color: var(--success); border-color: #dcfce7; }
.group-label.negative { color: var(--danger); border-color: #fee2e2; }

/* ===== SECTION 5 TAX ===== */
.tax-result-box {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.tax-result-header {
  background: #f8fafc;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.tax-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #f8fafc;
}
.tax-result-row:last-child { border-bottom: none; }
.tax-result-row.highlight { background: #f0fdf4; }
.tax-result-row.highlight-warn { background: #fef2f2; }
.tax-result-row.highlight-main { background: #eff6ff; }
.tax-result-label { font-size: 13px; color: var(--text); }
.tax-result-value {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ===== SECTION 6 CASHFLOW ===== */
.cashflow-waterfall {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.cf-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 18px;
  border-bottom: 1px solid #f8fafc;
}
.cf-row:last-child { border-bottom: none; }
.cf-row.cf-result {
  background: #f8fafc;
  border-top: 2px solid var(--border) !important;
  border-bottom: 2px solid var(--border);
}
.cf-row.cf-final {
  background: linear-gradient(90deg, #f0fdf4, #f8fafc);
  border-top: 2px solid #bbf7d0;
}
.cf-label { font-size: 13px; color: var(--text); font-weight: 500; }
.cf-label.cf-main { font-weight: 700; color: var(--primary); }
.cf-sign { font-size: 12px; color: var(--muted); margin-right: 4px; }
.cf-value {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ===== RENDITE CARDS ===== */
.rendite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.rendite-card {
  background: #f8fafc;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}
.rendite-card-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 6px;
}
.rendite-card-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.rendite-card-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.rendite-card.green { border-color: #bbf7d0; background: #f0fdf4; }
.rendite-card.green .rendite-card-value { color: var(--success); }
.rendite-card.blue { border-color: #bfdbfe; background: #eff6ff; }
.rendite-card.blue .rendite-card-value { color: #1d4ed8; }

/* ===== AUTO-FILL FIELD ===== */
.auto-field-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.auto-field-wrap .form-control { flex: 1; }
.btn-reset-auto {
  background: #e0e7ff;
  border: none;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #4338ca;
  font-size: 14px;
  flex-shrink: 0;
  transition: background .15s;
  padding: 0;
}
.btn-reset-auto:hover { background: #c7d2fe; }
.auto-badge {
  font-size: 9px;
  background: #dbeafe;
  color: #1d4ed8;
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.manual-badge {
  font-size: 9px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ===== CHART CONTAINERS ===== */
.chart-container {
  position: relative;
  height: 220px;
  margin-top: 12px;
}
.chart-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  text-align: center;
}

/* ===== RIGHT SIDEBAR ===== */
#summary-panel {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: var(--sidebar-width);
  background: var(--card);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  z-index: 900;
  display: flex;
  flex-direction: column;
}
.sidebar-header {
  padding: 9px 14px 7px;
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
}
.sidebar-header h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-header h3 i { color: var(--primary-light); }
.summary-close-btn {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 15px;
  cursor: pointer;
  padding: 3px 5px;
  margin-left: auto;
  line-height: 1;
  opacity: 0.7;
}
.summary-close-btn:hover { opacity: 1; }
.sidebar-body { padding: 10px; flex: 1; }

.sb-group {
  margin-bottom: 7px;
}
.sb-group-title {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-bottom: 3px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
}
.sb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
}
.sb-label { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.sb-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 10px;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}
.sb-info:hover { color: var(--primary-light); }
.sb-info-cf { color: rgba(255,255,255,0.55); font-size: 10px; }
.sb-info-cf:hover { color: #fff; }
.sb-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sb-divider { height: 1px; background: var(--border); margin: 3px 0; }

.sb-cashflow-box {
  background: #f8fafc;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  margin-top: 6px;
}
.sb-cf-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}
.sb-cf-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  font-size: 11.5px;
}
.sb-cf-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  background: var(--card);
  border-radius: 6px;
  margin-top: 3px;
  border: 2px solid var(--border);
}
.sb-cf-main-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
}
.sb-cf-main-value {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ===== GESAMTRENDITE BOX ===== */
.gr-box {
  border: 2px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 4px;
}
.gr-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--primary);
  color: #fff;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
}
.gr-header .info-icon { background: rgba(255,255,255,.2); color: #fff; }
.gr-header .info-icon:hover { background: rgba(255,255,255,.35); }
.gr-header-right { font-size: 11px; font-weight: 400; opacity: .75; }
.gr-body { padding: 14px 16px; background: var(--card); }
.gr-row {
  display: grid;
  grid-template-columns: 1fr 120px 64px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.gr-row:last-of-type { border-bottom: none; }
.gr-row-label {
  font-size: 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.gr-sub { font-size: 10px; color: var(--muted); width: 100%; margin-top: -2px; padding-left: 18px; }
.gr-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gr-dot-cf   { background: #3b82f6; }
.gr-dot-til  { background: #10b981; }
.gr-dot-wert { background: #f59e0b; }
.gr-bar-track {
  height: 8px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
}
.gr-bar {
  height: 100%;
  border-radius: 4px;
  transition: width .4s ease;
  background: #10b981;
}
.gr-bar-cf   { background: #3b82f6; }
.gr-bar-cf.gr-bar-neg { background: #ef4444; }
.gr-bar-til  { background: #10b981; }
.gr-bar-wert { background: #f59e0b; }
.gr-val {
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.gr-divider { height: 2px; background: var(--primary); margin: 10px 0 8px; border-radius: 1px; }
.gr-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0 8px;
}
.gr-total-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}
.gr-total-val {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* ===== FAZIT BOX ===== */
.fazit-box {
  border: 2px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.fazit-box.fazit-ok   { border-color: #16a34a; }
.fazit-box.fazit-warn { border-color: #d97706; }
.fazit-box.fazit-bad  { border-color: #dc2626; }
.fazit-header {
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
}
.fazit-box.fazit-ok   .fazit-header { background: #dcfce7; color: #166534; border-color: #86efac; }
.fazit-box.fazit-warn .fazit-header { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.fazit-box.fazit-bad  .fazit-header { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.fazit-icon { font-size: 18px; }
.fazit-body { padding: 14px 18px; background: var(--card); display: flex; flex-direction: column; gap: 6px; }
.fazit-main { font-size: 14px; line-height: 1.7; }
.fazit-details { font-size: 12px; color: var(--muted); line-height: 1.7; }

/* ETF comparison table */
.etf-row-immo-wins { background: rgba(22, 163, 74, 0.06); }
.etf-row-immo-wins:hover { background: rgba(22, 163, 74, 0.12) !important; }
.etf-star { color: #d97706; font-weight: 700; margin-left: 3px; }

.gr-cf-warning {
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12px;
  color: #92400e;
  margin-bottom: 8px;
  line-height: 1.4;
}
.gr-benchmark-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 12px;
}
.gr-bm-label { color: var(--muted); }
.gr-bm-delta { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.sb-gesamtrendite-row {
  background: #eff6ff;
  margin: 3px -10px -3px;
  padding: 4px 10px;
  border-top: 1.5px solid #bfdbfe;
  border-radius: 0 0 8px 8px;
}

/* ===== SITE FOOTER ===== */
.site-footer {
  margin-top: 40px;
  border-top: 2px solid var(--border);
  padding: 28px 0 16px;
}
.site-footer-inner {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.site-footer-contact {
  flex-shrink: 0;
  min-width: 200px;
}
.site-footer-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 3px;
}
.site-footer-addr {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.site-footer-email {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
}
.footer-email-link {
  color: var(--primary-light);
  text-decoration: none;
}
.footer-email-link:hover { text-decoration: underline; }
.site-footer-disclaimer {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
  flex: 1;
}
.site-footer-disclaimer strong {
  color: var(--text);
  font-size: 11px;
}
.site-footer-copy {
  font-size: 10.5px;
  color: #b0bec5;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
@media (max-width: 600px) {
  .site-footer-inner { flex-direction: column; gap: 16px; }
}

/* ===== COLOR UTILITIES ===== */
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-primary { color: var(--primary-light) !important; }
.text-muted-custom { color: var(--muted) !important; }

/* ===== MOBILE NAV TOGGLE ===== */
.mobile-toggle {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1200;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1050;
}
.nav-overlay.active { display: block; }

/* ===== BIDIRECTIONAL INPUT ===== */
.bidir-group {
  display: grid;
  grid-template-columns: 1fr 20px 1fr;
  align-items: center;
  gap: 8px;
}
.bidir-arrow {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* ===== FINANZIERUNG STATS ===== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.stat-item {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.stat-value {
  font-size: 17px;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.stat-item.accent {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.stat-item.accent .stat-value { color: #1d4ed8; }

/* ===== PDF PAGE (hidden in browser, shown only in print) ===== */
#pdf-page { display: none; }

/* ===== PDF COMPONENT STYLES ===== */
.pdf-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1a2f5e;
  color: #fff;
  padding: 7px 14px;
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
}
.pdf-hdr-brand { display: flex; align-items: center; gap: 8px; }
.pdf-hdr-logo { font-size: 20px; }
.pdf-hdr-title { font-size: 15px; font-weight: 800; letter-spacing: 0.3px; }
.pdf-hdr-sub { font-size: 10px; opacity: 0.75; margin-top: 1px; }
.pdf-hdr-meta { text-align: right; font-size: 11px; line-height: 1.5; opacity: 0.9; }
.pdf-meta-lbl { opacity: 0.7; }

.pdf-kpi-bar {
  display: flex;
  background: #1e3a6e;
  color: #fff;
  border-radius: 0 0 8px 8px;
  margin-bottom: 8px;
  overflow: hidden;
}
.pdf-kpi {
  flex: 1;
  padding: 6px 10px;
  border-right: 1px solid rgba(255,255,255,.15);
}
.pdf-kpi-last { border-right: none; }
.pdf-kpi-lbl { font-size: 8px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.7; margin-bottom: 2px; }
.pdf-kpi-val { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }

.pdf-cols {
  display: flex;
  gap: 8px;
  margin-bottom: 7px;
}
.pdf-block {
  flex: 1;
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}
.pdf-block-hdr {
  background: #f1f5f9;
  padding: 4px 10px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #1a2f5e;
  border-bottom: 1.5px solid #e2e8f0;
}
.pdf-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}
.pdf-tbl td {
  padding: 3px 10px;
  border-bottom: 1px solid #f1f5f9;
  color: #374151;
}
.pdf-tbl tr:last-child td { border-bottom: none; }
.pdf-num {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pdf-sub td { background: #f8fafc; font-weight: 700; color: #1a2f5e !important; }
.pdf-total td { background: #dbeafe; font-weight: 800; color: #1e3a6e !important; border-top: 2px solid #93c5fd !important; }
.pdf-total-val { font-size: 13px; }
.pdf-income td { background: #f0fdf4; color: #166534 !important; }
.pdf-cost td { background: #fef2f2; color: #991b1b !important; }
.pdf-spacer td { height: 5px; padding: 0; background: #f8fafc; }

.pdf-rendite-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 6px;
}
.pdf-ri {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  padding: 5px 8px;
  text-align: center;
}
.pdf-ri-accent { background: #eff6ff; border-color: #bfdbfe; }
.pdf-ri-lbl { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #64748b; margin-bottom: 2px; }
.pdf-ri-val { font-size: 15px; font-weight: 800; color: #1a2f5e; font-variant-numeric: tabular-nums; }
.pdf-ri-val-sm { font-size: 12px; padding-top: 2px; }
.pdf-ri-sub { font-size: 8px; color: #94a3b8; margin-top: 1px; }

.pdf-footer {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 2px solid #1a2f5e;
}
.pdf-footer-main { font-size: 9px; font-weight: 600; color: #1a2f5e; }
.pdf-footer-disc { font-size: 8px; color: #94a3b8; margin-top: 2px; line-height: 1.4; }

/* ===== PRINT MEDIA ===== */
@media print {
  @page { size: A4 portrait; margin: 8mm 10mm; }

  /* Hide everything except the PDF page */
  #main-wrapper, #sidebar-nav, #summary-panel,
  .mobile-toggle, .nav-overlay, .mobile-summary-btn,
  .btn-export { display: none !important; }

  body { background: #fff !important; margin: 0; font-family: 'Segoe UI', Arial, sans-serif; }

  #pdf-page {
    display: block !important;
    font-size: 10px;
    color: #1e293b;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Ensure backgrounds print */
  .pdf-hdr, .pdf-kpi-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1400px) {
  :root { --sidebar-width: 260px; }
}
@media (max-width: 768px) {
  .chart-container { max-height: 200px !important; }
}

@media (max-width: 1200px) {
  #summary-panel { display: none; }
  #content { margin-right: 0; }
  .mobile-summary-btn {
    display: flex !important;
    position: fixed;
    bottom: 80px; right: 20px;
    z-index: 800;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 50px; height: 50px;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    cursor: pointer;
  }
}
.mobile-summary-btn { display: none; }

@media (max-width: 991px) {
  #sidebar-nav {
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  #sidebar-nav.open { transform: translateX(0); }
  #main-wrapper { margin-left: 0; }
  #content { padding: 60px 16px 24px; }
}
@media (max-width: 767px) {
  .costs-row { grid-template-columns: 1fr 100px 110px; }
  .stat-grid { grid-template-columns: 1fr; }
  .bidir-group { grid-template-columns: 1fr 14px 1fr; }
  .rendite-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .costs-row { grid-template-columns: 1fr; gap: 4px; }
  .costs-row .costs-input,
  .costs-row .costs-value { width: 100%; text-align: left; }
}

/* ===== DUAL YEAR/MONTH DISPLAY ===== */
.dual-sub {
  display: block;
  font-size: 0.62em;
  font-weight: 500;
  opacity: 0.72;
  margin-top: 2px;
}

/* ===== INVESTMENT-CHECK AMPEL ===== */
.ampel-dot {
  display: inline-block;
  width: 14px; height: 14px;
  min-width: 14px; min-height: 14px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(0,0,0,.12);
  margin-top: 3px;
}
.ampel-green  { background: #16a34a; box-shadow: 0 0 7px rgba(22,163,74,.45); }
.ampel-yellow { background: #d97706; box-shadow: 0 0 7px rgba(217,119,6,.45); }
.ampel-red    { background: #dc2626; box-shadow: 0 0 7px rgba(220,38,38,.45); }
.ampel-gray   { background: #94a3b8; }

.investment-check {
  background: #f8fafc;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.ic-header {
  background: var(--primary);
  color: #fff;
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.ic-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.ic-row:last-child { border-bottom: none; }
.ic-text { flex: 1; }
.ic-title { font-size: 13px; font-weight: 600; color: var(--text); }
.ic-sub   { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ic-group-label {
  padding: 5px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
  background: #f1f5f9;
  border-bottom: 1px solid var(--border);
}
.ic-group-label.ic-group-long {
  background: #eff6ff;
  color: #2563eb;
  border-top: 1px solid #bfdbfe;
}
.ic-snapshot-context {
  padding: 5px 14px 7px;
  font-size: 11px;
  color: var(--muted);
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  line-height: 1.45;
}
.ic-longterm-note {
  margin: 0 14px 10px;
  padding: 7px 10px;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 6px;
  font-size: 11px;
  color: #166534;
  line-height: 1.45;
}
.ic-longterm-note.warn {
  background: #fefce8;
  border-color: #fde047;
  color: #854d0e;
}
.section7-basis-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 7px;
  padding: 6px 12px;
  margin-bottom: 4px;
}
.section7-basis-strip strong { color: #1e40af; }
.basis-link {
  margin-left: auto;
  font-size: 11px;
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}
.basis-link:hover { text-decoration: underline; }

/* ===== WARNING BANNERS ===== */
.warn-banner {
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  font-weight: 500;
}
.warn-banner i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.warn-banner.warn-danger {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  border-left: 4px solid #dc2626;
  color: #7f1d1d;
}

/* ===== MONATLICHE ZUZAHLUNG BOX ===== */
.zuzahlung-box {
  border-radius: 10px;
  padding: 14px 18px;
  text-align: center;
}
.zuzahlung-box.negative { background: linear-gradient(135deg,#fef2f2,#fff1f2); border: 2px solid #fca5a5; }
.zuzahlung-box.positive { background: linear-gradient(135deg,#f0fdf4,#f8fafc); border: 2px solid #bbf7d0; }
.zuzahlung-box.neutral  { background: #f8fafc; border: 2px solid var(--border); }
.zuzahlung-label  { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:6px; }
.zuzahlung-amount { font-size:26px;font-weight:800;font-variant-numeric:tabular-nums; }
.zuzahlung-sub    { font-size:11px;color:var(--muted);margin-top:6px;line-height:1.4; }

/* ===== LEVERAGE BOX ===== */
.leverage-box { background:#f8fafc;border:1.5px solid var(--border);border-radius:10px;overflow:hidden; }
.leverage-header { background:#f1f5f9;padding:8px 14px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:1px solid var(--border); }
.leverage-row { display:flex;justify-content:space-between;padding:8px 14px;border-bottom:1px solid #f1f5f9;font-size:13px; }
.leverage-result { padding:8px 14px;font-size:12.5px;font-weight:600;border-top:1.5px solid var(--border); }

/* ===== ZINSBINDUNG STRESS TEST ===== */
.stress-box { background:#fff7ed;border:1.5px solid #fed7aa;border-radius:10px;overflow:hidden; }
.stress-header { background:#f97316;color:#fff;padding:8px 14px;font-size:11px;font-weight:700;letter-spacing:.4px;display:flex;align-items:center;gap:6px; }
.stress-content { padding:4px 0; }
.stress-row { display:flex;justify-content:space-between;padding:7px 14px;font-size:13px;border-bottom:1px solid #fed7aa; }
.stress-row:last-child { border-bottom:none; }
.stress-row.stress-cf { font-weight:700;background:#fff; }

/* ===== BREAK-EVEN ANALYSE ===== */
.be-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.be-card {
  border-radius: 10px;
  border: 1.5px solid var(--border);
  padding: 16px 18px;
  background: #f8fafc;
  transition: border-color .2s, background .2s;
}
.be-card.be-ok     { border-color: #bbf7d0; background: #f0fdf4; }
.be-card.be-warn   { border-color: #fde68a; background: #fffbeb; }
.be-card.be-danger { border-color: #fca5a5; background: #fef2f2; }
.be-card.be-na     { opacity: .65; }

.be-card-icon { font-size: 20px; margin-bottom: 6px; color: var(--muted); }
.be-card.be-ok .be-card-icon     { color: #16a34a; }
.be-card.be-warn .be-card-icon   { color: #d97706; }
.be-card.be-danger .be-card-icon { color: #dc2626; }

.be-card-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); margin-bottom: 8px;
}
.be-current { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.be-current-val { font-weight: 700; color: var(--text); }

.be-val {
  font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--primary); margin: 6px 0 8px;
  line-height: 1.15;
}
.be-card.be-ok .be-val     { color: #16a34a; }
.be-card.be-warn .be-val   { color: #d97706; }
.be-card.be-danger .be-val { color: #dc2626; }
.be-val-sm { font-size: 14px; }

.be-delta {
  font-size: 12px; font-weight: 600;
  padding: 3px 8px; border-radius: 4px; display: inline-block;
}
.be-delta.ok     { background: #dcfce7; color: #166534; }
.be-delta.warn   { background: #fef9c3; color: #713f12; }
.be-delta.danger { background: #fee2e2; color: #991b1b; }
.be-delta.na     { background: #f1f5f9; color: var(--muted); }

.be-summary {
  background: #f8fafc; border: 1.5px solid var(--border);
  border-radius: 10px; padding: 14px 18px;
  font-size: 13px; line-height: 1.6; margin-top: 16px;
}
.be-summary.be-summary-ok {
  background: #f0fdf4; border-color: #bbf7d0;
}
.be-apply-btn {
  margin-top: 10px;
  display: block;
  width: 100%;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity .15s;
}
.be-apply-btn:hover { opacity: .85; }

/* ===== PDF INVESTMENT CHECK ===== */
.pdf-ic-box { border:1.5px solid #e2e8f0;border-radius:6px;overflow:hidden;margin-bottom:6px; }
.pdf-ic-header { background:#1a2f5e;color:#fff;padding:4px 10px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.6px; }
.pdf-ic-group-lbl { padding:3px 10px;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#64748b;background:#f1f5f9;border-bottom:1px solid #e2e8f0; }
.pdf-ic-group-long { background:#eff6ff;color:#2563eb;border-top:1px solid #bfdbfe; }
.pdf-ic-hinweis { padding:6px 12px;font-size:10px;color:#7f1d1d;background:#fef2f2;border-top:1px solid #fca5a5; }
.pdf-ampel { font-size:12px; }
.pdf-ampel.gr { color:#16a34a; }
.pdf-ampel.yw { color:#d97706; }
.pdf-ampel.rd { color:#dc2626; }

/* PDF ETF-Vergleich Section */
.pdf-etf-box { border:1.5px solid #bfdbfe;border-radius:6px;overflow:hidden;margin-bottom:6px; }
.pdf-etf-kpis { display:flex;gap:0;border-bottom:1px solid #e2e8f0; }
.pdf-etf-kpi { flex:1;padding:5px 8px;border-right:1px solid #e2e8f0;text-align:center; }
.pdf-etf-kpi:last-child { border-right:none; }
.pdf-etf-kpi-lbl { font-size:7.5px;text-transform:uppercase;letter-spacing:.4px;color:#64748b;margin-bottom:2px; }
.pdf-etf-kpi-val { font-size:11px;font-weight:800;color:#1a2f5e;font-variant-numeric:tabular-nums; }
.pdf-etf-chart-wrap { padding:6px 10px;text-align:center; }
.pdf-etf-chart-wrap img { width:100%;max-height:200px;object-fit:contain; }
.pdf-etf-fazit { margin:0 10px 6px;padding:6px 10px;border-radius:4px;font-size:9.5px;line-height:1.5; }
.pdf-etf-fazit.ok   { background:#dcfce7;color:#166534;border:1px solid #86efac; }
.pdf-etf-fazit.warn { background:#fefce8;color:#854d0e;border:1px solid #fde047; }
.pdf-etf-fazit.bad  { background:#fef2f2;color:#991b1b;border:1px solid #fca5a5; }
.pdf-etf-note { margin:0 10px 8px;font-size:8px;color:#94a3b8;line-height:1.4; }

/* ===== MARKTSUCHE (Section 9) ===== */
.section-badge-market {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}
.nav-item-market {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.nav-item-market .section-num {
  background: rgba(16,185,129,.25);
  color: #6ee7b7;
}
.nav-item-market.active .section-num { background: #059669; color: #fff; }

/* Search form */
.btn-market-search {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  border: none;
  padding: 10px 26px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity .2s;
}
.btn-market-search:hover { opacity: .88; }
.btn-market-search:disabled { opacity: .5; cursor: not-allowed; }

/* Spinner */
.ms-spinner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 13px;
}

/* Results header */
.ms-result-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 22px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Table */
.ms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ms-table thead tr {
  background: var(--bg);
  border-bottom: 2px solid var(--border);
}
.ms-table th {
  padding: 9px 12px;
  font-weight: 600;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.ms-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ms-table tbody tr:hover { background: #f8fafc; }

.ms-listing-link {
  color: var(--primary-light);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.3;
}
.ms-listing-link:hover { text-decoration: underline; }

.ms-ort { color: var(--muted); font-size: 12px; }
.ms-num { font-variant-numeric: tabular-nums; font-weight: 500; }

/* Rendite badges */
.ms-rendite-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.ms-rendite-good { background: #dcfce7; color: #15803d; }
.ms-rendite-ok   { background: #fef9c3; color: #a16207; }
.ms-rendite-low  { background: #fee2e2; color: #b91c1c; }
.ms-rendite-na   { background: var(--bg); color: var(--muted); }

/* "In Rechner" button */
.ms-btn-uebernehmen {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--primary-light);
  width: 30px; height: 30px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.ms-btn-uebernehmen:hover {
  background: var(--primary-light);
  border-color: var(--primary-light);
  color: #fff;
}
.ms-btn-done {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
}

/* ── Einzelinserat URL-Box ──────────────────────────────────────────────── */
.ms-url-box {
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border: 1.5px solid #bfdbfe;
  border-radius: 12px;
  padding: 16px 18px;
}
.ms-url-box-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--primary);
  margin-bottom: 4px;
}
.ms-url-box-desc {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
  line-height: 1.5;
}
.ms-url-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.ms-url-row .form-control {
  flex: 1;
  min-width: 180px;
}

@media print {
  #section9 { display: none !important; }
}