/* ============================================================
   ETF-Rechner – Dark Design System
   ============================================================ */

/* ---- Self-hosted Fonts ------------------------------------ */
/* Inter latin (400 + 600) – gemeinsames WOFF2-File von Google Fonts */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono latin 400 – optional (non-blocking) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('../fonts/jetbrains-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Reset & Base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #0f172a;
  --bg-surface: #1e293b;
  --bg-card:    #263044;
  --bg-input:   #1e293b;
  --border:     #334155;
  --border-light: #3d4f68;

  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;

  --accent:         #38bdf8;
  --accent-hover:   #7dd3fc;
  --success:        #34d399;
  --warn:           #fbbf24;
  --danger:         #f87171;
  --gain:           #6ee7b7;
  --purple:         #a78bfa;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;

  --shadow: 0 4px 24px rgba(0,0,0,0.35);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);

  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* iOS Safari zoomt automatisch in Inputs mit font-size < 16px → verhindern */
@media (max-width: 768px) {
  input, select, textarea, button {
    font-size: 16px;
  }
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-primary);
  min-height: 100dvh;
  font-size: 15px;
  line-height: 1.6;
}

/* ---- Typography ------------------------------------------- */
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.15rem; font-weight: 600; color: var(--text-primary); }
h3 { font-size: 0.95rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }

/* ---- Layout ----------------------------------------------- */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.app-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
  height: 60px;
}

.app-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  white-space: nowrap;
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.nav-tabs {
  display: flex;
  gap: 4px;
}

.nav-tab {
  background: none;
  border: none;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.nav-tab:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.nav-tab.active {
  background: var(--accent);
  color: #0f172a;
  font-weight: 600;
}

.app-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  width: 100%;
  flex: 1;
  min-width: 0;
}

/* ---- Pages ------------------------------------------------ */
.page {
  display: none;
  min-width: 0;
}
.page.active { display: block; }

.page-title {
  margin-bottom: 28px;
}

.page-title h1 {
  margin-bottom: 4px;
}

.page-title p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* ---- Two-column layout ------------------------------------ */
.main-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.main-grid > * {
  min-width: 0;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.content-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* ---- Cards / Panels --------------------------------------- */
.panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  contain: layout style;
  min-width: 0;
  max-width: 100%;
}

.panel-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-title-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: rgba(56,189,248,0.15);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.result-panel-header {
  align-items: flex-start;
  flex-wrap: wrap;
}

.result-status-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(56,189,248,0.24);
  background: rgba(56,189,248,0.08);
  color: #bae6fd;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.result-status-badge.is-pending::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 0 rgba(186,230,253,0.45);
  animation: result-status-pulse 1.2s ease-out infinite;
}

@keyframes result-status-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(186,230,253,0.42);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(186,230,253,0);
  }
}

.build-results-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: 8px;
  align-items: start;
}

.build-results-layout > * {
  min-width: 0;
}

#build-result-targets {
  justify-self: end;
}

.result-target-overview {
  min-width: 0;
  width: 168px;
  padding: 8px;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
}

.result-target-overview-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.result-target-overview-list {
  display: flex;
  flex-direction: column;
}

