/* ---------- Trends view ---------- */
  .trends-intro{
    max-width:820px;
    margin-bottom:26px;
  }
  .trends-intro h2{
    font-size:var(--text-24);
    margin:0 0 10px;
  }
  .trends-intro p{
    font-size:var(--text-17);
    color:var(--text-muted);
    margin:0;
  }
  .trend-note{
    font-size:var(--text-15);
    color:var(--text-muted);
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid var(--border);
  }
  .trend-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
    gap:22px;
  }
  .trend-card h3{
    font-size:var(--text-md);
    font-weight:700;
    color:var(--accent-dark);
    margin:0 0 16px;
    text-transform:capitalize;
  }
  .trend-card-pending{
    padding:16px 20px;
    box-shadow:none;
  }
  .trend-card-pending h3{
    margin-bottom:8px;
  }
  .trend-card-pending .trend-row{
    padding:5px 0;
  }
  .trend-card-pending .trend-note{
    margin-top:6px;
    padding-top:6px;
  }
  .trend-visual{
    margin-bottom:14px;
    padding:12px;
    border-radius:var(--radius);
    background:var(--accent-bg);
  }
  .trend-visual svg{
    display:block;
    width:100%;
    height:140px;
  }
  .trend-visual path{
    fill:none;
    stroke:var(--accent);
    stroke-width:6;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .trend-visual circle{
    fill:var(--accent-dark);
    stroke:var(--surface);
    stroke-width:3;
  }
  .trend-direction{ display:block; font-size:var(--text-md); font-weight:700; }
  .trend-direction.up{ color:var(--green); }
  .trend-direction.down{ color:var(--red); }
  .trend-row{
    display:flex;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;
    font-size:var(--text-sm);
    padding:8px 0;
    border-top:1px solid var(--border);
  }
  /* Ohne nowrap bricht "2026-08" bei engem Platz (lange Beträge wie
     "Ø € 12,38 (20×)  +10.95" daneben) mitten am Bindestrich um, da
     Browser dort standardmäßig einen Umbruchpunkt erlauben. gap sorgt
     dafür, dass Datum und Beträge nie ohne Abstand aneinanderstoßen, wenn
     space-between keinen Platz mehr verteilen kann - notfalls bricht
     .figures als Ganzes in eine zweite Zeile um, statt mitten im Datum. */
  .trend-row .m{ font-weight:700; font-family:var(--font-mono); white-space:nowrap; flex-shrink:0; }
  .trend-row .figures{ font-family:var(--font-mono); white-space:nowrap; }
  .trend-row .delta.up{ color:var(--green); font-weight:700; }
  .trend-row .delta.down{ color:var(--red); font-weight:700; }

  .scroll-thin::-webkit-scrollbar{ width:10px; }
  .scroll-thin::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:var(--radius-sm); }