/* =====================================================================
   ETF Rechner v1.0.0 — etf-calculator.css
   Scoped under .zsr-etf-calculator — zero global pollution.
   ===================================================================== */

/* Hidden safety — must beat display:flex !important on .etf-field */
.zsr-etf-calculator [hidden]            { display: none !important; }
.zsr-etf-calculator .etf-field[hidden]  { display: none !important; }

.zsr-etf-calculator {
  --etf-font-disp: Georgia, 'Times New Roman', serif;
  --etf-text:    #0f172a; --etf-muted: #64748b; --etf-hint: #94a3b8;
  --etf-surface: #ffffff; --etf-surf2: #f8fafc; --etf-border: #e2e8f0;
  --etf-focus:   #1d4ed8; --etf-accent: #1d4ed8; --etf-acl: #eff6ff;
  --etf-green:   #059669; --etf-red: #dc2626;
  --etf-amber:   #d97706;
  --etf-cost:    #7c3aed;
  --etf-bar-gross: #1d4ed8;   /* dark navy blue  — Ohne Kosten */
  --etf-bar-net:   #06b6d4;   /* cyan            — Nach Kosten */
  --etf-bar-real:  #7c3aed;   /* violet          — Realwert    */
  --etf-r-sm:4px; --etf-r:10px; --etf-r-lg:16px; --etf-r-xl:22px;
  --etf-shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05);
  --etf-tr: 200ms cubic-bezier(.4,0,.2,1);
  font-family: inherit; color: var(--etf-text); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.zsr-etf-calculator *, .zsr-etf-calculator *::before, .zsr-etf-calculator *::after { box-sizing: border-box; }
.zsr-etf-calculator p { color:var(--etf-muted);font-size:1rem;line-height:1.7;margin:0 0 1rem;font-family:inherit; }
.zsr-etf-calculator p:last-child { margin-bottom:0; }
.zsr-etf-calculator h1,.zsr-etf-calculator h2,.zsr-etf-calculator h3 { font-family:var(--etf-font-disp);color:var(--etf-text);line-height:1.2;font-weight:700; }
.zsr-etf-calculator h2 { font-size:clamp(1.3rem,3vw,1.75rem);margin:0 0 .875rem; }
.zsr-etf-calculator h3 { font-size:.9375rem;margin:0 0 .5rem;font-family:inherit; }
.zsr-etf-calculator a { color:var(--etf-accent);text-decoration:none; }
.zsr-etf-calculator a:hover { text-decoration:underline; }
.zsr-etf-calculator ul,.zsr-etf-calculator ol { margin:0;padding:0;list-style:none; }
@media (prefers-color-scheme:dark) {
  .zsr-etf-calculator { --etf-text:#f1f5f9;--etf-muted:#94a3b8;--etf-hint:#64748b;--etf-surface:#1e293b;--etf-surf2:#0f172a;--etf-border:#334155;--etf-accent:#60a5fa;--etf-acl:#172554; }
}
.zsr-etf-calculator :focus-visible { outline:2px solid var(--etf-focus);outline-offset:2px;border-radius:var(--etf-r-sm); }

/* Hero */
.zsr-etf-calculator .etf-hero { text-align:center;padding:1.5rem 1rem 1rem;max-width:720px;margin:0 auto 1rem; }
.zsr-etf-calculator .etf-hero__eyebrow { font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--etf-accent);margin-bottom:.5rem;font-family:inherit;display:block !important; }
.zsr-etf-calculator .etf-hero__title { font-family:var(--etf-font-disp);font-size:clamp(1.75rem,5vw,2.75rem);line-height:1.1;color:var(--etf-text);margin:0 0 .5rem;font-weight:700; }
.zsr-etf-calculator .etf-hero__lead { font-size:1rem;color:var(--etf-muted);margin:0 0 .375rem; }
.zsr-etf-calculator .etf-hero__trust { font-size:.75rem;color:var(--etf-hint);font-style:italic;margin:0;font-family:inherit; }

/* Layout */
.zsr-etf-calculator .etf-calc-section { max-width:980px;margin:0 auto 2.5rem; }
.zsr-etf-calculator .etf-layout { display:grid !important;grid-template-columns:1fr 1fr;gap:24px;align-items:start; }
@media (max-width:780px) { .zsr-etf-calculator .etf-layout { grid-template-columns:1fr; } }