.result-target-item {
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.result-target-item:first-child {
  padding-top: 0;
  border-top: none;
}

.result-target-item-head {
  font-size: 0.74rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.result-target-item-head strong,
.result-target-item-line strong {
  color: var(--text-primary);
  font-family: var(--mono);
  font-weight: 600;
}

.result-target-item-line {
  display: block;
  font-size: 0.73rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.result-target-empty {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.panel-body {
  padding: 20px;
  min-width: 0;
  max-width: 100%;
}

.panel.is-stale .panel-body,
.panel.is-stale .collapsible {
  opacity: 0.58;
  transition: opacity 0.16s ease;
}

/* Panels below the fold: skip rendering until near viewport */
.panel.hidden {
  content-visibility: auto;
  contain-intrinsic-size: 0 200px;
}

/* Alias selectors from task spec */
.chart-container { contain: layout style; }
.results-table   { contain: layout style; }

/* ---- Form Inputs ------------------------------------------ */
.form-group {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.input-field {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 9px 12px;
  font-size: 0.9rem;
  font-family: var(--font);
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}

.input-field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(56,189,248,0.12);
}

.input-field::placeholder { color: var(--text-muted); }

select.input-field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%2394a3b8'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.input-addon {
  display: flex;
  align-items: center;
  gap: 0;
}

.input-addon .input-field { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }

.input-addon-suffix {
  background: var(--border);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 9px 10px;
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.checkbox-row input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tax-allowance-hint {
  margin-top: 6px;
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.tax-allowance-status {
  margin-top: 8px;
  padding-left: 24px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.tax-allowance-status-line + .tax-allowance-status-line {
  margin-top: 2px;
}

.tax-allowance-status strong {
  color: var(--text-secondary);
}

.form-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tax-allowance-status-toggle {
  padding-left: 46px;
}

.tax-allowance-hint span {
  display: block;
}

.hidden { display: none !important; }

/* ---- Calc-Mode Tabs --------------------------------------- */
.calc-tabs {
  display: flex;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
  margin-bottom: 16px;
}

.calc-tab {
  flex: 1;
  padding: 7px 8px;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}

.calc-tab:hover { color: var(--text-secondary); }
.calc-tab.active {
  background: var(--bg-surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* ---- Buttons ---------------------------------------------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--accent);
  color: #0f172a;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
}

.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-secondary:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }

.btn-text-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
}

.btn-text-link:hover { color: var(--accent); }

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.btn-icon:hover { color: var(--danger); background: rgba(248,113,113,0.1); }

/* ---- Strategy Pills --------------------------------------- */
.strategy-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.strategy-pill {
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: normal;
  line-height: 1.3;
  text-align: center;
  max-width: 100%;
}

.strategy-pill:hover { border-color: var(--accent); color: var(--accent); }
.strategy-pill.active {
  background: rgba(56,189,248,0.15);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- ETF Slots -------------------------------------------- */
.etf-slots-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.etf-slot {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.etf-slot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.etf-slot-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.etf-slot-body {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.etf-select-stack {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.etf-slot-body .etf-select {
  flex: 1;
  width: 100%;
}
.etf-slot-body .etf-select optgroup {
  color: var(--text-secondary);
  font-weight: 700;
}
.etf-slot-body .etf-select option {
  color: var(--text-primary);
}

.etf-selection-meta {
  min-height: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.weight-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 80px;
  flex-shrink: 0;
}

.weight-input { width: 56px !important; text-align: right; }
.weight-pct-label { color: var(--text-muted); font-size: 0.85rem; }

.etf-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.etf-badge {
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.etf-type-accumulating { background: rgba(52,211,153,0.1); color: var(--success); border-color: rgba(52,211,153,0.3); }
.etf-type-distributing { background: rgba(251,146,60,0.1); color: var(--warn); border-color: rgba(251,146,60,0.3); }
.etf-badge.etf-management-type { background: rgba(148,163,184,0.08); color: var(--text-secondary); border-color: rgba(148,163,184,0.22); }
.etf-badge.dividend-yield { background: rgba(52,211,153,0.08); color: var(--success); border-color: rgba(52,211,153,0.28); }
.etf-badge.subtle { opacity: 0.6; }

.weight-ok {
  font-size: 0.78rem;
  color: var(--success);
  margin-top: 8px;
}

.weight-warn {
  font-size: 0.78rem;
  color: var(--warn);
  margin-top: 8px;
}

.etf-slot-hint {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 8px;
}

.etf-data-note {
  margin-bottom: 14px;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-muted);
  opacity: 0.9;
}

.etf-data-note-tip {
  display: block;
  margin-top: 4px;
  font-size: 0.68rem;
  color: var(--text-secondary);
  opacity: 0.82;
}

.btn-add-etf {
  margin-top: 4px;
  width: 100%;
  font-size: 0.8rem;
  padding: 7px;
}

.rebalance-info-hint {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.55;
  background: rgba(56,189,248,0.08);
  border: 1px solid rgba(56,189,248,0.22);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 12px;
}

.rebalance-info-hint strong {
  color: var(--accent);
}

/* ---- Portfolio Stats -------------------------------------- */
.portfolio-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.pstat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pstat-label { font-size: 0.7rem; color: var(--text-muted); }
.pstat-val { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }

.rebalancing-panel {
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.rebalancing-panel-compact {
  max-width: 760px;
}

.rebalancing-panel-disabled {
  border-style: dashed;
}

.rebalancing-panel-active {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rebalancing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rebalancing-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rebalancing-subtitle {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.rebalancing-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rebalancing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.9fr);
  gap: 16px;
  align-items: start;
}

.rebalancing-column {
  min-width: 0;
}

.rebalancing-column-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rebalancing-column-side {
  display: flex;
  flex-direction: column;
}

.rebalancing-side-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(148,163,184,0.16);
  background: rgba(30,41,59,0.72);
}

.rebalancing-side-card .input-addon {
  width: 100%;
}

.rebalance-side-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rebalance-side-section + .rebalance-side-section {
  padding-top: 14px;
  border-top: 1px solid rgba(148,163,184,0.12);
}

.rebalance-side-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rebalance-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 0;
}

.rebalance-control-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.rebalance-checkbox-row {
  margin: 0;
}

.rebalance-return-wrap {
  margin-top: 2px;
}

.rebalance-stat {
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(148,163,184,0.16);
  background: rgba(30,41,59,0.8);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rebalance-stat-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.rebalance-stat-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}

.rebalance-summary {
  margin-top: 12px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-secondary);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(148,163,184,0.12);
}

.rebalance-summary strong {
  color: var(--text-primary);
}

.rebalance-summary-ok {
  border-color: rgba(52,211,153,0.24);
  background: rgba(52,211,153,0.08);
}

.rebalance-summary-warn {
  border-color: rgba(251,191,36,0.24);
  background: rgba(251,191,36,0.08);
}

.rebalance-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.rebalance-item {
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(148,163,184,0.16);
  background: rgba(30,41,59,0.76);
}

.rebalance-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.rebalance-item-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
}

.rebalance-status {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.24);
  color: var(--text-secondary);
  white-space: nowrap;
}

.rebalance-status.is-underweight {
  color: #bbf7d0;
  border-color: rgba(52,211,153,0.3);
  background: rgba(52,211,153,0.1);
}

.rebalance-status.is-overweight {
  color: #fecaca;
  border-color: rgba(248,113,113,0.3);
  background: rgba(248,113,113,0.1);
}

.rebalance-status.is-balanced {
  color: #cbd5e1;
  border-color: rgba(148,163,184,0.24);
  background: rgba(148,163,184,0.08);
}

.rebalance-capital-wrap {
  margin-bottom: 10px;
}

.rebalance-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

.rebalance-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rebalance-metric-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.rebalance-metric-value {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

.delta-buy {
  color: var(--success);
}

.delta-sell {
  color: var(--danger);
}

.delta-flat {
  color: var(--text-secondary);
}

.rebalance-comparison-card {
  margin-top: 14px;
}

.rebalance-chart-wrap {
  height: 220px;
}

.rebalance-chart-caption {
  margin-top: 8px;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.rebalance-side-note {
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.rebalance-projection-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rebalancing-subsection {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid rgba(148,163,184,0.12);
}

.rebalancing-subsection-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.rebalancing-subsection-subtitle {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.rebalancing-subsection .rebalance-summary {
  margin-top: 0;
}

.rebalance-projection-chart-wrap {
  height: 300px;
  margin-top: 14px;
}

.rebalance-projection-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(148,163,184,0.12);
}

.rebalance-projection-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rebalance-projection-meta-label {
  color: var(--text-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rebalance-projection-meta-value {
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 600;
  font-family: var(--mono);
}

/* ---- Finder Panel ----------------------------------------- */
.finder-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.finder-overlay.active { opacity: 1; pointer-events: all; }

.finder-panel {
  position: fixed;
  top: 0;
  right: -420px;
  width: 420px;
  max-width: 95vw;
  height: 100dvh;
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  z-index: 201;
  transition: right 0.25s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
}

.finder-panel.open { right: 0; }

.finder-panel-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.finder-panel-title {
  font-weight: 600;
  font-size: 1rem;
  color: #f8fbff;
}

.finder-panel-body { padding: 24px; flex: 1; }

/* Finder Inhalt */
.finder-card { display: flex; flex-direction: column; gap: 16px; }

.finder-progress-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.finder-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s;
}

.finder-step-label { font-size: 0.75rem; color: #d7e2f0; }

.finder-question {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: #f8fbff;
}

.finder-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.finder-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(15,23,42,0.92);
  border: 1px solid rgba(148,163,184,0.24);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  color: #f8fbff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.finder-option:hover {
  border-color: rgba(125,211,252,0.7);
  background: rgba(30,41,59,0.98);
  color: #ffffff;
}

.finder-option.selected {
  border-color: var(--accent);
  background: rgba(56,189,248,0.18);
  color: #ffffff;
}

.finder-option:focus-visible {
  outline: 2px solid rgba(125,211,252,0.9);
  outline-offset: 2px;
}

.finder-option-icon {
  font-size: 1.2rem;
  color: #e8f3ff;
  margin-top: 1px;
}
.finder-option-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}
.finder-option-label { font-size: 0.9rem; font-weight: 600; color: #f8fbff; }
.finder-option-desc {
  font-size: 0.74rem;
  line-height: 1.45;
  color: #c7d5e5;
}

.finder-question-helper {
  background: rgba(15,23,42,0.52);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.finder-question-helper-title {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d7e2f0;
  margin-bottom: 4px;
}

.finder-question-helper-text {
  font-size: 0.78rem;
  line-height: 1.5;
  color: #c7d5e5;
}

.finder-question-footer-info {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-muted, #64748b);
  margin-top: 4px;
}

.finder-panel .btn-text-link {
  color: #dbe8f8;
}

.finder-panel .btn-text-link:hover {
  color: #ffffff;
}

.finder-panel .btn-secondary {
  color: #eef6ff;
  border-color: rgba(148,163,184,0.32);
  background: rgba(30,41,59,0.88);
}

.finder-panel .btn-secondary:hover {
  color: #ffffff;
  background: rgba(51,65,85,0.96);
}

.finder-panel .btn-primary {
  color: #ffffff;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
}

.finder-panel .btn-primary:hover {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
}

.finder-panel .btn-icon {
  color: #dbe8f8;
}

.finder-panel .btn-icon:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.08);
}

.finder-panel .input-field {
  color: #f8fbff;
  background: rgba(15,23,42,0.92);
  border-color: rgba(148,163,184,0.28);
}

.finder-panel .input-field:focus {
  border-color: rgba(125,211,252,0.9);
  box-shadow: 0 0 0 3px rgba(56,189,248,0.16);
}

.finder-panel button:focus-visible,
.finder-panel .input-field:focus-visible {
  outline: 2px solid rgba(125,211,252,0.9);
  outline-offset: 2px;
}

.finder-panel button:disabled {
  opacity: 0.5;
  color: #94a3b8;
  background: rgba(15,23,42,0.6);
  cursor: not-allowed;
}

/* Finder Ergebnisse */
.finder-results { display: flex; flex-direction: column; gap: 16px; }
.finder-results-title { font-size: 1rem; font-weight: 700; color: #f8fbff; }

.finder-primary-card {
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.finder-primary-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: #7dd3fc;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.finder-primary-name { font-size: 1rem; font-weight: 700; color: #f8fbff; }
.finder-primary-desc { font-size: 0.85rem; color: #d6e2f1; }

.finder-primary-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.finder-slot-tag {
  font-size: 0.75rem;
  padding: 3px 9px;
  background: rgba(56,189,248,0.1);
  border: 1px solid rgba(56,189,248,0.3);
  color: #eef6ff;
  border-radius: 12px;
}

.finder-slot-tag.small { font-size: 0.7rem; }

.finder-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.finder-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #d7e2f0;
}

.finder-reasons-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.finder-reasons {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.finder-reason { font-size: 0.78rem; color: #bbf7d0; }

.finder-alts-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #d7e2f0;
}

.finder-alts { display: flex; flex-direction: column; gap: 10px; }

.finder-alt-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.finder-alt-name { font-size: 0.9rem; font-weight: 600; color: #f8fbff; }
.finder-alt-desc { font-size: 0.8rem; color: #d6e2f1; }
.finder-alt-slots { display: flex; flex-direction: column; gap: 8px; }

.finder-alt-card .btn-secondary { margin-top: 4px; width: 100%; font-size: 0.78rem; }

/* ---- Summary Cards ---------------------------------------- */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.summary-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.summary-card-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.summary-card-value {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.summary-card.primary .summary-card-value { color: var(--accent); }
.summary-card.success .summary-card-value { color: var(--success); }
.summary-card.gain .summary-card-value { color: var(--gain); }
.summary-card.tax .summary-card-value { color: var(--danger); }
.summary-card.warn .summary-card-value { color: var(--warn); }
.summary-card.info .summary-card-value { color: var(--purple); }
.summary-card.neutral .summary-card-value { color: var(--text-primary); }

/* ---- Chart ------------------------------------------------ */
.chart-wrap {
  position: relative;
  height: 300px;
  contain: layout style;
}

.chart-context-hint {
  margin-top: 12px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.chart-reference-card {
  margin-top: 18px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.chart-reference-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.chart-reference-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #fff;
}

.chart-reference-caption {
  margin-top: 10px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---- Table ------------------------------------------------ */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap--withdraw {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#wd-table-panel,
#wd-table {
  min-width: 0;
}

.result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.result-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.result-table td {
  padding: 9px 14px;
  border-bottom: 1px solid rgba(51,65,85,0.5);
  color: var(--text-secondary);
}

.result-table tbody tr:last-child td { border-bottom: none; }
.result-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.result-table td.num { text-align: right; font-family: var(--mono); font-size: 0.82rem; }
.result-table-cell-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.result-table-cell-main {
  color: var(--text-primary);
}

.result-table-cell-sub {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.result-table--withdraw th {
  white-space: normal;
  overflow-wrap: anywhere;
}

.gain-text { color: var(--gain) !important; }
.tax-text { color: var(--danger) !important; }

/* ---- Collapsible Details ---------------------------------- */
.collapsible {
  display: none;
  min-width: 0;
  max-width: 100%;
}
.collapsible.open { display: block; }

/* ---- Notes / Hinweise ------------------------------------- */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.note-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.note-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.note-body {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.note-body strong { color: var(--text-secondary); }

.note-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--accent);
  opacity: 0.8;
}

.note-definition-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.note-definition-item {
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.note-definition-item:first-child {
  padding-top: 0;
  border-top: none;
}

.note-definition-term {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.note-definition-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ---- Section dividers ------------------------------------- */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.section-divider {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ---- Finder button in sidebar ----------------------------- */
.btn-open-finder {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  width: 100%;
  padding: 9px 14px;
  margin-top: 4px;
}

/* ---- Scrollbar -------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ---- Responsive ------------------------------------------- */
@media (max-width: 960px) {
  .main-grid {
    grid-template-columns: 1fr;
  }

  .sidebar { order: 2; }
  .content-area { order: 1; }
  .rebalancing-layout { grid-template-columns: 1fr; }

  .summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .app-header { padding: 0 16px; }
  .app-main { padding: 20px 16px 48px; }
  .header-inner { gap: 16px; }

  .nav-tab { padding: 7px 12px; font-size: 0.82rem; }

  .summary-cards { grid-template-columns: 1fr 1fr; }
  .summary-card-value { font-size: 1rem; }

  .notes-grid { grid-template-columns: 1fr; }

  .finder-panel { width: 100%; }

  .form-row-2 { grid-template-columns: 1fr; }

  .build-results-layout {
    grid-template-columns: 1fr;
  }

  #build-result-targets {
    justify-self: stretch;
  }

  .result-target-overview {
    width: 100%;
  }

  .result-target-item-line {
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
  }

  .value-compare-card {
    padding: 12px;
  }

  .value-compare-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 400px) {
  .summary-cards { grid-template-columns: 1fr; }
}

/* ---- Transitions ------------------------------------------ */
.panel, .summary-card, .note-item, .etf-slot {
  transition: border-color 0.15s;
}

/* ---- Footer ----------------------------------------------- */
.app-footer {
  text-align: center;
  padding: 20px 24px;
  font-size: 0.75rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

/* ---- Spinner-Pfeile NUR bei Gewichtungs-Input entfernen ---- */
.weight-input::-webkit-outer-spin-button,
.weight-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.weight-input[type=number] {
  -moz-appearance: textfield;
}

/* ---- Slider (Anlagedauer) ---------------------------------- */
.slider-combo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.range-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  outline: none;
  cursor: pointer;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg-surface);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
  transition: background 0.15s, box-shadow 0.15s;
}

.range-slider::-webkit-slider-thumb:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.2);
}

.range-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg-surface);
}

.range-slider::-moz-range-track {
  background: var(--border);
  height: 4px;
  border-radius: 2px;
}

.slider-number {
  flex-shrink: 0;
}

.slider-track-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.slider-track-wrap .range-slider {
  width: 100%;
  flex: none;
}

.slider-marks {
  position: relative;
  height: 1rem;
  margin-top: 4px;
  width: 100%;
  box-sizing: border-box;
}

.slider-marks span {
  position: absolute;
  /* 9px = halbe Thumb-Breite, damit 0% exakt unter Thumb bei Min und 100% exakt unter Thumb bei Max liegt */
  left: calc(9px + (100% - 18px) * var(--p) / 100%);
  transform: translateX(-50%);
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---- 3 Rendite-Felder ------------------------------------- */
.triple-return-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.return-input-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.return-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.return-input-col.pessimistic .return-label { color: #f87171; }
.return-input-col.average     .return-label { color: var(--accent); }
.return-input-col.optimistic  .return-label { color: var(--success); }

.return-input-col.pessimistic .input-field:focus { border-color: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,0.12); }
.return-input-col.optimistic  .input-field:focus { border-color: var(--success); box-shadow: 0 0 0 3px rgba(52,211,153,0.12); }

.return-input-col .input-addon-suffix {
  padding: 9px 6px;
  font-size: 0.75rem;
}

.return-field--static {
  display: flex;
  align-items: center;
  cursor: default;
  user-select: none;
  color: var(--text-muted);
  font-weight: 600;
}

/* ---- Realitätsmodus Toggle --------------------------------- */
.reality-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 4px;
}

.reality-toggle-row.is-disabled {
  opacity: 0.72;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--accent);
}

.toggle-switch input:disabled + .toggle-slider {
  cursor: not-allowed;
  background: rgba(100, 116, 139, 0.5);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(16px);
}

.toggle-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.btn-reroll {
  margin-left: auto;
  font-size: 1rem;
  padding: 2px 8px;
}

.btn-reroll:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.reality-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 4px;
  line-height: 1.4;
}

.tax-info-subheading {
  display: block;
  margin-bottom: 2px;
  font-size: 0.84rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--text-secondary);
}

.reality-lock-hint {
  font-size: 0.76rem;
  color: #fbbf24;
  margin-bottom: 4px;
  line-height: 1.4;
}

/* ---- Modus-spezifische Tabellen-Highlights ---------------- */
.target-reached-row td {
  background: rgba(56, 189, 248, 0.1) !important;
  border-top: 2px solid rgba(56, 189, 248, 0.5) !important;
}

.target-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 10px;
  padding: 1px 6px;
  vertical-align: middle;
}

.target-capital-row td {
  background: rgba(234, 179, 8, 0.08);
  border-top: 2px dashed rgba(234, 179, 8, 0.5) !important;
  color: #EAB308;
  font-weight: 600;
}

.target-capital-label { color: #EAB308 !important; }
.target-capital-val   { color: #EAB308 !important; font-family: var(--mono); }

.depleted-cell {
  color: var(--warn) !important;
  font-weight: 700;
}

.depletion-summary-row td {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 2px solid var(--border) !important;
}

.success-text { color: var(--success) !important; }

/* ---- Berechneter-Wert-Banner (Sparrate / Laufzeit) -------- */
.solved-value-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 14px;
}

.solved-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.solved-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--mono);
}

.value-compare-card {
  display: grid;
  gap: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 14px;
}

.value-compare-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.value-compare-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.value-compare-subtitle {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.value-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.value-compare-item {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: var(--radius-sm);
  background: rgba(15,23,42,0.18);
}

.value-compare-label {
  font-size: 0.73rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin-bottom: 6px;
}

.value-compare-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--mono);
  overflow-wrap: anywhere;
}

.value-compare-value.is-impact {
  color: #fca5a5;
}

.value-compare-meta {
  margin-top: 4px;
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.value-compare-hint {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* ---- Szenario-Tabelle ------------------------------------- */
.scenario-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.scenario-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.scenario-table th {
  padding: 12px 14px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.scenario-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(51,65,85,0.4);
  color: var(--text-secondary);
}

.scenario-table tbody tr:last-child td { border-bottom: none; }
.scenario-table tbody tr:hover td { background: rgba(255,255,255,0.02); }

.scenario-label-col { min-width: 160px; }
.scenario-col { text-align: right; min-width: 130px; }
.scenario-val { text-align: right; font-family: var(--mono); font-size: 0.82rem; }
.scenario-row-label { color: var(--text-secondary); }

/* Skeleton-Platzhalter während gestaffelter Realitätsmodus-Berechnung */
.scenario-skeleton {
  display: inline-block;
  width: 5.5em;
  height: 0.9em;
  border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(148,163,184,0.12) 25%,
    rgba(148,163,184,0.22) 50%,
    rgba(148,163,184,0.12) 75%
  );
  background-size: 200% 100%;
  animation: scenario-skeleton-shimmer 1.4s ease-in-out infinite;
  vertical-align: middle;
}

@keyframes scenario-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.scenario-highlight-row td {
  background: rgba(56,189,248,0.04);
  border-top: 1px solid rgba(56,189,248,0.15);
  border-bottom: 1px solid rgba(56,189,248,0.15) !important;
}

.pessimistic-col {
  background: rgba(239, 68, 68, 0.05);
  color: #fca5a5;
}
.pessimistic-col th, .pessimistic-col th .scenario-return { color: #f87171; }

.average-col { background: transparent; }
.average-col th .scenario-return { color: var(--accent); }

.optimistic-col {
  background: rgba(52, 211, 153, 0.05);
  color: #6ee7b7;
}
.optimistic-col th .scenario-return { color: var(--success); }

.pessimistic-cell { background: rgba(239,68,68,0.04); }
.average-cell     { background: transparent; }
.optimistic-cell  { background: rgba(52,211,153,0.04); }

.scenario-head-icon { display: block; font-size: 1rem; margin-bottom: 2px; }
.scenario-return {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  opacity: 0.8;
  margin-top: 2px;
  font-family: var(--mono);
}

.warn-text { color: var(--warn) !important; }

/* ---- ETF-Details Panel ------------------------------------ */
.etf-details-panel {
  margin-top: 8px;
}

.etf-detail-section {
  margin-bottom: 12px;
}

.etf-detail-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.etf-alloc-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.etf-alloc-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.5fr) minmax(70px, 1fr) max-content;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
}

.etf-alloc-label {
  min-width: 0;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.etf-alloc-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.etf-alloc-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--purple));
  border-radius: 3px;
  transition: width 0.3s;
}

.etf-alloc-pct {
  width: auto;
  text-align: right;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.portfolio-allocation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}

.portfolio-allocation-card {
  margin-bottom: 0;
  min-width: 0;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.portfolio-allocation-list {
  max-height: min(340px, 38vh);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.portfolio-allocation-card .etf-alloc-row {
  grid-template-columns: minmax(108px, 1.55fr) minmax(52px, 1fr) max-content;
}

.portfolio-allocation-card .etf-alloc-label {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}

.portfolio-allocation-empty {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.etf-positions-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.etf-position-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  padding: 2px 0;
  border-bottom: 1px solid rgba(51,65,85,0.3);
}

.etf-position-row:last-child { border-bottom: none; }

.etf-position-name { color: var(--text-secondary); }
.etf-position-weight {
  color: var(--text-muted);
  font-family: var(--mono);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.etf-badge.domicile { color: var(--text-secondary); }

/* ---- Finder Meta-Grid ------------------------------------- */
.finder-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.finder-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.finder-meta-wide {
  grid-column: 1 / -1;
}

.finder-meta-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #c6d3e3;
}

.finder-meta-val {
  font-size: 0.82rem;
  font-weight: 600;
  color: #f8fbff;
}

.finder-meta-regions {
  font-size: 0.75rem;
  font-weight: 400;
  color: #dbe8f8;
}

.finder-type-desc {
  font-size: 0.78rem;
  color: #dbe8f8;
  line-height: 1.5;
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.finder-meta-badge {
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 12px;
  background: rgba(56,189,248,0.10);
  border: 1px solid rgba(125,211,252,0.28);
  color: #eef6ff;
}

.finder-alt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.finder-alt-meta-wrap {
  margin-top: 6px;
}

.finder-alt-regions {
  font-size: 0.72rem;
  color: #dbe8f8;
  margin-top: 2px;
}

.finder-etf-line {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: var(--radius-sm);
  background: rgba(15,23,42,0.48);
}

.finder-etf-line-main {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.finder-etf-line-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: #f8fbff;
}

.finder-etf-line-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.74rem;
  color: #dbe8f8;
}

.finder-etf-line-desc {
  font-size: 0.74rem;
  line-height: 1.45;
  color: #c7d5e5;
}

.finder-alt-etfs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.finder-alt-etfs-label {
  font-size: 0.72rem;
  color: #d7e2f0;
  font-weight: 600;
}

.finder-country-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.finder-country-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(148,163,184,0.12);
  border: 1px solid rgba(148,163,184,0.18);
  color: #eef6ff;
  font-size: 0.72rem;
}

.finder-country-flag {
  line-height: 1;
}

.finder-meta-sub {
  font-size: 0.65rem;
  color: #9ab0cc;
  margin-top: 1px;
}

.finder-details-block {
  margin-top: 6px;
}

.finder-details-toggle {
  font-size: 0.75rem;
  color: #7dd3fc;
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  user-select: none;
}

.finder-details-toggle::-webkit-details-marker { display: none; }

.finder-details-block[open] .finder-details-toggle {
  color: #bae6fd;
}

.finder-skip-default {
  margin-top: 4px;
  text-align: center;
}

.finder-skip-default .btn-text-link {
  font-size: 0.75rem;
  color: #9ab0cc;
}

.finder-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 4px;
}

.finder-more-alts-block {
  margin-top: 4px;
}

.finder-more-alts-toggle {
  font-size: 0.78rem;
  color: #7dd3fc;
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  user-select: none;
}

.finder-more-alts-toggle::-webkit-details-marker { display: none; }

/* ──────────────────────────────────────────────────────────────────
   FINDER – DUELL-MODUS
   ────────────────────────────────────────────────────────────────── */

/* Zwei-Karten-Container */
.finder-duel {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 720px) {
  .finder-duel { flex-direction: column; }
}

/* Einzelne Duell-Karte */
.finder-duel-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--border-light, #3d4f68);
  border-radius: var(--radius-lg, 16px);
  padding: 20px 18px;
  background: var(--bg-card, #263044);
}

.finder-duel-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #f1f5f9);
}

/* Kreisdiagramm-Wrapper */
.finder-duel-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Pie-Legende */
.finder-pie-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  justify-content: center;
}

.finder-pie-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.73rem;
  color: var(--text-secondary, #94a3b8);
}

.finder-pie-legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Tagline */
.finder-duel-tagline {
  font-size: 0.95rem;
  color: var(--text-primary, #f1f5f9);
  line-height: 1.5;
  margin: 0;
}

/* Button-Gruppe */
.finder-duel-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.finder-duel-actions .btn-primary,
.finder-duel-actions .btn-secondary {
  width: 100%;
}

/* Tausch-Link */
.finder-duel-swap-wrap {
  text-align: center;
}

.finder-duel-swap {
  font-size: 0.78rem;
}

/* "Beide tauschen"-Link */
.finder-duel-indecisive {
  text-align: center;
  margin-top: 8px;
}

.finder-swap-both {
  font-size: 0.82rem;
}

/* ── Detail-Overlay ── */

.finder-details-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}

@media (min-width: 600px) {
  .finder-details-overlay {
    align-items: center;
  }
}

.finder-details-panel {
  background: var(--bg-surface, #1e293b);
  border: 1px solid var(--border-light, #3d4f68);
  border-radius: var(--radius-lg, 16px);
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow, 0 4px 24px rgba(0,0,0,0.35));
}

.finder-details-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #334155);
  flex-shrink: 0;
}

.finder-details-panel-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary, #f1f5f9);
}

.finder-details-panel-body {
  overflow-y: auto;
  padding: 16px 20px;
  flex: 1;
}

.finder-details-panel-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border, #334155);
  flex-shrink: 0;
}

