/* =====================
   bacap – global styles + calculator styles + dropdown nav
   ===================== */
:root{
  --bg:#eef2f7; --card:#fff; --txt:#0f172a; --muted:#6b7280; --br:#e5e7eb;
  --pri:#2563eb; --pri-600:#1d4ed8; --ring:rgba(37,99,235,.25);
  --bar-paid:#3b82f6; --bar-int:#f59e0b;
  --accent:#0f172a;
  --compact-select-w: 120px;

  --shadow-sm: 0 6px 18px rgba(0,0,0,.06);
  --shadow-md: 0 12px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; background:var(--bg); color:var(--txt)}
.container{max-width:1200px; margin:24px auto; padding:0 16px}

/* Header/Footer */
.site-header,.site-footer{background:var(--card); border-color:var(--br); border-style:solid}
.site-header{border-width:0 0 1px 0; position:sticky; top:0; z-index:50}
.site-footer{border-width:1px 0 0 0; margin-top:28px; color:var(--muted)}
.site-nav{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between; gap:16px}
.brand{font-weight:900;font-size:22px;letter-spacing:.4px;color:var(--txt);text-decoration:none}
.site-nav a{color:var(--txt);text-decoration:none}
.site-nav a:hover{text-decoration:underline}
.site-tools{display:flex;align-items:center;gap:14px}
.theme-label{font-size:14px;color:var(--muted)}
.site-tools select{height:36px;padding:6px 10px;border-radius:10px;border:1px solid var(--br);background:#fff}

/* Dropdown Navigation */
.mainmenu{display:flex; align-items:center; gap:10px}
.menu-item{position:relative}
.menu-btn{appearance:none; background:#0f172a; color:#fff; border:0; padding:10px 14px; border-radius:14px; font-weight:700; cursor:pointer; box-shadow:var(--shadow-sm)}
/* dark theme button color is overridden below */
.menu-btn:hover{filter:brightness(0.95)}
.menu-panel{position:absolute; left:0; top:calc(100% + 10px); background:var(--card); border:0; box-shadow:var(--shadow-md); padding:8px; border-radius:16px; display:none; min-width:240px}
.menu-item.open > .menu-panel{display:block}
.menu-panel a{display:block; padding:10px 12px; border-radius:10px; color:var(--txt); text-decoration:none; font-weight:600}
.menu-panel a:hover{background:#f3f4f6}
/* remove any visible outlines/borders around panel */
.menu-panel::before{content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none}

/* Hero / Landing */
.hero{padding:40px 0 8px}
.hero h1{font-size:56px; margin:0 0 10px}
.hero p{color:var(--muted); margin:0}
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:22px 0 8px}
.tile{background:var(--card); border:1px solid var(--br); border-radius:18px; padding:18px; box-shadow:var(--shadow-sm)}
.tile h3{margin:0 0 8px; font-size:20px}
.tile a{display:inline-flex; align-items:center; gap:10px; font-weight:800; color:#4c1d95; text-decoration:none}
.tile a:hover{text-decoration:underline}

/* Formular-Karte (Calculator) */
.form-card{background:var(--card); border:1px solid var(--br); border-radius:18px; box-shadow:var(--shadow-sm)}
.form-card .form-grid{max-width:860px; margin:0 auto}
.row{display:grid; grid-template-columns: 64px 170px 48px 320px var(--compact-select-w) 120px; gap:10px; padding:12px 24px; border-bottom:1px solid var(--br); align-items:center;}
.row:last-child{border-bottom:0}

.col.icon{display:flex; justify-content:center align-items:center;}
.i{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:999px; background:#eef2ff; color:#3b82f6; font-weight:700}
.col.label{font-weight:700}
.col.field, .col.select{display:flex; align-items:center}
.col.calc{display:flex; align-items:center; justify-content:center; justify-self:start}
.calc-label{display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-weight:600}
.calc-label input{width:18px; height:18px}

input[type="text"], select{width:100%; height:42px; padding:8px 12px; font-size:16px; background:#fff; color:var(--txt); border:1px solid var(--br); border-radius:10px line-height:1.2;}
input[aria-invalid="true"], select[aria-invalid="true"]{ border-color:#dc2626 }

/* Kompakte Selects */
.col.select select, #contribFreq, #compFreq, #termUnit{ width:var(--compact-select-w); min-width:var(--compact-select-w) }

/* % Suffix */
.col.field > .with-suffix{width:100%}

.with-suffix #effRateBadge{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}

.col.field > .with-suffix{position:relative; width:100%}

.with-suffix{position:relative;width:100%}
.with-suffix .suffix{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.with-suffix input{padding-right:96px}


/* Zinssatz-Badge neben Input */
.with-suffix .badge{white-space:nowrap;}
/* Optionen */
.row-options{padding:10px 24px}
.options{width:100%}
.options summary{font-weight:700; cursor:pointer}
.opt-grid{display:grid; grid-template-columns:170px minmax(240px, 1fr); gap:16px; padding:10px 0}
.opt-grid input{max-width:200px}

/* Aktionen */
.actions{display:flex; justify-content:center; align-items:center; gap:12px; padding:16px; border-top:1px solid var(--br)}
.btn{ height:42px; padding:0 16px; border-radius:999px; border:1px solid var(--pri); background:var(--pri); color:#fff; font-weight:700; cursor:pointer; box-shadow:0 8px 20px rgba(37,99,235,.15); transition:.15s ease-in-out }
.btn:hover{ background:var(--pri-600); border-color:var(--pri-600) }
.btn:active{ transform:translateY(1px) }
.btn-secondary{ background:#fff; color:var(--pri); border-color:var(--pri) }
.btn-secondary:hover{ background:#eef2ff }

/* Ergebnis-Karten */
.cards{display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; margin:16px 0}
.card{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--br); border-radius:16px; padding:12px 14px}
.card .k{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.card .v{font-size:20px; font-weight:700; margin-top:auto; line-height:1.2;}

/* Diagramm */
.chart-wrap{background:var(--card); border:1px solid var(--br); border-radius:16px; padding:12px 14px; margin:16px 0; position:relative}
.chart-title{margin:0 0 8px 0; font-size:18px; text-align:center}
.chart-inner{position:relative}
#yearChart{width:100%; height:auto; display:block}
.chart-legend{position:absolute; left:auto; right: 8px; top: 10px; font-size:12px; background:rgba(255,255,255,.9); border:1px solid var(--br); border-radius:10px; padding:6px 8px; display:inline-flex; gap:8px; align-items:center}
.chart-legend .lg{display:inline-block; width:12px; height:12px; border-radius:2px; border:1px solid var(--br)}
.chart-legend .paid{background:var(--bar-paid)}
.chart-legend .int{background:var(--bar-int)}
.chart-axis{fill:var(--muted); font-size:12px}
.chart-bar-paid{fill:var(--bar-paid)}
.chart-bar-int{fill:var(--bar-int)}

/* Tabelle */
.table-wrap{background:var(--card); border:1px solid var(--br); border-radius:16px; padding:12px 14px}
#yearTable{width:100%; border-collapse:collapse}
#yearTable thead th{font-size:12px; text-transform:uppercase; color:var(--muted); letter-spacing:.06em; text-align:left; border-bottom:1px solid var(--br); padding:10px 8px}
#yearTable td{padding:10px 8px; border-bottom:1px solid var(--br)}
#yearTable tbody tr:nth-child(odd){background:#fafafa}

/* Meldungen */
#message{margin:12px 0; color:var(--muted)}

/* Breakpoints */
@media (max-width: 1120px){
  .form-card .form-grid{max-width:820px}
  .row{grid-template-columns: 48px 150px 40px 280px var(--compact-select-w) 120px !important}
  .opt-grid{grid-template-columns:160px minmax(220px,1fr)}
  .tiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 900px){
  .form-card .form-grid{max-width:780px}
  .row{grid-template-columns: 48px 150px 40px 280px var(--compact-select-w) 120px !important}
  .opt-grid{grid-template-columns:150px minmax(200px,1fr)}
}
@media (max-width: 760px){
  /* Smartphone layout — full width, right-aligned calc + select */
  .row{
    display:grid;
    grid-template-columns: 28px 1fr auto !important;
    grid-auto-rows:auto;
    gap:8px 10px;
    align-items:center;
  }
  /* Row 1 */
  .col.icon{ grid-column:1; grid-row:1  align-items:center;}
  .col.label{ grid-column:2; grid-row:1; align-self:center }
  .col.calc{
    grid-column:3; grid-row:1;
    display:flex; align-items:center; justify-content:center;
    justify-self:end;
    width:auto !important; min-width:0 !important;
  }
  /* Row 2 – default: field full width */
  .col.field{ grid-column:1 / -1; grid-row:2 }
  /* Row 2 – with select: field spans 1..2, select in 3 (right) */
  .row.with-select .col.field{ grid-column:1 / 3; grid-row:2 }
  .row.with-select .col.select{
    grid-column:3; grid-row:2;
    display:flex; align-items:center; justify-content:flex-end;
    justify-self:end;
    width:auto !important; min-width:0 !important;
  }
  /* Controls fluid */
  .col.field > *{ width:100% !important; max-width:100% !important; }
  .col.field input, .col.field select, .col.select select,
  #pv,#pmt,#rate,#termValue,#fv,#contribFreq,#compFreq,#termUnit{ width:100%; min-width:0 }
  /* Make select compact but readable */
  .row.with-select .col.select select,
  .row.with-select #contribFreq,.row.with-select #compFreq,.row.with-select #termUnit{
    width:auto; min-width:96px; max-width:50vw; white-space:nowrap;
  }
  /* % suffix layout */
  .with-suffix{position:relative;width:100%}
}


/* Dark Theme (orange Highlights) */
:root[data-theme="dark"]{
  --bg:#0b0f17;            /* Seite */
  --card:#101826;          /* Karten */
  --txt:#e5e7eb;           /* Text */
  --muted:#9aa3b2;         /* Sekundär */
  --br:#223049;            /* Ränder */
  --pri:#ff6b00;           /* Buttons/Highlight */
  --pri-600:#e46000;
  --ring:rgba(255,107,0,.25);
  --bar-paid:#3b82f6;
  --bar-int:#f59e0b;
  --accent:#ff6b00;        /* Logo-Orange */
}
:root[data-theme="dark"] body{background:var(--bg); color:var(--txt)}
:root[data-theme="dark"] .i{background:#1f2937; color:var(--accent)}
:root[data-theme="dark"] .brand{color:var(--accent)}
:root[data-theme="dark"] .card .k{color:var(--accent)}
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] select{background:#0f172a; color:var(--txt); border-color:#263043}
:root[data-theme="dark"] .btn-secondary{background:#0f172a; color:var(--pri); border-color:#var(--pri)}
:root[data-theme="dark"] .chart-legend{background:rgba(16,24,38,.9); border-color:#263043}
:root[data-theme="dark"] #yearTable tbody tr:nth-child(odd){background:#0f1624}
:root[data-theme="dark"] .site-tools select{background:#0f172a;color:var(--txt);border-color:#263043}
:root[data-theme="dark"] .menu-btn{background:#ff6b00; color:#0b0f17}


/* ===== Marketing sections (Landing) ===== */
.hero-wrap{padding:56px 0 28px; position:relative}
.hero-eyebrow{display:inline-block; padding:6px 10px; border-radius:999px; font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--pri); background:rgba(37,99,235,.08)}
:root[data-theme="dark"] .hero-eyebrow{background:rgba(255,107,0,.12)}
.hero-title{font-size:64px; line-height:1.05; margin:14px 0 10px}
.hero-sub{font-size:20px; color:var(--muted); max-width:900px}
.cta-buttons{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.btn-lg{height:52px; padding:0 22px; font-size:18px; border-radius:999px}
.btn-outline{background:transparent; color:var(--pri); border:2px solid var(--pri)}
.btn-outline:hover{background:rgba(37,99,235,.08)}
:root[data-theme="dark"] .btn-outline:hover{background:#1a2231}

.hero-metrics{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:24px}
.metric{background:var(--card); border:1px solid var(--br); border-radius:16px; padding:14px}
.metric .n{font-weight:900; font-size:28px}
.metric .k{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em}

.features{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin:24px 0}
.feature{background:var(--card); border:1px solid var(--br); border-radius:16px; padding:18px}
.feature h3{margin:0 0 6px 0}
.feature p{margin:0; color:var(--muted)}

.stepper{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px}
.step{background:var(--card); border:1px solid var(--br); border-radius:16px; padding:18px}
.step .num{width:30px; height:30px; border-radius:999px; display:inline-grid; place-items:center; background:#eef2ff; color:var(--pri); font-weight:900; margin-right:8px}
:root[data-theme="dark"] .step .num{background:#1f2937; color:var(--pri)}

.cta-band{margin:26px 0 10px; background:linear-gradient(90deg, var(--pri), var(--pri-600)); color:#fff; border-radius:18px; padding:24px}
.cta-band .inner{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.cta-band h2{margin:0; font-size:28px}
.cta-band p{margin:0; opacity:.9}
.cta-band .actions{border:0; padding:0}
.cta-band .btn{background:#0b0f17; border-color:#0b0f17}
.cta-band .btn:hover{filter:brightness(1.05)}

@media (max-width: 1000px){
  .hero-title{font-size:48px}
  .hero-sub{font-size:18px}
  .features{grid-template-columns:repeat(2, minmax(0,1fr))}
  .stepper{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 700px){
  .hero-title{font-size:40px}
  .hero-metrics{grid-template-columns:1fr}
  .features, .stepper{grid-template-columns:1fr}
}


/* ==== THEME TUNING (orange menus/links) ==== */

/* Global brand/link/button color -> Orange */
:root{
  --pri:#ff6b00;
  --pri-600:#e46000;
}

/* Links generell orange */
a { color: var(--pri); }
a:hover { text-decoration: underline; }

/* Header: Brand-Logo in beiden Themes orange */
.brand{ color: var(--pri); text-decoration:none; }

/* Menü-Buttons: immer orange mit schwarzer Schrift */
.menu-btn{
  background: var(--pri);
  color: #0b0f17;
  border: 0;
}
.menu-btn:hover{ filter: brightness(0.96); }

/* Submenü: Standard (helles Theme) bleibt helle Karte, Links orange */
:root:not([data-theme="dark"]) .menu-panel{
  background: var(--card);
  color: var(--txt);
}
:root:not([data-theme="dark"]) .menu-panel a{
  color: var(--pri);
}

/* Submenü im dunklen Theme: orange Panel + schwarze Schrift (wie auf oberster Ebene) */
:root[data-theme="dark"] .menu-panel{
  background: var(--pri) !important;
  color: #0b0f17 !important;
  border: 0;
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
}
:root[data-theme="dark"] .menu-panel a{
  color: #0b0f17 !important;
}
:root[data-theme="dark"] .menu-panel a:hover{
  background: rgba(0,0,0,.08);
}

/* Header im hellen Theme weiß (bereits so), Menüs/Brand sind orange durch Regeln oben */
:root:not([data-theme="dark"]) .site-header{
  background:#fff;
  border-bottom:1px solid var(--br);
}

/* Buttons generell orange (falls zuvor blau) */
.btn{ background: var(--pri); border-color: var(--pri); }
.btn:hover{ background: var(--pri-600); border-color: var(--pri-600); }
.btn-secondary{ color: var(--pri); border-color: var(--pri); }
.btn-secondary:hover{ background: rgba(255,107,0,.08); }

/* Dropdown-Panels: keine sichtbaren Ränder */
.menu-panel{ border:0; }


/* === Custom adjustments for Zinsrechner visibility === */

/* Reset-Button Hintergrund im hellen Theme gleich Seitenhintergrund */
:root:not([data-theme="dark"]) #resetBtn.btn-secondary{
  background: var(--bg);
  color: var(--pri);
  border-color: var(--pri);
}
:root:not([data-theme="dark"]) #resetBtn.btn-secondary:hover{
  background: rgba(255,107,0,.08);
}

/* Ergebnis-Überschriften orange (im hellen Theme) */
:root:not([data-theme="dark"]) .card .k{
  color: var(--pri);
}

/* Diagramm Balken für Zinsen immer orange */
.chart-bar-int{
  fill: var(--pri);
}
:root[data-theme="dark"] .chart-bar-int{
  fill: var(--pri);
}

/* Header-Brand bacap orange */
.brand{
  color: var(--pri);
}


/* === Light theme tweaks per request === */
/* Reset-Button-Hintergrund = Seitenhintergrund (bessere Lesbarkeit) */
:root:not([data-theme="dark"]) .btn-secondary{
  background: var(--bg);
  color: var(--pri);
  border-color: var(--pri);
}
:root:not([data-theme="dark"]) .btn-secondary:hover{
  background: var(--bg);
  filter: brightness(0.98);
}

/* Ergebnis-Überschriften (Karten) orange im hellen Design */
:root:not([data-theme="dark"]) .card .k{
  color: var(--pri);
}

/* Ensure brand logo is orange in LIGHT theme as well */
:root:not([data-theme="dark"]) .brand{
  color: var(--pri) !important;
}

/* v1.6.4 additions */
.badge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; line-height:1.6; background:rgba(37,99,235,.08); color:var(--pri); margin-left:8px}
.hint{margin:6px 24px 10px 64px; font-size:12px; color:var(--muted)}
.hint strong{font-weight:700; color:inherit}

/* two-line chart title */
.chart-title .chart-sub{ display:block; font-weight:400; font-size:0.9em; margin-top:2px; }

/* icon inside buttons */
.btn .icon{ width:1.1em; height:1.1em; vertical-align:-2px; display:inline-block; }

/* Accessibility: screen-reader-only text */
.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Calculator icon next to radio */
.calc-label .icon{ width:1.1em; height:1.1em; display:inline-block; vertical-align:-2px; }


/* Calculator-only selector UI */
.calc-label{ display:flex; align-items:center; justify-content:center; gap:.5rem; }
.calc-label input[type="radio"]{
  position:absolute !important;
  opacity:0 !important;
  width:1px !important; height:1px !important;
  pointer-events:none !important;
}
.calc-label .calc-ico{
  width:44px; height:44px;
  border-radius:9999px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(148,163,184,.35);
  color:rgba(255,255,255,.9);
  background:transparent;
  transition:all .2s ease;
}
.calc-label .calc-ico svg{ width:20px; height:20px; }
.calc-label input[type="radio"]:checked + .calc-ico{
  background: var(--accent, var(--bar-int, #fb923c));
  color:#0b0f19;
  border-color:transparent;
  box-shadow: 0 8px 24px rgba(251,146,60,.35);
}
.calc-label input[type="radio"]:focus + .calc-ico{
  outline:2px solid var(--ring, rgba(59,130,246,.5));
  outline-offset:2px;
}

/* spacing for calc icon column when placed after label */
.row .col.calc{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;      /* shrink to fit */
  width:auto;
  padding-inline:4px; /* tiny breathing room */
}


/* strengthen mobile width behavior */
@media (max-width: 760px){
  .col.field > * { width:100% !important; max-width:100% !important; }
  .col.field .with-suffix{position:relative;width:100%}
  .col.field .with-suffix input{ width:100%; min-width:0; }
  .row.with-select .col.select{ justify-self:end }
}


/* Responsive icon buttons in action bar */
.actions .btn{ display:inline-flex; align-items:center; gap:.5rem; }
.actions .btn .btn-icon{ display:inline-block; width:1.1em; height:1.1em; line-height:1; }
@media (max-width: 760px){
  .actions .btn.icon-only-sm .btn-label{ display:none; }
  .actions .btn.icon-only-sm{ padding-inline:12px; }
}


/* Center icons perfectly inside circle buttons */
.actions .btn .btn-icon svg{ display:block; }

@media (max-width: 760px){
  .actions .btn.icon-only-sm{
    width:44px; height:44px; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .actions .btn.icon-only-sm .btn-icon{
    width:20px; height:20px;
    display:flex; align-items:center; justify-content:center;
  }
  .actions .btn.icon-only-sm .btn-icon svg{ width:100%; height:100%; }
}


/* PATCH: make result table horizontally scrollable without affecting layout */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }
#yearTable{ width:100%; min-width:720px }
#yearTable td, #yearTable th{ white-space:nowrap }


/* Patch: Ergebnisbereich – bis zu 6 Spalten auf Desktop */
@media (min-width: 1200px){
  .cards{ grid-template-columns: repeat(5, 1fr); }
}


/* minimal chart tooltip overlay */
.chart-inner{ position:relative }
.chart-tooltip{
  position:absolute; z-index: 99; display:none;
  background: var(--card); color: var(--txt);
  border:1px solid var(--br); border-radius:10px;
  padding:8px 10px; font-size:13px; pointer-events:none;
}
.chart-tooltip .tt-year{ font-weight:800; margin-bottom:6px }
.chart-tooltip .tt-row{ display:flex; align-items:center; gap:12px; justify-content:space-between; }
.chart-tooltip .tt-label{ opacity:.9 }
.chart-tooltip .tt-val{ text-align:right; min-width:6ch }

/* tooltip swatches (scoped) */
.chart-tooltip .tt-row{ display:flex; align-items:center; gap:8px; }
.chart-tooltip .tt-row.total{ border-bottom:1px dashed var(--br); padding-bottom:6px; margin-bottom:4px; }
.chart-tooltip .tt-label{ flex:1 1 auto; }
.chart-tooltip .tt-val{ text-align:right; min-width:6ch; }
.chart-tooltip .tt-swatch{ width:10px; height:10px; border-radius:2px; border:1px solid var(--br); display:inline-block; }


/* Chart gridlines */
.chart-grid{ stroke:#fff; stroke-width: 1; shape-rendering: crispEdges; }
.chart-grid-v{ stroke:#fff; stroke-width:1; opacity:.6; shape-rendering: crispEdges; }


/* Grid-Zeilen: vertikale Zentrierung der Spalten (ohne Breite/Borders zu ändern) */
.row .col{align-self:center}


/* Scoped: Entnahmeplan – Legendenswatch soll Balkenfarbe nutzen */
#withdrawal-app .chart-legend .swatch{
  display:inline-block;
  width:12px; height:12px;
  border-radius:2px;
  border:1px solid var(--br);
  background: var(--bar-paid) !important;
}

@media (max-width: 760px){
  /* Entnahmeplan: einheitliche Breite der mobilen Auswahllisten */
  #w_pmtFreq, #w_compFreq, #w_termUnit{
    width: var(--compact-select-w) !important;
    min-width: var(--compact-select-w) !important;
    max-width: var(--compact-select-w) !important;
  }
}


/* --- Permalink button: match Zinsrechner (icon-only circular) --- */
.actions #w_permalink{
  width:44px; height:44px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9999px; border-width:2px;
  background:transparent; border-color: var(--pri) !important;
  color: #fff !important;
}
.actions #w_permalink .btn-label{ display:none; }
.actions #w_permalink .btn-icon{ width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; }
.actions #w_permalink .btn-icon svg{ width:100%; height:100%; display:block; }



/* Zinsrechner: Legend links oben (Entnahmeplan bleibt rechts durch globale Regel) */
#calc-form .chart-legend{ left:8px; right:auto; top:10px; }