/* Card */
.zsr-etf-calculator .etf-card { background:var(--etf-surface);border:1px solid var(--etf-border);border-radius:var(--etf-r-xl);padding:1.625rem;box-shadow:var(--etf-shadow); }
.zsr-etf-calculator .etf-card__title { font-family:var(--etf-font-disp);font-size:1.125rem;font-weight:700;margin:0 0 1.25rem;color:var(--etf-text); }

/* Fields */
.zsr-etf-calculator .etf-field { display:flex !important;flex-direction:column;gap:5px;margin-bottom:1rem; }
.zsr-etf-calculator .etf-field:last-of-type { margin-bottom:0; }
.zsr-etf-calculator .etf-label { font-size:.8125rem;font-weight:500;color:var(--etf-muted);font-family:inherit; }
.zsr-etf-calculator .etf-field-hint { font-size:.75rem;color:var(--etf-hint);font-family:inherit; }
.zsr-etf-calculator .etf-field-note { font-size:.75rem;color:var(--etf-hint);font-style:italic;font-family:inherit;margin:0; }
.zsr-etf-calculator .etf-input-wrap { position:relative;display:flex !important;align-items:center; }
.zsr-etf-calculator .etf-input-prefix,.zsr-etf-calculator .etf-input-suffix { position:absolute;font-size:.875rem;font-weight:500;color:var(--etf-muted);pointer-events:none;font-family:inherit; }
.zsr-etf-calculator .etf-input-prefix { left:12px; }
.zsr-etf-calculator .etf-input-suffix { right:12px; }
.zsr-etf-calculator .etf-input { width:100%;border:1.5px solid var(--etf-border);border-radius:var(--etf-r);padding:9px 34px 9px 13px;font-size:1rem;font-family:inherit;font-weight:500;background:var(--etf-surface);color:var(--etf-text);-webkit-appearance:none;appearance:none;box-shadow:none;transition:border-color var(--etf-tr); }
.zsr-etf-calculator .etf-input--prefixed { padding-left:34px !important;padding-right:13px !important; }
.zsr-etf-calculator .etf-input:hover { border-color:#94a3b8; }
.zsr-etf-calculator .etf-input:focus { border-color:var(--etf-focus);outline:none; }

/* Chips */
.zsr-etf-calculator .etf-chips { display:flex !important;align-items:center;flex-wrap:wrap;gap:5px;margin-top:5px; }
.zsr-etf-calculator .etf-chips__label { font-size:.6875rem;color:var(--etf-hint);font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-family:inherit;white-space:nowrap; }
.zsr-etf-calculator .etf-chip { display:inline-flex !important;align-items:center;padding:2px 9px;font-size:.8125rem;font-family:inherit;font-weight:500;color:var(--etf-muted);background:var(--etf-surf2);border:1px solid var(--etf-border);border-radius:999px;cursor:pointer;box-shadow:none;text-transform:none;transition:background var(--etf-tr),border-color var(--etf-tr),color var(--etf-tr); }
.zsr-etf-calculator .etf-chip:hover { background:var(--etf-acl);border-color:var(--etf-accent);color:var(--etf-accent); }
.zsr-etf-calculator .etf-chip--active { background:var(--etf-accent) !important;border-color:var(--etf-accent) !important;color:#fff !important; }

/* Warn / Trust / Assumption */
.zsr-etf-calculator .etf-assumption-note { font-size:.75rem;color:var(--etf-hint);font-style:italic;margin:.75rem 0 0;font-family:inherit; }
.zsr-etf-calculator .etf-warn { background:#fffbeb;border:1px solid #fde68a;border-radius:var(--etf-r);padding:9px 13px;font-size:.8125rem;color:#92400e;margin-top:.75rem;font-family:inherit;line-height:1.5; }
.zsr-etf-calculator .etf-trust-strip { display:flex !important;flex-wrap:wrap;gap:8px 14px;justify-content:center;margin-top:1.125rem;padding-top:.875rem;border-top:1px solid var(--etf-border); }
.zsr-etf-calculator .etf-trust-strip__item { display:flex !important;align-items:center;gap:5px;font-size:.75rem;color:var(--etf-muted);white-space:nowrap;font-family:inherit; }
.zsr-etf-calculator .etf-trust-strip__item svg { opacity:.5;flex-shrink:0; }

/* Result card */
.zsr-etf-calculator .etf-sep { height:1px;background:var(--etf-border);margin:1rem 0; }
.zsr-etf-calculator .etf-section-label { font-size:.6875rem !important;font-weight:700 !important;text-transform:uppercase !important;letter-spacing:.09em !important;color:var(--etf-hint) !important;margin:0 0 .625rem !important;font-family:inherit !important;display:block !important; }

/* Primary */
.zsr-etf-calculator .etf-primary { padding:.25rem 0 .5rem; }
.zsr-etf-calculator .etf-primary__val { font-family:var(--etf-font-disp);font-size:clamp(2rem,4.5vw,2.75rem);font-weight:700;line-height:1.05;color:var(--etf-text);letter-spacing:-.025em;display:block !important;margin-bottom:.25rem; }
.zsr-etf-calculator .etf-primary__label { font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--etf-hint);display:block !important;font-family:inherit;margin-bottom:.25rem; }
.zsr-etf-calculator .etf-primary__sub { font-size:.8125rem;color:var(--etf-muted);display:block !important;font-family:inherit; }

/* Metric cards */
.zsr-etf-calculator .etf-metric-cards { display:grid !important;grid-template-columns:1fr 1fr;gap:8px; }
.zsr-etf-calculator .etf-metric-card { display:flex !important;flex-direction:column;gap:3px;padding:.625rem .75rem;border:1px solid var(--etf-border);border-radius:var(--etf-r);background:var(--etf-surf2); }
.zsr-etf-calculator .etf-metric-card__label { font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--etf-hint);font-family:inherit;display:block !important; }
.zsr-etf-calculator .etf-metric-card__val { font-family:var(--etf-font-disp);font-size:1.125rem;font-weight:700;color:var(--etf-text);display:block !important;letter-spacing:-.01em; }
.zsr-etf-calculator .etf-val--gain { color:var(--etf-green) !important; }
.zsr-etf-calculator .etf-val--loss { color:var(--etf-red)   !important; }
.zsr-etf-calculator .etf-val--cost { color:var(--etf-cost)  !important; }

/* Comparison bars */
.zsr-etf-calculator .etf-bars { padding:.25rem 0; }
.zsr-etf-calculator .etf-bar-row { display:grid !important;grid-template-columns:9rem 1fr auto;align-items:center;gap:8px;margin-bottom:.75rem; }
@media (max-width:560px) { .zsr-etf-calculator .etf-bar-row { grid-template-columns:1fr;gap:4px; } }
@media (max-width:560px) { .zsr-etf-calculator .etf-bar-track { height:10px; } }
.zsr-etf-calculator .etf-bar-row__label { font-size:.75rem;font-weight:500;color:var(--etf-muted);font-family:inherit;white-space:nowrap; }
.zsr-etf-calculator .etf-bar-row__val { font-size:.8125rem;font-family:var(--etf-font-disp);font-weight:600;color:var(--etf-text);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap; }
.zsr-etf-calculator .etf-bar-track { height:14px;background:var(--etf-surf2);border:1px solid var(--etf-border);border-radius:999px;overflow:hidden; }
.zsr-etf-calculator .etf-bar-fill { height:100%;border-radius:999px;transition:width .45s ease; }
.zsr-etf-calculator .etf-bar-fill--gross { background:var(--etf-bar-gross); }
.zsr-etf-calculator .etf-bar-fill--net   { background:var(--etf-bar-net);   }
.zsr-etf-calculator .etf-bar-fill--real  { background:var(--etf-bar-real);  }
.zsr-etf-calculator .etf-bars__ter-note,.zsr-etf-calculator .etf-bars__zero-note { font-size:.75rem;color:var(--etf-muted);font-style:italic;margin:.5rem 0 0;font-family:inherit; }

/* Interpretation */
.zsr-etf-calculator .etf-interp__list { list-style:none !important;padding:0;margin:0;display:flex !important;flex-direction:column;gap:5px; }
.zsr-etf-calculator .etf-interp__item { font-size:.8375rem;line-height:1.55;padding:5px 8px 5px 20px;border-radius:var(--etf-r-sm);position:relative;background:var(--etf-surf2);color:var(--etf-muted);font-family:inherit; }
.zsr-etf-calculator .etf-interp__item::before { content:'';position:absolute;left:7px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--etf-hint); }
.zsr-etf-calculator .etf-interp__placeholder { font-size:.8125rem;color:var(--etf-hint);font-style:italic;margin:0;font-family:inherit; }