.finder-details-panel-footer .btn-primary {
  width: 100%;
}

/* ── Ende Duell-Modus ── */

/* ──────────────────────────────────────────────────────────────────
   FINDER – 3-ACHSEN-ERGEBNIS-ANSICHT
   ────────────────────────────────────────────────────────────────── */

.finder-result-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Antwort-Chips über der Empfehlung */
.finder-axis-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.finder-axis-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--bg-card, #263044);
  border: 1px solid var(--border-light, #3d4f68);
  border-radius: 20px;
  font-size: 0.78rem;
  color: var(--text-secondary, #94a3b8);
}

/* Begründungstext */
.finder-result-explanation {
  font-size: 0.92rem;
  color: var(--text-primary, #f1f5f9);
  line-height: 1.6;
  padding: 12px 14px;
  background: rgba(56, 189, 248, 0.07);
  border-left: 3px solid var(--accent, #38bdf8);
  border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
}

/* Defensiver Hinweis (Tagesgeld) */
.finder-defensive-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: var(--radius-sm, 6px);
  font-size: 0.82rem;
  color: var(--warn, #fbbf24);
  line-height: 1.5;
}

.finder-defensive-note-icon {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.4;
}

/* Ergebnis-Karte */
.finder-result-card {
  border: 1px solid var(--border-light, #3d4f68);
  border-radius: var(--radius-lg, 16px);
  padding: 18px;
  background: var(--bg-card, #263044);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Chart + Metriken nebeneinander */
.finder-result-chart-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.finder-result-metrics {
  flex: 1;
  min-width: 160px;
}

/* "Was wäre anders wenn"-Block */
.finder-whatif-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.finder-whatif-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--bg-surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: var(--radius, 10px);
  font-size: 0.82rem;
}

.finder-whatif-trigger {
  color: var(--text-secondary, #94a3b8);
  flex-shrink: 0;
}

.finder-whatif-effect {
  color: var(--text-primary, #f1f5f9);
  font-weight: 600;
  flex: 1;
  min-width: 80px;
}

.finder-whatif-try {
  font-size: 0.78rem;
  flex-shrink: 0;
}

/* ── Ende 3-Achsen-Ergebnis ── */

/* ---- Chart-Legende-Hinweis -------------------------------- */
.chart-legend-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---- Responsive (neue Elemente) --------------------------- */
@media (max-width: 600px) {
  .triple-return-inputs {
    grid-template-columns: 1fr;
  }

  .finder-meta-grid { grid-template-columns: 1fr; }

  .scenario-table { font-size: 0.78rem; }
  .scenario-col { min-width: 90px; }
  .scenario-label-col { min-width: 110px; }

  .slider-combo { flex-direction: column; align-items: stretch; gap: 6px; }
  .slider-number { width: 100%; }
  .wd-capital-grid { grid-template-columns: 1fr; }
  .wd-withdrawal-row { grid-template-columns: 1fr; }
  .partial-sales-add-row { flex-direction: column; }
  .partial-sale-row { align-items: stretch; }
  .partial-sale-fields { width: 100%; }
  .broker-fee-grid { grid-template-columns: 1fr; }
  .etf-alloc-row { grid-template-columns: minmax(105px, 1.35fr) minmax(48px, 1fr) max-content; }
  .portfolio-allocation-grid { grid-template-columns: 1fr; }
  .portfolio-allocation-list { max-height: 280px; }
  .rebalance-stats { grid-template-columns: 1fr; }
  .rebalancing-side-card { padding: 10px; }
  .rebalance-item-head { align-items: flex-start; flex-direction: column; }
  .rebalance-metrics { grid-template-columns: 1fr 1fr; }
  .rebalance-projection-meta { grid-template-columns: 1fr 1fr; }
}

/* ---- Money Input (Tausenderformat) ----------------------------- */
.money-input {
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  letter-spacing: 0.01em;
}

/* ---- Portfolio-Details-Panel (gesamtes Portfolio) -------------- */
.portfolio-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.portfolio-details-toggle--prominent {
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: 0.75rem;
}

/* ---- Teilverkäufe (Build) ------------------------------------- */
.partial-sales-add-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ps-year-wrap {
  flex: 1.2 1 148px;
  min-width: 132px;
}

.ps-amount-wrap {
  flex: 0.85 1 112px;
  min-width: 104px;
}

.partial-sales-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.partial-sales-empty {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 4px 0;
}

.partial-sale-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  font-size: 0.82rem;
}

.partial-sale-fields {
  display: flex;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
}

.partial-sale-row .input-addon {
  margin-bottom: 0;
}

.partial-sale-row .ps-year-wrap,
.partial-sales-add-row .ps-year-wrap {
  flex: 1.2 1 148px;
}

.partial-sale-row .ps-amount-wrap,
.partial-sales-add-row .ps-amount-wrap {
  flex: 0.85 1 112px;
}

.partial-sale-input {
  min-width: 0;
}

.ps-label { color: var(--text-muted); flex: 0 0 60px; }
.ps-amount { color: var(--text-primary); font-family: var(--mono); font-weight: 600; flex: 1; }

.partial-sale-badge {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.68rem;
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.3);
  color: #fbbf24;
  border-radius: 4px;
  padding: 1px 5px;
  cursor: help;
  vertical-align: middle;
}

.plan-adjustments-stack {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.plan-adjustments-section {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.02);
}

.plan-adjustments-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.plan-adjustments-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}

.plan-adjustments-hint {
  margin-top: 3px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.plan-adjustments-add {
  flex: 0 0 auto;
  white-space: nowrap;
}

.plan-adjustments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan-adjustments-empty {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 4px 0;
}

.plan-adjustment-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

.plan-adjustment-fields {
  display: flex;
  flex: 1;
  gap: 8px;
  flex-wrap: wrap;
}

.plan-adjustment-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.plan-adjustment-field-year {
  flex: 0.85 1 116px;
}

.plan-adjustment-field-value {
  flex: 1.2 1 180px;
}

.plan-adjustment-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.plan-adjustment-row .input-addon {
  margin-bottom: 0;
}

.plan-adjustment-remove {
  flex: 0 0 auto;
  align-self: center;
}

.portfolio-stock-count {
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.84rem;
  line-height: 1.55;
}

.portfolio-stock-count strong {
  color: var(--text-primary);
  font-family: var(--mono);
}

/* ---- Kapital/Gewinn-Split in Entnahme-Tabelle ----------------- */
.capital-gain-split {
  font-size: 0.78rem;
}

.split-capital {
  color: var(--text-secondary);
}

.split-sep {
  color: var(--text-muted);
  padding: 0 2px;
}

.split-gain {
  color: var(--gain);
}

.th-sub {
  display: block;
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* ---- Portfolio-Validierungs-Fehler ---------------------------- */
.portfolio-error-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--danger);
  font-size: 0.88rem;
  line-height: 1.5;
}

.portfolio-error-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.portfolio-error-scroll {
  margin-left: auto;
  color: var(--danger);
  text-decoration: underline;
  font-size: 0.85rem;
  white-space: nowrap;
}

.portfolio-missing-hint {
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 0 4px 0;
  border-top: 1px solid rgba(248, 113, 113, 0.3);
  margin-bottom: 8px;
}

/* ---- Entnahme-Frequenz & Inflation ---------------------------- */
.wd-capital-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.wd-capital-grid .form-group {
  margin-bottom: 0;
}

.wd-withdrawal-row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) auto;
  gap: 8px;
  align-items: stretch;
}

.wd-withdrawal-input {
  min-width: 0;
}

.wd-freq-select {
  flex: 0 0 auto;
  min-width: 100px;
}

.option-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.capital-consumption-switch {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  overflow: hidden;
}

.capital-consumption-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.capital-consumption-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-lg) - 6px);
  background: transparent;
  appearance: none;
  font: inherit;
  padding: 13px 14px;
  text-align: left;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.capital-consumption-option::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  flex-shrink: 0;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.capital-consumption-option:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.03);
  border-color: rgba(61,79,104,0.7);
}

.capital-consumption-option:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}

.capital-consumption-option-text {
  min-width: 0;
}

.capital-consumption-option.is-active {
  color: var(--text-primary);
  font-weight: 600;
  background: linear-gradient(180deg, rgba(56,189,248,0.16), rgba(56,189,248,0.08));
  border-color: rgba(56,189,248,0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 22px rgba(14, 165, 233, 0.12);
}

.capital-consumption-option.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: var(--accent);
}

.capital-consumption-option.is-active::after {
  border-color: rgba(56,189,248,0.55);
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(56,189,248,0.14);
}

.broker-fee-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.input-readonly {
  color: var(--text-secondary);
  background: rgba(255,255,255,0.03);
}

.etf-info-html {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ---- Portfolio-Allokation Sonstige-Zeile ---------------------- */
.etf-alloc-row.is-remainder .etf-alloc-bar-wrap {
  visibility: hidden;
}

/* ---- Slider-Wert ----------------------------------------- */
.slider-number .input-field,
#build-years,
#wd-years {
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
  padding: 8px 6px;
  width: 80px;
}

/* ---- Strategie-Toggle-Zeile ------------------------------------ */
.strategy-toggle-row {
  margin-bottom: 6px;
}

.vorabpauschale-params {
  margin-top: 8px;
  padding-left: 8px;
  border-left: 2px solid var(--border-color);
}