/* Content blocks */
.zsr-etf-calculator .etf-content-blocks { max-width:980px;margin:0 auto;padding-bottom:4rem; }
.zsr-etf-calculator .etf-block { margin-bottom:3rem; }
.zsr-etf-calculator .etf-divider { height:0;border:none;border-top:1px solid var(--etf-border);margin:2rem 0;opacity:.5; }
.zsr-etf-calculator .etf-block-note { font-size:.8125rem;color:var(--etf-hint);font-style:italic;margin:1rem 0 0;font-family:inherit; }
.zsr-etf-calculator .etf-short-answer { background:var(--etf-acl);border-left:3px solid var(--etf-accent);border-radius:0 var(--etf-r) var(--etf-r) 0;padding:.875rem 1.1rem;margin:1rem 0; }
.zsr-etf-calculator .etf-short-answer h3 { font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--etf-accent);margin:0 0 .4rem;font-family:inherit; }
.zsr-etf-calculator .etf-short-answer p { font-size:.9rem;color:var(--etf-text);margin:0; }
.zsr-etf-calculator .etf-info-box { background:var(--etf-surf2);border-left:3px solid var(--etf-amber);border-radius:0 var(--etf-r) var(--etf-r) 0;padding:.875rem 1.1rem;margin:1rem 0;font-size:.9375rem;color:var(--etf-muted);font-family:inherit;line-height:1.6; }
.zsr-etf-calculator .etf-use-list { margin:.75rem 0;padding-left:0;list-style:none; }
.zsr-etf-calculator .etf-use-list li { font-size:.9375rem;color:var(--etf-muted);margin-bottom:.5rem;line-height:1.5;padding-left:1.375rem;position:relative; }
.zsr-etf-calculator .etf-use-list li::before { content:'\2013';position:absolute;left:0;color:var(--etf-accent);font-weight:600; }