/* ---- ETF-Finder Inline-Link ------------------------------------ */
.etf-finder-inline-wrap {
  margin-top: -6px;
  margin-bottom: 14px;
}

.etf-finder-inline-hint {
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-muted);
  opacity: 0.9;
}


/* ---- Mobile Panel-Reihenfolge ---------------------------------- */
@media (max-width: 768px) {
  .content-area {
    display: flex;
    flex-direction: column;
  }

  .plan-adjustments-header {
    flex-direction: column;
    align-items: stretch;
  }

  .plan-adjustments-add {
    width: 100%;
  }

  .plan-adjustment-row {
    align-items: stretch;
  }

  .plan-adjustment-remove {
    align-self: flex-end;
  }

  /* Aufbau */
  #build-inputs-panel    { order: 1; }
  #build-result-panel    { order: 2; }
  #build-chart-panel     { order: 3; }
  #build-allocation-panel { order: 4; }
  #build-table-panel     { order: 5; }
  #build-notes-panel     { order: 6; }
  #build-etf-panel       { order: 7; }
  #build-rebalancing-panel { order: 8; }

  /* Entnahme */
  #wd-inputs-panel       { order: 1; }
  #wd-result-panel       { order: 2; }
  #wd-chart-panel        { order: 3; }
  #wd-allocation-panel   { order: 4; }
  #wd-table-panel        { order: 5; }
  #wd-notes-panel        { order: 6; }
  #wd-etf-panel          { order: 7; }
  #wd-rebalancing-panel  { order: 8; }
}