/* Formula block */
.zsr-etf-calculator .etf-formula-block { border:1px solid var(--etf-border);border-radius:var(--etf-r);overflow:hidden;margin:1rem 0; }
.zsr-etf-calculator .etf-formula-row { display:flex !important;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;padding:.5rem .875rem;border-bottom:1px solid var(--etf-border);background:var(--etf-surface);font-size:.875rem;font-family:inherit; }
.zsr-etf-calculator .etf-formula-row:last-child { border-bottom:none; }
.zsr-etf-calculator .etf-formula-row--accent { background:var(--etf-acl);font-weight:600; }
.zsr-etf-calculator .etf-formula-name { color:var(--etf-muted);font-size:.8125rem;flex-shrink:0; }
.zsr-etf-calculator code.etf-formula-eq { font-family:'Courier New',Courier,monospace !important;font-size:.8125rem;color:var(--etf-text);background:none;border:none;padding:0;word-break:break-word; }

/* Table */
.zsr-etf-calculator .etf-table-wrap { overflow-x:auto;margin:1rem 0;border-radius:var(--etf-r);border:1px solid var(--etf-border); }
.zsr-etf-calculator .etf-table { width:100%;border-collapse:collapse;font-size:.875rem;background:var(--etf-surface);font-family:inherit;font-variant-numeric:tabular-nums; }
.zsr-etf-calculator .etf-table caption { font-size:.75rem;color:var(--etf-hint);padding:.5rem .875rem;text-align:left;background:var(--etf-surf2);border-bottom:1px solid var(--etf-border); }
.zsr-etf-calculator .etf-table th { padding:.5625rem .875rem;text-align:left;font-size:.75rem;font-weight:600;color:var(--etf-muted);text-transform:uppercase;letter-spacing:.05em;background:var(--etf-surf2);border:none;border-bottom:1px solid var(--etf-border); }
.zsr-etf-calculator .etf-table td { padding:.5625rem .875rem;border:none;border-bottom:1px solid var(--etf-border);color:var(--etf-text); }
.zsr-etf-calculator .etf-table tr:last-child td { border-bottom:none; }
.zsr-etf-calculator .etf-table tr:hover td { background:var(--etf-surf2); }
.zsr-etf-calculator .etf-table__highlight td { background:var(--etf-acl);font-weight:600; }

/* Ecosystem */
.zsr-etf-calculator .etf-ecosystem { max-width:980px;margin:0 auto;padding:1.5rem;background:var(--etf-surf2);border:1px solid var(--etf-border);border-radius:var(--etf-r-xl); }
.zsr-etf-calculator .etf-ecosystem__title { font-family:var(--etf-font-disp);font-size:clamp(1.1rem,2.5vw,1.375rem);font-weight:700;color:var(--etf-text);margin:0 0 .25rem; }
.zsr-etf-calculator .etf-ecosystem__lead { font-size:.875rem;color:var(--etf-muted);margin:0 0 1.125rem;font-family:inherit; }
.zsr-etf-calculator .etf-ecosystem-grid { display:grid !important;grid-template-columns:repeat(3,1fr);gap:10px; }
@media (max-width:700px) { .zsr-etf-calculator .etf-ecosystem-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .zsr-etf-calculator .etf-ecosystem-grid { grid-template-columns:1fr; } }
.zsr-etf-calculator .etf-ecosystem-card { display:flex !important;flex-direction:column;gap:4px;padding:.875rem 1rem;background:var(--etf-surface);border:1px solid var(--etf-border);border-radius:var(--etf-r-lg);text-decoration:none;transition:border-color var(--etf-tr),transform .15s; }
.zsr-etf-calculator .etf-ecosystem-card:hover { border-color:var(--etf-accent);transform:translateY(-2px);text-decoration:none; }
.zsr-etf-calculator .etf-ecosystem-card__label { font-size:.9375rem;font-weight:600;color:var(--etf-text);font-family:inherit;display:block !important; }
.zsr-etf-calculator .etf-ecosystem-card:hover .etf-ecosystem-card__label { color:var(--etf-accent); }
.zsr-etf-calculator .etf-ecosystem-card__desc { font-size:.8125rem;color:var(--etf-muted);line-height:1.45;font-family:inherit;display:block !important; }

/* Official sources */
.zsr-etf-calculator .etf-quellen-list { list-style:none !important;padding:0;margin:.75rem 0 0;display:grid !important;grid-template-columns:repeat(3,1fr);gap:10px; }
@media (max-width:680px) { .zsr-etf-calculator .etf-quellen-list { grid-template-columns:1fr; } }
.zsr-etf-calculator .etf-quellen-item { display:flex !important;flex-direction:column;gap:3px;padding:.625rem .75rem;border:1px solid var(--etf-border);border-radius:var(--etf-r);background:var(--etf-surf2); }
.zsr-etf-calculator .etf-quellen-link { font-size:.9375rem;font-weight:600;color:var(--etf-accent);text-decoration:none;font-family:inherit; }
.zsr-etf-calculator .etf-quellen-link:hover { text-decoration:underline; }
.zsr-etf-calculator .etf-quellen-desc { font-size:.8125rem;color:var(--etf-muted);font-family:inherit;display:block !important; }