/* ---- Year-cap hint ---------------------------------------- */
.years-cap-hint {
  font-size: 0.75rem;
  color: var(--warn, #f59e0b);
  margin-top: 4px;
}

/* ---- Nominal/Real badge in scenario table header ---------- */
.nominal-real-badge {
  font-size: 0.72em;
  font-weight: 400;
  opacity: 0.7;
}

/* ---- WD returns reset button ------------------------------ */
.btn-reset-wd-returns {
  padding: 3px 10px;
}

/* ---- Sparrate schätzen ----------------------------------------- */
.savings-estimator-section {
  border-color: rgba(56,189,248,0.28);
  background: rgba(56,189,248,0.06);
}

.savings-estimator-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.savings-estimator-toggle {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
  padding: 0;
}

.savings-estimator-toggle:hover {
  color: var(--accent);
}

.savings-estimator {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 12px;
}

.savings-estimator-intro {
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.45;
}

.savings-estimator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.savings-estimator-grid .form-group {
  margin-bottom: 0;
}

.form-group-with-tooltip {
  overflow: visible;
}

.form-label-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  overflow: visible;
}

.form-label-row .form-label {
  margin-bottom: 0;
}

.form-hint-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  vertical-align: text-bottom;
  overflow: visible;
}

.form-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: var(--text-secondary);
  cursor: help;
  font-size: 0.85em;
  line-height: 1;
  outline: none;
  user-select: none;
}