/* FAQ */
.zsr-etf-calculator .etf-faq { border:1px solid var(--etf-border);border-radius:var(--etf-r-lg);overflow:hidden; }
.zsr-etf-calculator .etf-faq__item { border-bottom:1px solid var(--etf-border); }
.zsr-etf-calculator .etf-faq__item:last-child { border-bottom:none; }
.zsr-etf-calculator .etf-faq__q { list-style:none;padding:.875rem 1.125rem;cursor:pointer;font-size:.9375rem;font-weight:600;color:var(--etf-text);display:flex !important;justify-content:space-between;align-items:center;background:var(--etf-surface);font-family:inherit;user-select:none;transition:background var(--etf-tr); }
.zsr-etf-calculator .etf-faq__q::-webkit-details-marker { display:none; }
.zsr-etf-calculator .etf-faq__q::after { content:'+';font-size:1.25rem;font-weight:300;color:var(--etf-muted);flex-shrink:0; }
.zsr-etf-calculator .etf-faq__item[open] .etf-faq__q { background:var(--etf-surf2); }
.zsr-etf-calculator .etf-faq__item[open] .etf-faq__q::after { content:'\2013'; }
.zsr-etf-calculator .etf-faq__a { padding:.75rem 1.125rem 1rem;background:var(--etf-surf2); }
.zsr-etf-calculator .etf-faq__a p { font-size:.9rem;margin:0; }

/* Disclaimer */
.zsr-etf-calculator .etf-disclaimer { border-top:1px solid var(--etf-border);padding-top:1.5rem; }
.zsr-etf-calculator .etf-disclaimer p { font-size:.8125rem;color:var(--etf-hint);line-height:1.65; }

/* CTA button (ecosystem pattern) */
/* ── zsr-tool-cta: GP-safe pill button ───────────────────────── */
.zsr-etf-calculator a.zsr-tool-cta,
.zsr-etf-calculator a.zsr-tool-cta:visited {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: fit-content;
  padding: 0.75rem 1.375rem;
  border-radius: 999px;
  border: 1.5px solid #1d4ed8;
  background: transparent;
  color: #1d4ed8 !important;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.zsr-etf-calculator a.zsr-tool-cta:hover {
  background: #eff6ff;
  color: #1e40af !important;
  border-color: #1e40af;
  text-decoration: none !important;
}
.zsr-etf-calculator a.zsr-tool-cta:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 3px;
}
@media (max-width: 480px) {
  .zsr-etf-calculator a.zsr-tool-cta {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
}
/* ── CTA row wrapper ─────────────────────────────────────────── */
.zsr-etf-calculator .etf-cta-row {
  margin-top: 1rem;
  margin-bottom: 0;
  display: flex;
  align-items: center;
}
/* ── Quellen desc as <p> ─────────────────────────────────────── */
.zsr-etf-calculator .etf-quellen-item p.etf-quellen-desc {
  display: block !important;
  font-size: 0.8125rem !important;
  color: #64748b !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* SR-only */
.zsr-etf-calculator .etf-sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* GP compat */
.zsr-etf-calculator table { border-collapse:collapse;width:100%;margin:0; }
.zsr-etf-calculator table th,.zsr-etf-calculator table td { text-align:left;vertical-align:top;border:none; }
.zsr-etf-calculator svg { display:inline-block !important;vertical-align:middle;overflow:visible; }
.zsr-etf-calculator .etf-ecosystem-card,.zsr-etf-calculator .etf-ecosystem-card:visited { text-decoration:none; }

/* ── V1.0.1 polish ───────────────────────────────────────────── */

/* Kostenwirkung note */
.zsr-etf-calculator .etf-kostenwirkung-note {
  font-size: .75rem !important;
  color: var(--etf-hint) !important;
  font-style: italic;
  margin: .625rem 0 0 !important;
  font-family: inherit;
  line-height: 1.5;
}

/* Mobile metric cards — ensure readable at 375px */
@media (max-width: 480px) {
  .zsr-etf-calculator .etf-metric-cards { grid-template-columns: 1fr !important; }
  .zsr-etf-calculator .etf-metric-card__val { font-size: 1rem; }
}

/* Mobile bar rows — label above bar, val below bar */
@media (max-width: 560px) {
  .zsr-etf-calculator .etf-bar-row { display: flex !important; flex-direction: column; align-items: flex-start; gap: 3px; }
  .zsr-etf-calculator .etf-bar-row__label { font-weight: 600; }
  .zsr-etf-calculator .etf-bar-track { width: 100%; }
  .zsr-etf-calculator .etf-bar-row__val { font-size: .75rem; text-align: left; }
}

/* Prevent any horizontal overflow on small screens */
.zsr-etf-calculator .etf-layout,
.zsr-etf-calculator .etf-card,
.zsr-etf-calculator .etf-bars { max-width: 100%; overflow-x: hidden; }