.form-hint:hover,
.form-hint:focus-visible {
  color: var(--text-primary);
  outline: 2px solid rgba(56, 189, 248, 0.45);
  outline-offset: 2px;
}

.form-tooltip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  transform: translateY(4px);
  width: 240px;
  max-width: min(260px, calc(100vw - 32px));
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}

.form-tooltip::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 100%;
  border-width: 6px;
  border-style: solid;
  border-color: var(--bg-surface) transparent transparent transparent;
}

.form-hint:hover + .form-tooltip,
.form-hint:focus-visible + .form-tooltip,
.form-hint-wrap:hover .form-tooltip,
.form-hint-wrap:focus-within .form-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#build-inputs-panel {
  overflow: visible;
  contain: none;
}

#build-inputs-panel .panel-body,
#build-inputs-panel .collapsible,
#build-inputs-panel .savings-estimator-section,
#build-inputs-panel .savings-estimator,
#build-inputs-panel .savings-estimator-grid,
#build-inputs-panel .form-group {
  overflow: visible;
}

.savings-estimator-result {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.savings-estimator-summary {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: rgba(15,23,42,0.58);
}

.savings-estimator-summary.is-positive {
  border-color: rgba(34,197,94,0.42);
  background: rgba(34,197,94,0.08);
}

.savings-estimator-summary.is-tight {
  border-color: rgba(245,158,11,0.42);
  background: rgba(245,158,11,0.08);
}

.savings-estimator-summary-label {
  display: block;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.savings-estimator-summary strong {
  display: block;
  color: var(--text-primary);
  font-size: 1.18rem;
  line-height: 1.2;
  margin-bottom: 5px;
}

.savings-estimator-summary-note,
.savings-estimator-tips-note {
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.45;
}

.savings-estimator-tips {
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: rgba(15,23,42,0.42);
}

.savings-estimator-tips-title {
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 800;
  margin-bottom: 7px;
}

.savings-estimator-tips-title:not(:first-child) {
  margin-top: 10px;
}

.savings-estimator-tips ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.55;
}

.savings-estimator-apply {
  align-self: flex-start;
}

.savings-estimator-apply-value {
  align-self: stretch;
  border: 1px solid rgba(56,189,248,0.3);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: rgba(56,189,248,0.08);
}

.savings-estimator-apply-value span {
  display: block;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.savings-estimator-apply-value strong {
  color: var(--text-primary);
  font-size: 1rem;
}

.savings-estimator-apply:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .savings-estimator-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Ergebnis-Portfolio-Allokation ----------------------------- */
.allocation-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.allocation-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.allocation-kpi {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: rgba(15,23,42,0.5);
}

.allocation-kpi span {
  display: block;
  color: var(--text-muted);
  font-size: 0.72rem;
  margin-bottom: 4px;
}

.allocation-kpi strong {
  color: var(--text-primary);
  font-size: 0.95rem;
}

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

.allocation-chart-card,
.allocation-detail-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: rgba(15,23,42,0.42);
}

.allocation-chart-title,
.allocation-detail-title {
  color: var(--text-primary);
  font-size: 0.86rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.allocation-chart-wrap {
  position: relative;
  height: 250px;
}

.allocation-details {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.allocation-details summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.86rem;
  list-style: none;
}

.allocation-details summary::-webkit-details-marker {
  display: none;
}

.allocation-detail-grid {
  margin-top: 12px;
}

.allocation-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.allocation-row {
  display: grid;
  grid-template-columns: minmax(90px, 1.2fr) minmax(80px, 2fr) 64px;
  gap: 10px;
  align-items: center;
  font-size: 0.78rem;
}

.allocation-row-label {
  color: var(--text-secondary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.allocation-row-bar-wrap {
  height: 7px;
  border-radius: 999px;
  background: rgba(148,163,184,0.15);
  overflow: hidden;
}

.allocation-row-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.allocation-row-value {
  text-align: right;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.allocation-row.is-remainder .allocation-row-bar-wrap {
  visibility: hidden;
}

.allocation-empty {
  color: var(--text-muted);
  font-size: 0.82rem;
}

@media (max-width: 860px) {
  .allocation-kpis,
  .allocation-chart-grid,
  .allocation-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- ETF-Finder Filter-Tab ------------------------------------- */
.finder-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}

.finder-tab {
  border: 1px solid rgba(148,163,184,0.24);
  background: rgba(15,23,42,0.8);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  font-weight: 700;
  cursor: pointer;
}

.finder-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.finder-filter-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.finder-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.finder-filter-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.finder-filter-field > span {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
}

.finder-filter-field-wide {
  grid-column: 1 / -1;
}

.finder-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.finder-filter-chip {
  border: 1px solid rgba(148,163,184,0.25);
  background: rgba(15,23,42,0.75);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.finder-filter-chip.active {
  background: rgba(79,125,243,0.2);
  border-color: var(--accent);
  color: #f8fbff;
}

.finder-filter-results-head {
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 700;
}

.finder-filter-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.finder-filter-result {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.82);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 13px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.finder-filter-result:hover,
.finder-filter-result:focus-visible {
  border-color: var(--accent);
  background: rgba(30,41,59,0.92);
}

.finder-filter-result-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.finder-filter-result-name {
  font-weight: 800;
  font-size: 0.9rem;
  color: #f8fbff;
}

.finder-filter-result-desc {
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.45;
}

.finder-filter-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.finder-filter-result-meta span {
  border-radius: var(--radius-sm);
  background: rgba(148,163,184,0.12);
  color: var(--text-secondary);
  padding: 4px 7px;
  font-size: 0.72rem;
}

.finder-filter-empty {
  color: var(--text-muted);
  border: 1px dashed rgba(148,163,184,0.25);
  border-radius: var(--radius-sm);
  padding: 16px;
}

@media (max-width: 640px) {
  .finder-tabs,
  .finder-filter-grid {
    grid-template-columns: 1fr;
  }
}