/* Elas Depot – Styles
   Ausgelagert aus index.html zur besseren Wartbarkeit.
   Keine funktionalen Änderungen.
*/

:root {
      color-scheme: dark;
      /* Warmes Dunkel (kein Navy) + Champagner */
      --bg: #0a0908;
      --bg-card: #1a1815;
      --bg-elevated: #24211d;
      --border: #3f3a34;
      --text: #f2ede6;
      --text-muted: #a39e96;
      --accent: #c4a574;
      --accent-soft: rgba(196, 165, 116, 0.14);
      --accent-muted: rgba(196, 165, 116, 0.24);
      --accent-line: rgba(196, 165, 116, 0.38);
      /* Neutrales warmes Silber/Taupe */
      --silver: #b8b0a5;
      --silver-soft: rgba(184, 176, 165, 0.12);
      --silver-muted: rgba(184, 176, 165, 0.22);
      --silver-line: rgba(184, 176, 165, 0.35);
      --green: #3dd68c;
      --green-soft: rgba(61, 214, 140, 0.18);
      --green-muted: rgba(61, 214, 140, 0.28);
      --green-line: rgba(61, 214, 140, 0.4);
      /* Korallenrot – lesbar auf dunklem Grund */
      --red: #ffc4bc;
      --red-soft: rgba(255, 196, 188, 0.2);
      --red-muted: rgba(255, 139, 122, 0.3);
      --pos: var(--green);
      --neg: var(--red);
      /* Petrol – Zweitakzent (Cashflow, Live, positiv G/V, Heute)
         Skala: 900 dunkel → 100 hell | soft/line/glow für Flächen & Ränder */
      --petrol-900: #0f3d38;
      --petrol-800: #1a5c54;
      --petrol-700: #217a6f;
      --petrol-600: #2a9d8f;   /* Basis / Balken */
      --petrol-500: #3dbeb0;
      --petrol-400: #5eead4;   /* Text auf Dunkel */
      --petrol-300: #7dd3c0;   /* Verlauf hell */
      --petrol-200: #99f6e4;   /* Hover */
      --petrol-100: #ccfbf1;
      --petrol: var(--petrol-600);
      --petrol-bright: var(--petrol-400);
      --petrol-soft: rgba(42, 157, 143, 0.14);
      --petrol-muted: rgba(42, 157, 143, 0.22);
      --petrol-line: rgba(42, 157, 143, 0.42);
      --petrol-glow: rgba(42, 157, 143, 0.12);
      --petrol-bar: linear-gradient(180deg, var(--petrol-300) 0%, var(--petrol-600) 100%);
      --petrol-bar-gap: linear-gradient(180deg, rgba(100, 116, 139, 0.4) 0%, rgba(71, 85, 105, 0.55) 100%);
      --red: #ffc4bc;
      --red-soft: rgba(239, 68, 68, 0.2);
      --amber: #c4a574;
      --radius: 12px;
      --shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
      /* Typografie */
      --font-sans: 'Inter', system-ui, sans-serif;
      --font-mono: 'JetBrains Mono', ui-monospace, monospace;
      --text-xs: 0.72rem;
      --text-sm: 0.8rem;
      --text-base: 0.875rem;
      --leading: 1.5;
      --tracking-label: 0.04em;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html {
      scroll-behavior: smooth;
      scroll-padding-top: 88px; /* Sticky-Nav + Luft */
    }
    .section {
      scroll-margin-top: 88px;
    }
    body {
      font-family: var(--font-sans);
      font-size: var(--text-base);
      color: var(--text);
      line-height: var(--leading);
      min-height: 100vh;
      position: relative;
      overflow-x: hidden;
      /* Wärmerer Grund mit mehr Struktur – Geldscheine bleiben sichtbar */
      background-color: #0c0b0a;
      background-image:
        radial-gradient(
          ellipse 70% 50% at 12% -5%,
          rgba(196, 165, 116, 0.14) 0%,
          transparent 58%
        ),
        radial-gradient(
          ellipse 55% 45% at 92% 85%,
          rgba(196, 165, 116, 0.07) 0%,
          transparent 52%
        ),
        radial-gradient(
          ellipse 40% 35% at 50% 40%,
          rgba(40, 36, 30, 0.5) 0%,
          transparent 70%
        ),
        linear-gradient(
          160deg,
          #1a1714 0%,
          #12100e 40%,
          #0e0c0b 72%,
          #0a0908 100%
        );
      background-attachment: fixed;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    body::before,
    body::after {
      display: none !important;
      content: none !important;
    }
    nav, main, .toast {
      position: relative;
      z-index: 1;
    }
    nav {
      background: rgba(12, 11, 10, 0.72) !important;
      border-bottom-color: rgba(196, 165, 116, 0.14) !important;
    }

    nav {
      position: sticky; top: 0; z-index: 100;
      background: rgba(12, 11, 10, 0.72);
      backdrop-filter: blur(18px) saturate(1.25);
      -webkit-backdrop-filter: blur(18px) saturate(1.25);
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
      padding: 0 1.25rem;
    }
    .nav-inner {
      max-width: 1280px; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between; height: 58px;
      gap: 0.75rem;
    }
    .nav-links {
      flex: 1 1 auto;
      justify-content: center;
      flex-wrap: wrap;
      min-width: 0;
      display: flex; gap: 0.2rem; list-style: none;
    }
    .logo { font-weight: 750; font-size: 1.05rem; letter-spacing: -0.025em; }
    .logo { text-shadow: none; }
    .logo span { color: var(--petrol-bright); text-shadow: none; filter: none; }

    .nav-links a.nav-ico {
      font-size: 1.05rem;
      line-height: 1;
      padding: 0.45rem 0.65rem;
      font-weight: 500;
    }
    .nav-links a {
      color: rgba(232, 237, 245, 0.55); text-decoration: none; font-size: 0.85rem; font-weight: 500;
      padding: 0.45rem 0.75rem; border-radius: 8px; transition: all 0.15s;
    }
    .nav-links a:hover {
      color: #e8edf5;
      background: rgba(232, 237, 245, 0.06);
    }
    .nav-links a.active {
      color: #f1f5f9;
      background: rgba(232, 237, 245, 0.1);
      box-shadow: inset 0 0 0 1px rgba(232, 237, 245, 0.22);
      font-weight: 600;
    }


    .portfolio-tabs {
      display: flex;
      gap: 0.35rem;
      margin-top: 0.55rem;
      flex-wrap: wrap;
    }
    .portfolio-tab {
      font-family: inherit;
      font-size: 0.82rem;
      font-weight: 600;
      padding: 0.35rem 0.85rem;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      transition: background .15s, color .15s, border-color .15s;
    }
    .portfolio-tab:hover {
      color: var(--text);
      border-color: var(--accent);
    }
    .portfolio-tab.is-active {
      background: var(--accent);
      border-color: var(--accent);
      color: #1a1815;
    }
    .portfolio-panel {
      width: 100%;
      min-width: 0;
    }
    /* is-off / hidden immer unsichtbar – unabhängig von Kind-Regeln (.div-desktop etc.) */
    .portfolio-panel.is-off,
    .portfolio-panel[hidden] {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      overflow: hidden !important;
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
    }
    .portfolio-panel.is-on:not([hidden]) {
      display: block !important;
      visibility: visible !important;
      height: auto !important;
      overflow: visible !important;
      width: 100%;
      min-width: 0;
    }
    /* Desktop: Tabellen im aktiven Panel sichtbar */
    @media (min-width: 901px) {
      #panelDivZahlungen.is-on .div-desktop,
      #panelDivMatrix.is-on .div-desktop,
      #panelDivMatrix.is-on #divMatrixTableWrap {
        display: block !important;
        width: 100%;
        max-width: 100%;
        visibility: visible !important;
        opacity: 1 !important;
      }
      #panelDivMatrix.is-on #divMatrixTableWrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      #panelDivMatrix.is-on table.div-month-matrix {
        width: max-content !important;
        min-width: 56rem !important;
        max-width: none !important;
        table-layout: auto !important;
        border-collapse: separate;
        border-spacing: 0;
      }
      #panelDivMatrix.is-on table.div-month-matrix th.mm-name,
      #panelDivMatrix.is-on table.div-month-matrix td.mm-name {
        width: 10rem !important;
        min-width: 10rem !important;
        max-width: 12rem !important;
        text-align: left !important;
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--bg-card);
      }
      #panelDivMatrix.is-on table.div-month-matrix thead th:not(.mm-name):not(.mm-freq-h):not(.mm-freq):not(.mm-sum):not(.mm-act),
      #panelDivMatrix.is-on table.div-month-matrix tbody td.mm-pay,
      #panelDivMatrix.is-on table.div-month-matrix tbody td.mm-empty {
        min-width: 2.6rem !important;
        width: 2.6rem !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
      }
      #panelDivMatrix.is-on table.div-month-matrix th.mm-sum,
      #panelDivMatrix.is-on table.div-month-matrix td.mm-sum.mm-freq {
        min-width: 5.5rem !important;
      }
    }
    /* Mobile: Desktop-Tabellen aus, Karten an */
    @media (max-width: 900px) {
      /* Zahlungen: Karten statt Desktop-Tabelle */
      #panelDivZahlungen.is-on .div-desktop {
        display: none !important;
      }
      #panelDivZahlungen.is-on #divMobile {
        display: flex !important;
        flex-direction: column;
        gap: 0.65rem;
        width: 100%;
      }
      /* Matrix: auf Mobil ausblenden (nur Desktop) */
      #panelDivMatrix.is-on #divMatrixTableWrap,
      #panelDivMatrix.is-on .div-desktop,
      #panelDivMatrix.is-on table.div-month-matrix {
        display: none !important;
      }
      #panelDivMatrix.is-on #matrixMobileHint {
        display: block !important;
        margin: 0.75rem 0 0;
        padding: 0.85rem 1rem;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--bg-elevated);
        color: var(--text-muted);
        font-size: 0.85rem;
        line-height: 1.45;
      }
      /* Allokation: Donuts untereinander statt 3 Spalten */
      #panelAllokation.is-on .sector-grid,
      #panelAllokation.is-on .sector-grid-pies,
      #panelAllokation.is-on .sector-grid-info {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
      }
      #panelAllokation.is-on .sector-card,
      #panelAllokation.is-on .sector-card-pie {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
      }
      #panelAllokation.is-on .sector-card-pie .pie-wrap {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      #panelAllokation.is-on .sector-card-pie .pie-wrap canvas {
        max-width: min(220px, 70vw) !important;
        width: min(220px, 70vw) !important;
        height: auto !important;
      }
      /* Filter-Leisten nicht ausbrechen */
      #panelDivZahlungen .portfolio-toolbar,
      #panelAllokation .portfolio-toolbar,
      .portfolio-toolbar {
        max-width: 100%;
        box-sizing: border-box;
      }
      /* Horizontales Overflow der Seite vermeiden */
      #portfolio, #dividenden, #panelAllokation, #panelDivZahlungen, #panelDivMatrix {
        max-width: 100%;
        overflow-x: hidden;
      }
    }
    #panelDivMatrix .div-year-tabs {
      margin-bottom: 0.75rem;
    }

    /* Matrix: stabile Spalten (Desktop) */
    #divMatrixTableWrap {
      overflow-x: auto;
      max-width: 100%;
      width: 100%;
    }
    #divMonthMatrix,
    table.div-month-matrix {
      table-layout: fixed;
      width: 100%;
      min-width: 640px;
      max-width: 100%;
      border-collapse: collapse;
    }
    table.div-month-matrix th,
    table.div-month-matrix td {
      box-sizing: border-box;
      vertical-align: middle;
    }
    table.div-month-matrix th.mm-name,
    table.div-month-matrix td.mm-name {
      width: 11rem;
      min-width: 11rem;
      text-align: left;
      position: sticky;
      left: 0;
      z-index: 2;
      background: var(--bg-card);
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }
    /* 12 Monatsspalten gleich breit, zentriert */
    table.div-month-matrix thead th:not(.mm-name):not(.mm-freq-h):not(.mm-freq):not(.mm-sum):not(.mm-act),
    table.div-month-matrix tbody td.mm-pay,
    table.div-month-matrix tbody td.mm-empty,
    table.div-month-matrix tr.mm-cash td:not(.mm-name):not(.mm-freq-h):not(.mm-freq):not(.mm-sum):not(.mm-act) {
      width: calc((100% - 11rem - 5.5rem - 2rem) / 12);
      min-width: 2.2rem;
      text-align: center !important;
      padding-left: 0.15rem !important;
      padding-right: 0.15rem !important;
    }
    table.div-month-matrix th.mm-sum,
    table.div-month-matrix td.mm-sum {
      width: 5.5rem;
      min-width: 5.5rem;
      text-align: center;
    }
    table.div-month-matrix th.mm-act,
    table.div-month-matrix td.mm-act {
      width: 2rem;
      min-width: 2rem;
      padding: 0;
    }
    table.div-month-matrix td.mm-pay .mm-dot {
      display: inline-block;
      margin: 0 auto;
    }

    /* ===== Matrix: visuelle Aufwertung ===== */
    table.div-month-matrix td.mm-empty {
      background: transparent !important;
    }
    table.div-month-matrix td.mm-pay {
      transition: background 0.15s ease;
    }
    table.div-month-matrix td.mm-pay .mm-dot {
      border-radius: 50%;
      vertical-align: middle;
      min-width: 6px;
      min-height: 6px;
    }
    table.div-month-matrix th.mm-cur-month {
      color: var(--accent, #d4af7a);
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-color: rgba(212, 175, 122, 0.7);
    }
    table.div-month-matrix td.mm-cur-month {
      /* absichtlich keine Zellen-Hervorhebung */
    }
    table.div-month-matrix th.mm-q-end,
    table.div-month-matrix td.mm-q-end {
      border-right: 1px solid rgba(148, 163, 184, 0.28) !important;
    }
    table.div-month-matrix .mm-row-sum {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      margin-bottom: 0.2rem;
      min-width: 3.8rem;
    }
    table.div-month-matrix .mm-row-sum-val {
      font-size: 0.68rem;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      font-family: 'JetBrains Mono', monospace;
      color: var(--text);
      white-space: nowrap;
    }
    table.div-month-matrix .mm-row-sum-track {
      height: 3px;
      border-radius: 2px;
      background: rgba(148, 163, 184, 0.12);
      overflow: hidden;
      max-width: 4.2rem;
    }
    table.div-month-matrix .mm-row-sum-fill {
      height: 100%;
      border-radius: 3px;
      opacity: 0.85;
      min-width: 0;
    }
    table.div-month-matrix td.mm-sum.mm-freq {
      vertical-align: middle;
      padding-top: 0.35rem;
      padding-bottom: 0.35rem;
    }
    .matrix-heatmap-toggle {
      margin-left: 0.25rem;
      cursor: pointer;
      user-select: none;
    }
    .matrix-heatmap-toggle input {
      accent-color: var(--accent, #d4af7a);
      margin-right: 0.25rem;
    }
    /* Heatmap: leere Zellen bleiben ruhig */
    table.div-month-matrix.mm-heat-on td.mm-empty {
      background: rgba(15, 23, 42, 0.25) !important;
    }

    table.div-month-matrix .mm-freq-select {
      width: 100%;
      max-width: 5rem;
      font-size: 0.72rem;
      padding: 0.2rem 0.25rem;
    }
    #matrixMobileHint { display: none; }

    .portfolio-toolbar {
      display: flex; flex-wrap: wrap; gap: 0.55rem 0.85rem; align-items: center;
      margin: 0 0 0.85rem; padding: 0.65rem 0.85rem;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }
    .portfolio-toolbar label {
      font-size: 0.72rem; color: var(--text-muted); font-weight: 650;
      display: inline-flex; align-items: center; gap: 0.4rem;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }
    .portfolio-toolbar select, .portfolio-toolbar .toolbar-btn {
      background: var(--bg-card);
      border: 1px solid var(--border);
      color: var(--text);
      border-radius: 8px;
      padding: 0.38rem 0.55rem;
      font-size: 0.8rem;
      font-family: var(--font-sans);
      min-height: 2.15rem;
      cursor: pointer;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .portfolio-toolbar select:hover,
    .portfolio-toolbar .toolbar-btn:hover {
      border-color: rgba(196, 165, 116, 0.45);
    }
    .portfolio-toolbar select:focus,
    .portfolio-toolbar .toolbar-btn:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(196, 165, 116, 0.18);
    }
    .portfolio-toolbar .toolbar-hint {
      font-size: 0.75rem;
      color: var(--text-muted);
      font-weight: 500;
      text-transform: none;
      letter-spacing: 0;
    }
    .portfolio-toolbar .btn-filter-clear {
      margin-left: auto;
      font-size: 0.72rem;
      padding: 0.35rem 0.65rem;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
    }
    .portfolio-toolbar .btn-filter-clear:hover {
      border-color: var(--accent);
      color: var(--accent);
    }
    .portfolio-toolbar .toolbar-checks {
      display: inline-flex; flex-wrap: wrap; gap: 0.55rem 0.85rem; align-items: center;
    }
    /* Sticky Aktie-Spalte im Dividendenkalender */
    #divTableWrap table.div-table th:first-child,
    #divTableWrap table.div-table td:first-child,
    #divTableWrap table.div-table th:first-child {
      position: relative;
      left: auto;
      z-index: auto;
      background: transparent;
      box-shadow: none;
    }
    #divTableWrap table.div-table thead th:first-child {
      z-index: 3;
      background: var(--bg-elevated);
    }
    #divTableWrap table.div-table tfoot td:first-child {
      z-index: 2;
      background: rgba(15, 22, 35, 0.95);
    }
    #divTableWrap table.div-table th.div-month-click {
      cursor: pointer;
    }
    #divTableWrap table.div-table th.div-month-click:hover {
      color: var(--accent);
    }
    #portfolioTable thead th.sortable,
    .div-table thead th.sortable {
      cursor: pointer; user-select: none; white-space: nowrap;
    }
    #portfolioTable thead th.sortable:hover,
    .div-table thead th.sortable:hover { color: var(--accent); }
    #portfolioTable thead th.sortable .sort-ind,
    .div-table thead th.sortable .sort-ind {
      font-size: 0.65rem; opacity: 0.45; margin-left: 0.2rem;
    }
    #portfolioTable thead th.sortable.sort-asc .sort-ind,
    #portfolioTable thead th.sortable.sort-desc .sort-ind,
    .div-table thead th.sortable.sort-asc .sort-ind,
    .div-table thead th.sortable.sort-desc .sort-ind { opacity: 1; color: var(--accent); }
    #portfolioTable.col-hide-ticker th.col-ticker,
    #portfolioTable.col-hide-ticker td.col-ticker,
    #portfolioTable.col-hide-isin th.col-isin,
    #portfolioTable.col-hide-isin td.col-isin,
    #portfolioTable.col-hide-kaufdatum th.col-kaufdatum,
    #portfolioTable.col-hide-kaufdatum td.col-kaufdatum { display: none; }
    .nav-actions { display: flex; gap: 0.45rem; align-items: center; flex-shrink: 0; }

    .nav-dd-panel-keys {
      min-width: 16rem;
      max-width: min(20rem, calc(100vw - 1.5rem));
      padding-bottom: 0.5rem;
    }
    .api-key-status {
      font-size: 0.75rem;
      line-height: 1.45;
      padding: 0.25rem 0.65rem 0.35rem;
      color: var(--text-muted);
      font-family: var(--font-mono), ui-monospace, monospace;
    }
    .api-key-status .ok { color: var(--green, #4ade80); }
    .api-key-status .no { color: var(--text-muted); opacity: 0.75; }

    .dd-key-row {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      padding: 0.25rem 0.65rem 0.45rem;
    }
    .dd-key-row label {
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    
    input.cell.cell-warn, .cell-warn {
      border-color: rgba(248, 113, 113, 0.55) !important;
      background: rgba(248, 113, 113, 0.08);
    }
    .ticker-missing {
      color: var(--red, #f87171);
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      font-size: 0.7rem;
    }

    .nav-dd-panel .api-key-input {
      width: 100%;
      min-width: 0;
      max-width: none;
      box-sizing: border-box;
    }

    .nav-burger {
      display: none;
      width: 2.25rem; height: 2.25rem; padding: 0;
      border-radius: 8px; border: 1px solid var(--border);
      background: var(--bg-elevated); color: var(--text); cursor: pointer;
      align-items: center; justify-content: center; flex-direction: column; gap: 4px;
    }
    .nav-burger span {
      display: block; width: 1.05rem; height: 2px; background: var(--text);
      border-radius: 1px; transition: transform 0.2s, opacity 0.2s;
    }
    .nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .nav-burger.open span:nth-child(2) { opacity: 0; }
    .nav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    .nav-dd-toggle .dd-full { display: inline; }
    .nav-dd-toggle .dd-short { display: none; }
    .btn {
      font-family: inherit; font-size: 0.8rem; font-weight: 600;
      padding: 0.45rem 0.9rem; border-radius: 8px; border: 1px solid var(--border);
      background: var(--bg-elevated); color: var(--text); cursor: pointer; transition: all 0.15s;
    }
    .btn:hover {
      border-color: var(--accent-muted);
      background: var(--bg-card);
      color: var(--text);
      box-shadow: none;
    }
    .btn-primary {
      background: rgba(196, 165, 116, 0.14);
      border-color: var(--accent);
      color: #e8d5b5;
    }
    .btn-primary:hover {
      filter: none;
      background: rgba(196, 165, 116, 0.22);
      border-color: #d4b896;
      color: #f0e6d4;
    }
    .btn-danger { color: var(--red); }
    .btn-danger:hover { background: var(--red-soft); border-color: var(--red); }
    .btn-sm { padding: 0.3rem 0.6rem; font-size: 0.75rem; }
    .auto-price-toggle {
      display: inline-flex; align-items: center; gap: 0.35rem;
      font-size: 0.78rem; font-weight: 600; color: var(--text-muted);
      cursor: pointer; user-select: none; padding: 0.3rem 0.55rem;
      border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elevated);
    }
    .auto-price-toggle:has(input:checked) {
      color: var(--green); border-color: rgba(34,197,94,0.4); background: var(--green-soft);
    }
    .auto-price-toggle input { accent-color: var(--green); cursor: pointer; }
    .auto-price-select {
      font-family: inherit; font-size: 0.75rem; font-weight: 600;
      padding: 0.3rem 0.45rem; border-radius: 8px; border: 1px solid var(--border);
      background: var(--bg-elevated); color: var(--text); cursor: pointer;
    }
    .api-key-input {
      font-family: 'JetBrains Mono', monospace; font-size: 0.72rem;
      padding: 0.3rem 0.45rem; border-radius: 8px; border: 1px solid var(--border);
      background: var(--bg-elevated); color: var(--text); width: 4.5rem; max-width: 20vw;
      outline: none; transition: border-color 0.15s, width 0.2s;
    }
    .api-key-input:focus { border-color: var(--accent); width: 9rem; }
    .api-key-input::placeholder { color: var(--text-muted); font-family: 'Inter', sans-serif; }
    #btnPrices.loading { opacity: 0.7; pointer-events: none; }
    .kurs-meta {
      display: block;
      font-size: 0.62rem;
      color: var(--text-muted);
      font-weight: 500;
      margin-top: 0.12rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 9rem;
      font-family: 'Inter', system-ui, sans-serif;
      letter-spacing: 0.01em;
    }
    .kurs-cell-wrap { min-width: 0; }

    /* Dropdown-Menüs in der Nav */
    .nav-dd {
      position: relative;
    }
    .nav-dd-toggle {
      font-family: inherit; font-size: 0.78rem; font-weight: 600;
      padding: 0.35rem 0.65rem; border-radius: 8px; border: 1px solid var(--border);
      background: var(--bg-elevated); color: var(--text); cursor: pointer;
      display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
    }
    .nav-dd-toggle:hover, .nav-dd.open .nav-dd-toggle {
      border-color: var(--accent); background: var(--accent-soft);
    }
    .nav-dd-toggle .caret {
      font-size: 0.65rem; opacity: 0.75; transition: transform 0.15s;
    }
    .nav-dd.open .nav-dd-toggle .caret { transform: rotate(180deg); }
    .nav-dd-panel {
      display: none;
      position: absolute; top: calc(100% + 6px); right: 0;
      min-width: 11.5rem; z-index: 200;
      background: var(--bg-card);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: 1px solid var(--border);
      border-radius: 10px; padding: 0.45rem;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    }
    .nav-dd.open .nav-dd-panel { display: block; }
    .nav-dd-panel .dd-item {
      display: flex; align-items: center; gap: 0.5rem;
      width: 100%; text-align: left;
      font-family: inherit; font-size: 0.8rem; font-weight: 600;
      padding: 0.45rem 0.6rem; border-radius: 7px; border: none;
      background: transparent; color: var(--text); cursor: pointer;
    }
    .nav-dd-panel .dd-item:hover { background: var(--bg-elevated); }
    .nav-dd-panel .dd-item.primary {
      color: #e8d5b5; background: rgba(196, 165, 116, 0.16);
    }
    .nav-dd-panel .dd-item.primary:hover { filter: brightness(1.08); }
    .nav-dd-panel .dd-row {
      display: flex; align-items: center; gap: 0.45rem;
      padding: 0.4rem 0.5rem; border-radius: 7px;
    }
    .nav-dd-panel .dd-row:hover { background: var(--bg-elevated); }
    .nav-dd-panel .dd-label {
      font-size: 0.72rem; color: var(--text-muted); padding: 0.25rem 0.5rem 0.15rem;
      text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
    }
    .nav-dd-panel .dd-sep {
      height: 1px; background: var(--border); margin: 0.35rem 0.25rem;
    }
    .nav-dd-panel .auto-price-toggle {
      border: none; background: transparent; padding: 0; flex: 1;
    }
    .nav-dd-panel .auto-price-select {
      flex: 1; min-width: 0;
    }
    .nav-dd-panel #btnPrices {
      width: 100%; justify-content: flex-start;
    }

    main { max-width: 1280px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

    .kpi-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
      margin-bottom: 2.5rem;
      align-items: stretch;
    }
    .kpi {
      background: rgba(15, 22, 35, 0.55);
      backdrop-filter: blur(16px) saturate(1.2);
      -webkit-backdrop-filter: blur(16px) saturate(1.2);
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: var(--radius);
      padding: 1.25rem 1.35rem;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
      min-height: 9.5rem;
      display: flex; flex-direction: column;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    }

    .kpi.kpi-link {
      cursor: pointer;
    }
    .kpi.kpi-link:hover {
      border-color: rgba(232, 237, 245, 0.28);
      background: rgba(22, 32, 50, 0.72);
    }
    .kpi.kpi-link:focus-visible {
      outline: 2px solid rgba(232, 237, 245, 0.35);
      outline-offset: 2px;
    }
    .kpi .label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-label); margin-bottom: 0.35rem; font-weight: 600; }
    .kpi .value { font-family: var(--font-mono); font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
    .kpi .sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; line-height: 1.35; }
    /* Sub-Bereich: einheitlich ca. 2 Zeilen */
    .kpi-body-sub {
      margin-top: auto;
      min-height: 2.6rem;
      display: flex; flex-direction: column; justify-content: flex-start; gap: 0.15rem;
    }
    .kpi.kpi-pos {
      border-color: var(--petrol-line);
      box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px var(--petrol-soft), 0 0 28px var(--petrol-glow);
    }
    .kpi.kpi-neg {
      border-color: rgba(255, 107, 107, 0.5);
      box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(255, 107, 107, 0.14), 0 0 28px rgba(255, 107, 107, 0.1);
    }
    .kpi .sub-split {
      display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.15rem;
      font-size: 0.75rem; color: var(--text-muted);
    }
    .kpi .sub-split span strong { font-weight: 600; color: var(--text); }
    .kpi-detail-list {
      margin-top: 0.65rem;
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
      flex: 1;
    }
    .kpi-detail-list .kpi-detail-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 0.75rem;
      font-size: 0.78rem;
      color: var(--text-muted);
      line-height: 1.35;
      padding-bottom: 0;
      border-bottom: none;
    }
    .kpi-detail-list .kpi-detail-row strong {
      font-weight: 600;
      color: var(--text);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.8rem;
      text-align: right;
      white-space: nowrap;
    }
    /* Helden-Kachel: Aktueller Wert (statischer Gold-Rahmen) */
    .kpi.kpi-hero {
      border-color: var(--accent-line);
      box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 0 1px var(--accent-soft);
    }
    .kpi.kpi-hero .value { color: #f0e6d0; }
    /* Positionen-Kachel: Gold-Akzent (statisch) */
    .kpi.kpi-positions {
      border-color: var(--accent-muted);
      box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 0 1px var(--accent-soft);
    }
    .kpi-sector-dots {
      display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center;
      min-height: 0.55rem;
    }
    .kpi-sector-dots .sector-dot {
      width: 0.55rem; height: 0.55rem; border-radius: 50%;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
    }
    .kpi.kpi-positions .kpi-sector-dots {
      margin-top: 0.4rem;
      margin-bottom: 0.1rem;
    }
    .kpi.kpi-positions .kpi-body-sub {
      margin-top: 0.45rem;
      min-height: 0;
    }
    /* KPI-Hover: nur Border/Glow, kein Scale/Translate */
    .kpi:hover {
      border-color: var(--accent-muted);
      box-shadow: 0 10px 32px rgba(0,0,0,0.4), 0 0 0 1px var(--accent-muted);
    }
    .kpi.kpi-hero:hover {
      border-color: var(--accent-line);
      box-shadow: 0 10px 32px rgba(0,0,0,0.4), 0 0 0 1px var(--accent-line);
    }
    .kpi.kpi-pos:hover {
      border-color: rgba(34, 197, 94, 0.55);
      box-shadow: 0 10px 36px rgba(0,0,0,0.42), 0 0 0 1px rgba(34, 197, 94, 0.16), 0 0 32px rgba(34, 197, 94, 0.12);
    }
    .kpi.kpi-neg:hover {
      border-color: rgba(255, 107, 107, 0.6);
      box-shadow: 0 10px 36px rgba(0,0,0,0.42), 0 0 0 1px rgba(255, 107, 107, 0.18), 0 0 32px rgba(255, 107, 107, 0.12);
    }
    .kpi.kpi-positions:hover {
      border-color: var(--accent-line);
      box-shadow: 0 10px 32px rgba(0,0,0,0.4), 0 0 0 1px var(--accent-muted);
    }
    .pos {
      color: #4ade80 !important; font-weight: 700;
      white-space: nowrap;
    }
    .neg {
      color: var(--red) !important; font-weight: 700;
      white-space: nowrap;
    }
    /* Portfolio-Tabelle: sticky Header, Zebra, größere G/V-Spalten */
    #portfolioTable thead th {
      position: sticky; top: 0; z-index: 2;
      background: var(--bg-elevated);
      box-shadow: 0 1px 0 var(--border);
    }
    #portfolioTableBody tr:nth-child(even) td,
    #portfolioBody tr:nth-child(even) td {
      background: rgba(148, 163, 184, 0.04);
    }
    #portfolioTableBody tr:hover td,
    #portfolioBody tr:hover td,
    #divBody tr:hover td,
    #costBody tr:hover td,
    #lossBody tr:hover td,
    .div-table tbody tr:hover td,
    table.div-month-matrix tbody tr:hover td:not(.mm-act) {
      background: var(--accent-soft) !important;
    }
    /* Kennzahl-Spalten: feste Breite, gleiche Schrift, rechtsbündig → exakt untereinander */
    #portfolioTable th.col-gv,
    #portfolioTable th.col-perf,
    #portfolioTable th.col-pa,
    #portfolioTable th.col-divy,
    #portfolioTable th.col-weight,
    #portfolioTableBody td.col-gv,
    #portfolioTableBody td.col-perf,
    #portfolioTableBody td.col-pa,
    #portfolioTableBody td.col-divy,
    #portfolioTableBody td.col-weight,
    #portfolioTable tfoot td.col-gv,
    #portfolioTable tfoot td.col-perf,
    #portfolioTable tfoot td.col-pa,
    #portfolioTable tfoot td.col-divy,
    #portfolioTable tfoot td.col-weight {
      width: 6.75rem;
      min-width: 6.75rem;
      max-width: 6.75rem;
      text-align: right !important;
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
      font-size: var(--text-sm);
      font-weight: 700;
      letter-spacing: -0.02em;
      white-space: nowrap;
      padding-left: 0.35rem;
      padding-right: 0.5rem;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #portfolioTable th.col-gv,
    #portfolioTable th.col-perf,
    #portfolioTable th.col-pa,
    #portfolioTable th.col-divy,
    #portfolioTable th.col-weight {
      font-weight: 600;
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-label);
    }
    #portfolioTable th.col-sp,
    #portfolioTableBody td.col-sp,
    #portfolioBody td.col-sp {
      text-align: center; width: 3.2rem; min-width: 3.2rem;
    }
    /* Numerische Spalten: genug Breite, rechtsbündig, kein Abschneiden */
    #portfolioTable input.cell[data-field="anteile"],
    #portfolioTable input.cell[data-field="kaufpreis"],
    #portfolioTable input.cell[data-field="gesamtpreis"],
    #portfolioTable input.cell[data-field="kurs"],
    #portfolioTable input.cell[data-field="wert"] {
      text-align: right;
      font-variant-numeric: tabular-nums;
      min-width: 100%;
      box-sizing: border-box;
    }
    /* Anteile: Champagner (auch ab >= 100), ohne Hintergrund-Markierung */
    #portfolioTable input.cell[data-field="anteile"],
    .pos-card input.cell[data-field="anteile"] {
      color: var(--accent) !important;
      font-weight: 700;
    }
    #portfolioTable input.cell[data-field="anteile"].anteile-ge100,
    .pos-card input.cell[data-field="anteile"].anteile-ge100 {
      color: var(--accent) !important;
      background: transparent !important;
      border-color: var(--accent) !important;
      box-shadow: 0 0 0 1px var(--accent-soft);
    }
    /* Kurs: Standard-Rahmen; Silber nur wenn Kurs < Kaufpreis */
    /* Kurs: wie andere Zahlenfelder — Silber-Rand NUR bei Kurs < Kaufpreis */
    #portfolioTable input.cell[data-field="kurs"],
    .pos-card input.cell[data-field="kurs"],
    #portfolioTable input.cell.kurs-cell,
    .pos-card input.cell.kurs-cell {
      border: 1px solid transparent !important;
      box-shadow: none !important;
      background: transparent !important;
      border-radius: 6px;
    }
    #portfolioTable input.cell[data-field="kurs"]:focus,
    .pos-card input.cell[data-field="kurs"]:focus {
      border-color: var(--border) !important;
    }
    #portfolioTable input.cell[data-field="kurs"].kurs-le-einstand,
    .pos-card input.cell[data-field="kurs"].kurs-le-einstand {
      border: 1px solid #a8b4c4 !important;
      box-shadow: 0 0 0 1px rgba(168, 180, 196, 0.35) !important;
      color: var(--text) !important;
      font-weight: 600;
    }
    .name-with-einstand {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      min-width: 11rem;
    }
    .pos-card-name-row {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      min-width: 0;
    }
    .kurs-cell-wrap {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.25rem 0.35rem;
    }
    .kurs-cell-wrap input.cell[data-field="kurs"] {
      flex: 1 1 auto;
      min-width: 4rem;
    }
    .kurs-cell-wrap .kurs-meta {
      flex: 1 1 100%;
    }
    .pos-card .pos-field:has(input[data-field="anteile"]) label {
      color: #c4a574;
    }
    /* Zahlen-Spalten rechtsbündig: 7 Anteile, 8 Kaufpreis … 11 Akt. Wert (SP = 2. Spalte, zentriert) */
    #portfolioTable thead th:nth-child(7),
    #portfolioTable thead th:nth-child(8),
    #portfolioTable thead th:nth-child(9),
    #portfolioTable thead th:nth-child(10),
    #portfolioTable thead th:nth-child(11),
    #portfolioTable thead th:nth-child(12),
    #portfolioTable thead th:nth-child(13),
    #portfolioTable thead th:nth-child(14),
    #portfolioTable thead th:nth-child(15),
    #portfolioTable thead th:nth-child(16) {
      text-align: right;
    }
    #portfolioTable td:nth-child(7),
    #portfolioTable td:nth-child(8),
    #portfolioTable td:nth-child(9),
    #portfolioTable td:nth-child(10),
    #portfolioTable td:nth-child(11),
    #portfolioTable td:nth-child(12),
    #portfolioTable td:nth-child(13),
    #portfolioTable td:nth-child(14),
    #portfolioTable td:nth-child(15),
    #portfolioTable td:nth-child(16) {
      text-align: right;
    }
    #portfolioTable tfoot td.tot-num {
      text-align: right;
    }
    /* 1 Aktie · 2 SP · 3 Sektor · 4 Ticker · 5 ISIN · 6 Kaufdatum · 7 Anteile · 8+ Zahlen */
    #portfolioTable th:nth-child(8),
    #portfolioTable td:nth-child(8) { min-width: 7rem; }     /* Kaufpreis */
    #portfolioTable th:nth-child(9),
    #portfolioTable td:nth-child(9) { min-width: 6.5rem; }   /* Gesamtpreis */
    #portfolioTable th:nth-child(10),
    #portfolioTable td:nth-child(10) { min-width: 7rem; }    /* Kurs */
    #portfolioTable th:nth-child(11),
    #portfolioTable td:nth-child(11) { min-width: 6.5rem; }  /* Akt. Wert */
    #portfolioTable th:nth-child(12),
    #portfolioTable td:nth-child(12) { min-width: 6.5rem; }  /* Gewinn */
    #portfolioTable th:nth-child(13),
    #portfolioTable td:nth-child(13) { min-width: 5.5rem; }  /* Perf */
    #portfolioTable th:nth-child(14),
    #portfolioTable td:nth-child(14) { min-width: 5.5rem; }  /* p.a. */
    #portfolioTable th:nth-child(15),
    #portfolioTable td:nth-child(15) { min-width: 5.5rem; }  /* Div-% */
    #portfolioTable th:nth-child(16),
    #portfolioTable td:nth-child(16) { min-width: 5rem; }    /* Gewicht */
    .sp-check {
      width: 1.05rem; height: 1.05rem; accent-color: var(--accent);
      cursor: pointer; vertical-align: middle;
    }
    .sp-badge {
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 0.62rem; font-weight: 700;
      padding: 0.08rem 0.35rem; border-radius: 4px;
      background: rgba(196, 165, 116, 0.14); color: #d4b896;
      border: 1px solid rgba(196, 165, 116, 0.3);
      line-height: 1.1; flex-shrink: 0;
    }
    /* SP-Badge-Spalte: mittig, ohne extra Zeilenhöhe */
    #portfolioTable th.col-sp-badge,
    #portfolioTable td.col-sp-badge {
      text-align: center;
      vertical-align: middle;
      width: 2.5rem;
      min-width: 2.5rem;
      max-width: 2.75rem;
      padding-left: 0.15rem;
      padding-right: 0.15rem;
    }
    #portfolioTable td.col-sp-badge .sp-badge {
      display: inline-block;
      margin: 0;
      vertical-align: middle;
      line-height: 1.15;
      padding: 0.06rem 0.28rem;
      font-size: 0.6rem;
    }
    #portfolioTable td.col-sp {
      text-align: center;
      vertical-align: middle;
    }

    .section { margin-bottom: 2.25rem; }
    .section-header {
      display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem;
      margin-bottom: 1rem;
    }
    .section-header h2 { font-size: 1.15rem; font-weight: 650; letter-spacing: -0.025em; color: var(--text); }
    .section-header .hint { font-size: 0.8rem; color: var(--text-muted); }



    /* Jahresübersicht Erträge & Kosten: gleiche Spaltenbreite (ohne Jahr) */
    table.earnings-year-table {
      width: 100%;
      min-width: 980px;
      table-layout: fixed;
      border-collapse: collapse;
      font-size: var(--text-sm);
      font-variant-numeric: tabular-nums;
    }
    table.earnings-year-table thead th {
      position: sticky; top: 0; z-index: 2;
      background: var(--bg-elevated);
      box-shadow: 0 1px 0 var(--border);
      text-align: right;
      padding: 0.65rem 0.4rem;
      font-weight: 600;
      color: var(--text-muted);
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: var(--tracking-label);
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }
    table.earnings-year-table thead th.ey-year {
      text-align: left;
    }
    table.earnings-year-table tbody tr:hover td {
      background: var(--accent-soft);
    }
    table.earnings-year-table th,
    table.earnings-year-table td {
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    table.earnings-year-table th.ey-year,
    table.earnings-year-table td.ey-year {
      width: 4.5%;
      text-align: left;
      white-space: nowrap;
      padding-left: 0.5rem;
      padding-right: 0.25rem;
      font-weight: 600;
    }
    table.earnings-year-table th.ey-num,
    table.earnings-year-table td.ey-num {
      width: 8.68%; /* (100 − 4.5) / 11 ≈ equal slots */
      text-align: right;
      vertical-align: middle;
      font-size: 0.8rem;
      white-space: nowrap;
      padding-left: 0.3rem;
      padding-right: 0.4rem;
    }
    /* Zinsen-Input soll die Zelle nicht aufblasen */
    table.earnings-year-table td.ey-num .ey-zins-wrap {
      justify-content: flex-end;
      max-width: 100%;
    }
    table.earnings-year-table td.ey-num .ey-zins-wrap input.cell {
      max-width: 5.5rem;
      width: 100%;
    }
    table.earnings-year-table td.ey-num .ey-dash {
      color: var(--text-muted);
    }
    table.earnings-year-table td.ey-num input.cell {
      width: auto;
      max-width: 100%;
      text-align: right;
      box-sizing: border-box;
    }
    /* Zinsen: Betrag + € in einer Zeile */
    table.earnings-year-table td.ey-num .ey-zins-wrap {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0.25rem;
      width: 100%;
      white-space: nowrap;
    }
    table.earnings-year-table td.ey-num .ey-zins-wrap input.cell {
      flex: 1 1 auto;
      min-width: 0;
      width: auto;
      max-width: 5.5rem;
    }
    table.earnings-year-table td.ey-num .ey-zins-wrap .ey-eur {
      flex-shrink: 0;
      color: var(--text-muted);
      font-size: 0.85rem;
    }
    table.earnings-year-table td.ey-num .ey-zins-wrap input.cell::placeholder {
      color: var(--text-muted);
      opacity: 1;
      text-align: right;
    }
    table.earnings-year-table td.ey-num .ey-zins-wrap input.cell::-webkit-input-placeholder {
      color: var(--text-muted);
      opacity: 1;
      text-align: right;
    }


    .table-wrap {
      overflow-x: auto; -webkit-overflow-scrolling: touch;
      border-radius: var(--radius); border: 1px solid var(--border);
      background: var(--bg-card);
      /* Hinweis: horizontal wischen auf dem Handy */
      background-image: linear-gradient(to right, var(--bg-card) 85%, transparent),
        linear-gradient(to right, transparent, rgba(196,165,116,0.12));
      background-position: left center, right center;
      background-repeat: no-repeat;
      background-size: 100% 100%, 2.5rem 100%;
      background-attachment: local, scroll;
    }
    table {
      width: 100%; border-collapse: collapse;
      font-size: var(--text-sm);
      font-variant-numeric: tabular-nums;
    }
    thead { background: var(--bg-elevated); }
    th {
      text-align: left; padding: 0.65rem 0.45rem; font-weight: 600; color: var(--text-muted);
      font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label);
      border-bottom: 1px solid var(--border); white-space: nowrap;
    }
    td {
      padding: 0.4rem 0.4rem; border-bottom: 1px solid var(--border); vertical-align: middle;
      font-size: var(--text-sm);
    }
    tr:last-child td { border-bottom: none; }
    tr:hover td { background: var(--accent-soft); }
    input.cell, select.cell {
      width: 100%; min-width: 0; background: transparent; border: 1px solid transparent;
      color: var(--text); font-family: var(--font-mono); font-size: var(--text-sm);
      font-variant-numeric: tabular-nums;
      padding: 0.25rem 0.3rem; border-radius: 6px; outline: none; transition: all 0.15s;
    }
    input.cell:focus, select.cell:focus {
      border-color: var(--accent); background: var(--bg-elevated);
    }
    input.cell.name, select.cell { font-family: var(--font-sans); font-variant-numeric: normal; }
    .readonly {
      color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-sm);
      font-variant-numeric: tabular-nums;
      padding: 0.25rem 0.3rem; white-space: nowrap;
    }
    .ticker { font-weight: 600; color: var(--accent); }
    .actions-cell { white-space: nowrap; width: 36px; }
    /* Portfolio-Spaltenbreiten – erste 7 klarer strukturiert */
    #portfolioTable { min-width: 1280px; }
    /* 1 Aktie · 2 SP · 3 Sektor · 4 Ticker · 5 ISIN · 6 Kaufdatum · 7 Anteile */
    #portfolioTable th:nth-child(1), #portfolioTableBody td:nth-child(1), #portfolioBody td:nth-child(1) {
      min-width: 11.5rem; max-width: 14rem;
    }
    #portfolioTable th.col-sp-badge, #portfolioTableBody td.col-sp-badge,
    #portfolioTable th:nth-child(2), #portfolioTableBody td:nth-child(2) {
      width: 2.4rem; min-width: 2.4rem; max-width: 2.6rem;
      text-align: center;
      padding-left: 0.1rem; padding-right: 0.1rem;
    }
    #portfolioTable th:nth-child(3), #portfolioTableBody td:nth-child(3), #portfolioBody td:nth-child(3) {
      min-width: 6.25rem; max-width: 7.5rem;
    }
    #portfolioTable th:nth-child(4), #portfolioTableBody td:nth-child(4), #portfolioBody td:nth-child(4),
    #portfolioTable th.col-ticker, #portfolioTableBody td.col-ticker {
      width: 6.5rem; min-width: 6.25rem; max-width: 8rem;
      font-family: var(--font-mono);
      font-size: 0.78rem;
    }
    #portfolioTable th.col-isin, #portfolioTableBody td.col-isin,
    #portfolioTable th:nth-child(5), #portfolioTableBody td:nth-child(5) {
      width: 7rem; min-width: 6.5rem; max-width: 8rem;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.01em;
    }
    #portfolioTable th.col-kaufdatum, #portfolioTableBody td.col-kaufdatum,
    #portfolioTable th:nth-child(6), #portfolioTableBody td:nth-child(6) {
      width: 6.5rem; min-width: 6.25rem; max-width: 7rem;
      white-space: nowrap;
    }
    #portfolioTable th:nth-child(7), #portfolioTableBody td:nth-child(7) {
      min-width: 6.5rem; max-width: 8rem;
      text-align: right;
    }
    #portfolioTableBody td:nth-child(11),
    #portfolioTableBody td:nth-child(12),
    #portfolioTableBody td:nth-child(13),
    #portfolioBody td:nth-child(11),
    #portfolioBody td:nth-child(12),
    #portfolioBody td:nth-child(13) { white-space: nowrap; }
    .sector-badge select.cell {
      min-width: 9.5rem !important; width: auto; max-width: 11rem;
      font-size: 0.75rem; padding: 0.1rem 0.15rem;
    }
    .sector-badge {
      max-width: none;
      padding: 0.2rem 0.5rem;
      line-height: 1.25;
      vertical-align: middle;
    }
    .branche-with-dot {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      min-width: 0;
      max-width: 100%;
    }
    .branche-with-dot .sector-dot {
      width: 0.55rem;
      height: 0.55rem;
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
    }
    .branche-with-dot select.cell {
      min-width: 9.5rem;
      max-width: 11rem;
      width: auto;
    }
    .totals-row td {
      background: rgba(196, 165, 116, 0.07);
      font-weight: 700;
      border-top: 2px solid rgba(196, 165, 116, 0.28);
      padding: 0.75rem 0.75rem;
      letter-spacing: 0.01em;
    }
    /* Summen rechtsbündig wie Spalteninhalt – Platz für € und % */
    #portfolioTable tfoot td.tot-num,
    #portfolioTable tfoot td.col-gv,
    #portfolioTable tfoot td.col-perf,
    #portfolioTable tfoot td.col-pa,
    #portfolioTable tfoot td.col-divy,
    #portfolioTable tfoot td.col-weight {
      text-align: right;
      font-family: 'JetBrains Mono', monospace;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      font-size: 0.9rem;
    }
    #portfolioTable tfoot td.col-gv,
    #portfolioTable tfoot td.col-perf,
    #portfolioTable tfoot td.col-pa,
    #portfolioTable tfoot td.col-divy {
      min-width: 6.5rem;
    }
    #portfolioTable tfoot td.col-weight { min-width: 5rem; }

    /* Verlustrechnung: Portfolio-Stil (sticky Header, Zebra, Hover) */
    #lossTable {
      width: 100%;
      min-width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      font-size: var(--text-sm);
      font-variant-numeric: tabular-nums;
    }
    #panelKapVerkauf .table-wrap {
      width: 100%;
      overflow-x: auto;
    }
    #lossTable thead th {
      position: sticky; top: 0; z-index: 2;
      background: var(--bg-elevated);
      box-shadow: 0 1px 0 var(--border);
      text-align: left;
      padding: 0.65rem 0.45rem;
      font-weight: 600;
      color: var(--text-muted);
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: var(--tracking-label);
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }
    #lossTable tbody tr:hover td {
      background: var(--accent-soft);
    }
    #lossTable tbody td .sector-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      max-width: 100%;
    }
    #lossTable input.cell[data-field="anteile"] {
      color: var(--accent) !important;
      font-weight: 700;
    }
    #lossTable th,
    #lossTable td {
      box-sizing: border-box;
      padding: 0.45rem 0.4rem;
      vertical-align: middle;
    }
    #lossTable th:nth-child(1) { width: 9%; }
    #lossTable th:nth-child(2) { width: 14%; }
    #lossTable th:nth-child(3) { width: 8%; }
    #lossTable th:nth-child(4) { width: 11%; }
    #lossTable th:nth-child(5) { width: 12%; }
    #lossTable th:nth-child(6) { width: 12%; }
    #lossTable th:nth-child(7) { width: 11%; }
    #lossTable th:nth-child(8) { width: auto; } /* Notiz füllt Rest */
    #lossTable th:nth-child(9) { width: 2.75rem; }
    #lossTable th.loss-num,
    #lossTable td.loss-num,
    #lossTable tbody td:nth-child(3),
    #lossTable tbody td:nth-child(4),
    #lossTable tbody td:nth-child(5),
    #lossTable tbody td:nth-child(6),
    #lossTable tbody td:nth-child(7) {
      text-align: right !important;
      font-variant-numeric: tabular-nums;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.78rem;
      white-space: nowrap;
    }
    #lossTable thead th.loss-num {
      font-weight: 600;
      font-size: 0.68rem;
      letter-spacing: 0.02em;
    }
    #lossTable tbody td:nth-child(3) input.cell,
    #lossTable tbody td:nth-child(4) input.cell,
    #lossTable tbody td:nth-child(5) input.cell,
    #lossTable tbody td:nth-child(6) input.cell {
      text-align: right !important;
      font-variant-numeric: tabular-nums;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.78rem;
      width: 100%;
      min-width: 0 !important;
      box-sizing: border-box;
    }
    #lossTable tfoot td.loss-num {
      text-align: right !important;
      font-weight: 700;
      font-size: 0.78rem;
    }
    #lossTable td.readonly.loss-num,
    #lossTable tbody td:nth-child(7) {
      text-align: right !important;
      padding-right: 0.4rem !important;
      padding-left: 0.4rem !important;
    }
    #lossTable .readonly,
    #lossTable tbody td:nth-child(7) {
      padding: 0.35rem 0.45rem !important;
      display: table-cell !important;
      vertical-align: middle !important;
      text-align: right !important;
      white-space: nowrap;
      width: auto;
      box-sizing: border-box;
      border-bottom: none !important;
      line-height: 1.35;
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
    }
    .note {
      font-size: 0.78rem; color: var(--text-muted); margin-top: 0.6rem;
      padding: 0.6rem 0.9rem; background: var(--bg-elevated); border-radius: 8px; border: 1px solid var(--border);
    }

    .sector-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.85rem;
      align-items: stretch;
    }
    .sector-card {
      background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
      padding: 0.9rem 0.85rem;
      display: flex;
      flex-direction: column;
      min-height: 18rem;
      height: 100%;
      box-sizing: border-box;
      min-width: 0;
    }
    .sector-card h3 {
      font-size: 0.9rem; font-weight: 600; margin-bottom: 1rem; color: var(--text-muted);
      flex-shrink: 0;
    }
    .sector-card > #sectorList,
    .sector-card > #sectorBars,
    .sector-card > #sectorDivY {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 0.35rem;
      min-height: 0;
    }
    .sector-card-pie {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      justify-content: flex-start;
    }
    .sector-card-pie h3 {
      align-self: stretch;
      text-align: left;
    }
    .sector-card-pie .pie-wrap {
      width: 100%;
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 0;
    }
    .portfolio-treemap-wrap {
      margin: 0 0 1rem;
      padding: 0;
      width: 100%;
    }
    .portfolio-treemap-wrap .treemap {
      height: 160px;
      min-height: 120px;
      width: 100%;
      border-radius: 10px;
    }
    .sector-card-pie h3 .weight-count {
      font-size: 0.72rem;
      font-weight: 500;
      color: var(--text-muted);
      text-transform: none;
      letter-spacing: 0;
      margin-left: 0.35rem;
    }
    .treemap-label {
      width: 100%;
      margin: 1rem 0 0.45rem;
      font-size: 0.72rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 600;
    }
    .treemap {
      width: 100%;
      height: 160px;
      min-height: 120px;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
    }
    .treemap-cell {
      position: absolute;
      box-sizing: border-box;
      border: 1px solid rgba(15, 23, 42, 0.22);
      padding: 0.28rem 0.4rem;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      cursor: default;
      /* leichte Aufhellung → dunkle Schrift bleibt lesbar */
      box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.22);
    }
    .treemap-cell .tm-name {
      font-size: 0.68rem;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-shadow: 0 0 2px rgba(255,255,255,0.7);
    }
    .treemap-cell .tm-pct {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      font-weight: 700;
      color: #1e293b;
      margin-top: 0.05rem;
      text-shadow: 0 0 2px rgba(255,255,255,0.65);
    }

    /* Performance-Zeilen im gleichen Stil wie Gewinn-Liste */
    .sector-bar-row {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
      margin-bottom: 0.75rem;
      padding: 0.35rem 0.15rem;
    }
    .sector-bar-row .perf-top {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.8rem;
    }
    .sector-bar-row .name {
      display: flex; align-items: center; gap: 0.4rem;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      font-weight: 500;
      min-width: 0;
      flex: 1;
    }
    .sector-bar-row .perf-vals {
      margin-left: auto;
      text-align: right;
      flex-shrink: 0;
      font-family: 'JetBrains Mono', monospace;
    }
    .sector-bar-row .pct {
      font-size: 0.78rem;
      white-space: nowrap;
      font-weight: 600;
    }
    .sector-bar-row .haltezeit {
      font-size: 0.78rem;
      color: var(--text-muted);
      white-space: nowrap;
      margin-top: 0.05rem;
    }
    .bar-bg {
      height: 10px; background: var(--bg-elevated); border-radius: 5px;
      overflow: hidden; min-width: 4rem; position: relative;
      width: 100%;
    }
    .bar-center {
      position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
      background: rgba(148, 163, 184, 0.45); transform: translateX(-50%);
    }
    .bar-fill {
      position: absolute; top: 0; height: 100%; border-radius: 5px;
    }
    .bar-fill.pos-fill {
      left: 50%; border-radius: 0 5px 5px 0;
    }
    .bar-fill.neg-fill {
      right: 50%; border-radius: 5px 0 0 5px;
    }
    .sector-dot {
      width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
      box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
    }
    .pie-wrap {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
      width: 100%;
    }
    .pie-wrap canvas {
      display: block;
      margin: 0 auto;
      max-width: min(220px, 100%);
      width: min(220px, 100%);
      height: auto !important;
      aspect-ratio: 1 / 1;
    }
    .pie-legend {
      display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: center;
      font-size: 0.78rem; color: var(--text-muted);
      width: 100%;
    }
    .pie-legend span { display: flex; align-items: center; gap: 0.35rem; }
    tr.sector-row td:first-child { border-left: 3px solid transparent; }
    .sector-badge {
      display: inline-flex; align-items: center; gap: 0.25rem;
      font-size: var(--text-xs); font-weight: 600; padding: 0.12rem 0.4rem;
      border-radius: 6px; white-space: nowrap;
    }







    
    /* INFO-Spalte Matrix (eigenständiges Panel – kein Absolut-Offset mehr) */
    #divMatrixTableWrap table.div-month-matrix thead th.mm-sum.mm-freq-h,
    #divMatrixTableWrap table.div-month-matrix th.mm-freq-h {
      text-align: left !important;
      font-size: 0.75rem !important;
      font-weight: 600 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.04em !important;
      color: var(--text-muted) !important;
      padding: 0.45rem 0.55rem !important;
      white-space: nowrap !important;
      min-width: 5.5rem;
    }
    #divMatrixTableWrap table.div-month-matrix td.mm-sum.mm-freq {
      position: static !important;
      text-align: left !important;
      vertical-align: middle !important;
      padding: 0.25rem 0.45rem !important;
      overflow: visible !important;
      color: inherit !important;
      font-size: inherit !important;
      min-width: 5.5rem;
    }
    #divMatrixTableWrap table.div-month-matrix col.col-act,
    #divMatrixTableWrap table.div-month-matrix th.mm-act,
    #divMatrixTableWrap table.div-month-matrix td.mm-act {
      width: 0.5rem !important;
      min-width: 0.5rem !important;
      max-width: 0.5rem !important;
      padding: 0 !important;
      border: none !important;
    }
    #divMatrixTableWrap table.div-month-matrix select.mm-freq-select {
      position: static !important;
      transform: none !important;
      right: auto !important;
      top: auto !important;
      display: inline-block;
      width: 5.25rem;
      min-width: 5.25rem;
      max-width: 6rem;
      box-sizing: border-box;
      font-size: 0.72rem;
      line-height: 1.25;
      padding: 0.2rem 0.35rem;
      min-height: 1.55rem;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      color: var(--text-muted);
      border-radius: 6px;
      text-align: left;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #divMatrixTableWrap table.div-month-matrix select.mm-freq-select:hover,
    #divMatrixTableWrap table.div-month-matrix select.mm-freq-select:focus {
      border-color: var(--accent);
      color: var(--text);
      outline: none;
    }

#divMatrixTableWrap table.div-month-matrix thead th.mm-name {
      text-align: left !important;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-muted);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding-left: 0.65rem;
    }
    #divMatrixTableWrap table.div-month-matrix td.mm-name .sector-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.8rem;
      padding: 0.12rem 0.4rem;
      border-radius: 6px;
    }
    #divMatrixTableWrap table.div-month-matrix td.mm-name {
      padding-top: 0.35rem;
      padding-bottom: 0.35rem;
    }
    #divMatrixTableWrap table.div-month-matrix td.mm-empty {
      color: transparent !important;
      background: transparent !important;
    }
    #divMatrixTableWrap table.div-month-matrix .mm-bar-val {
      display: none !important;
    }
    /* Summe ist eigene Spalte */
    #divMatrixTableWrap table.div-month-matrix td.mm-sum:not(.mm-freq) {
      color: inherit;
      font-size: inherit;
    }
    #divMatrixTableWrap table.div-month-matrix .mm-row-sum-val {
      color: var(--text) !important;
      font-size: 0.72rem !important;
    }


    #divMatrixTableWrap table.div-month-matrix td.mm-name .sector-badge {
      font-size: 0.72rem !important;
      padding: 0.08rem 0.32rem !important;
      gap: 0.28rem !important;
    }
    #divMatrixTableWrap table.div-month-matrix td.mm-name .sector-badge span:last-child {
      font-size: 0.72rem !important;
      font-weight: 600;
    }
    #divMatrixTableWrap table.div-month-matrix td.mm-pay {
      text-align: center !important;
      padding-right: 0.4rem !important;
      padding-left: 0.4rem !important;
    }
    #divMatrixTableWrap table.div-month-matrix td.mm-pay .mm-dot {
      margin: 0 auto !important;
      display: inline-block !important;
    }
    #divMatrixTableWrap table.div-month-matrix tr.mm-cash td {
      vertical-align: middle !important;
    }
    #divMatrixTableWrap table.div-month-matrix tr.mm-cash td.mm-name {
      vertical-align: middle !important;
    }
    #divMatrixTableWrap table.div-month-matrix .mm-bar-wrap {
      min-height: 1.75rem !important;
      justify-content: center !important;
      align-items: center !important;
    }
    #divMatrixTableWrap table.div-month-matrix .mm-bar-track {
      height: 1.5rem !important;
      margin-left: auto;
      margin-right: auto;
    }
    #divMatrixTableWrap table.div-month-matrix tr.mm-cash td:not(.mm-name):not(.mm-freq-h):not(.mm-freq):not(.mm-sum):not(.mm-act) {
      text-align: center !important;
    }
    #divTableWrap table.div-table th.div-month-hl,
    #divTableWrap table.div-table td.div-month-hl,
    #divMatrixTableWrap table.div-month-matrix th.div-month-hl,
    #divMatrixTableWrap table.div-month-matrix td.div-month-hl {
      background: rgba(42, 157, 143, 0.1);
      box-shadow: inset 0 -2px 0 var(--petrol-line);
    }


        /* Monatsspalten Matrix: zentriert unter Monats-Köpfen */
    #divMatrixTableWrap table.div-month-matrix thead th:not(.mm-name):not(.mm-freq-h):not(.mm-freq):not(.mm-sum):not(.mm-act) {
      text-align: center !important;
      font-size: 0.75rem !important;
    }
    #divMatrixTableWrap table.div-month-matrix tbody td.mm-pay,
    #divMatrixTableWrap table.div-month-matrix tbody td.mm-empty,
    #divMatrixTableWrap table.div-month-matrix tr.mm-cash td:not(.mm-name):not(.mm-freq-h):not(.mm-freq):not(.mm-sum):not(.mm-act) {
      text-align: center !important;
    }
    #divMatrixTableWrap table.div-month-matrix td.mm-pay .mm-dot {
      display: inline-block !important;
      margin: 0 auto !important;
    }
    #divMatrixTableWrap table.div-month-matrix .mm-bar-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 1.75rem;
      padding: 0;
    }
    #divMatrixTableWrap table.div-month-matrix .mm-bar-track {
      margin: 0 auto;
      height: 1.5rem;
    }


    /* Monatsnamen rechts über den Zelleninhalten */
    #divTableWrap table.div-table thead th:not(:first-child):not(:last-child):not(:nth-last-child(2)) {
      text-align: right !important;
      padding-right: 0.55rem !important;
      padding-left: 0.2rem !important;
    }
    #divTableWrap table.div-table thead th:nth-last-child(2) {
      text-align: right !important;
      padding-right: 0.55rem !important;
    }

    /* Matrix und €-Tabelle getrennt, gleiche Außenbreite */
    #divTableWrap {
      margin-bottom: 1.75rem;
    }
    #divMatrixTableWrap {
      margin-bottom: 0.35rem;
    }
    #divMatrixTableWrap,
    #divTableWrap {
      width: 100%;
      box-sizing: border-box;
    }
    #divMatrixTableWrap table.div-month-matrix,
    #divTableWrap table.div-table {
      table-layout: fixed !important;
      width: 100% !important;
      border-collapse: collapse;
    }
    #divMatrixTableWrap table.div-month-matrix {
      overflow: visible !important;
    }
    #divMatrixTableWrap {
      overflow: visible !important;
    }

    /* Einheitliches 15-Spalten-Raster (Name + 12 Monate + Summe + Aktion) */
    #divTableWrap .div-table,
    #divMatrixTableWrap table.div-month-matrix {
      table-layout: fixed !important;
      width: 100% !important;
      border-collapse: collapse;
      font-size: var(--text-sm);
    }
    #divTableWrap .div-table thead th,
    #divMatrixTableWrap table.div-month-matrix thead th {
      text-align: center;
      font-variant-numeric: tabular-nums;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-muted);
      min-width: 0 !important;
      padding: 0.45rem 0.4rem;
      box-sizing: border-box;
    }
    #divTableWrap .div-table thead th:first-child,
    #divMatrixTableWrap table.div-month-matrix thead th:first-child,
    #divTableWrap .div-table tbody td:first-child,
    #divTableWrap .div-table tfoot td:first-child,
    #divMatrixTableWrap table.div-month-matrix td.mm-name,
    #divMatrixTableWrap table.div-month-matrix th.mm-name {
      width: 10rem !important;
      max-width: 10rem !important;
      min-width: 0 !important;
      text-align: left !important;
      padding-left: 0.65rem;
      padding-right: 0.4rem;
    }
    #divTableWrap .div-table thead th:nth-last-child(2),
    #divTableWrap .div-table tbody td:nth-last-child(2),
    #divTableWrap .div-table tfoot td:nth-last-child(2) {
      width: 6.5rem !important;
      min-width: 0 !important;
      text-align: right !important;
    }
    #divMatrixTableWrap table.div-month-matrix td.mm-sum:not(.mm-freq) {
      width: 6.5rem !important;
      min-width: 6rem !important;
      text-align: right !important;
    }
    #divTableWrap .div-table thead th:last-child,
    #divTableWrap .div-table tbody td:last-child,
    #divTableWrap .div-table tfoot td:last-child,
    #divMatrixTableWrap table.div-month-matrix th.mm-act,
    #divMatrixTableWrap table.div-month-matrix td.mm-act {
      width: 2.75rem !important;
      min-width: 0 !important;
      text-align: center !important;
      padding-left: 0.2rem;
      padding-right: 0.2rem;
    }
    #divTableWrap .div-table tbody td,
    #divTableWrap .div-table tfoot td {
      padding-left: 0.4rem;
      padding-right: 0.4rem;
      box-sizing: border-box;
    }
    #divTableWrap .div-table input.cell {
      min-width: 0 !important;
      width: 100%;
      max-width: 100%;
      text-align: right;
      box-sizing: border-box;
    }
    #divMatrixTableWrap table.div-month-matrix td {
      padding: 0.35rem 0.4rem;
      box-sizing: border-box;
    }
    #divMatrixTableWrap table.div-month-matrix td .mm-dot {
      margin-right: 0.15rem;
    }
    #divMatrixTableWrap table.div-month-matrix .mm-bar-wrap {
      align-items: center;
      width: 100%;
    }
    #divMatrixTableWrap table.div-month-matrix .mm-bar-track {
      margin-left: auto;
      margin-right: auto;
    }
    #divMatrixTableWrap table.div-month-matrix tr.mm-cash td {
      vertical-align: bottom;
    }

    /* Gemeinsames Monats-Raster: Matrix + Dividenden + Kosten */
    .div-desktop .div-table,
    .cost-desktop .div-table,
    table.div-month-matrix {
      table-layout: fixed;
      width: 100%;
    }
    .div-desktop .div-table col.col-name,
    .cost-desktop .div-table col.col-name,
    table.div-month-matrix col.col-name { width: 11rem; }
    .div-desktop .div-table col.col-month,
    .cost-desktop .div-table col.col-month,
    table.div-month-matrix col.col-month { width: auto; }
    .div-desktop .div-table col.col-sum,
    .cost-desktop .div-table col.col-sum { width: 6.5rem; }
    table.div-month-matrix col.col-sum { width: 6.5rem; }
    table.div-month-matrix col.col-freq { width: 5.5rem; }

    /* Monats-Spalten Matrix / Dividenden / Kosten – gleiche Mindestbreite */
    #divMatrixTableWrap table.div-month-matrix col.col-month,
    #divTableWrap table.div-table col.col-month,
    .cost-desktop table.div-table col.col-month {
      min-width: 2.75rem;
    }

    .div-desktop .div-table col.col-act,
    .cost-desktop .div-table col.col-act { width: 2.75rem; }
    table.div-month-matrix col.col-act { width: 2.75rem; }

    .div-desktop .div-table th:first-child,
    .div-desktop .div-table td:first-child,
    .cost-desktop .div-table th:first-child,
    .cost-desktop .div-table td:first-child,
    table.div-month-matrix th.mm-name,
    table.div-month-matrix td.mm-name {
      width: 11rem;
      max-width: 11rem;
      box-sizing: border-box;
    }
    .div-desktop .div-table thead th:nth-last-child(2),
    .div-desktop .div-table tbody td:nth-last-child(2),
    .div-desktop .div-table tfoot td:nth-last-child(2),
    .cost-desktop .div-table thead th:nth-last-child(2),
    .cost-desktop .div-table tbody td:nth-last-child(2),
    .cost-desktop .div-table tfoot td:nth-last-child(2) {
      width: 6.5rem;
      box-sizing: border-box;
    }
    .div-desktop .div-table thead th:last-child,
    .div-desktop .div-table tbody td:last-child,
    .div-desktop .div-table tfoot td:last-child,
    .cost-desktop .div-table thead th:last-child,
    .cost-desktop .div-table tbody td:last-child,
    .cost-desktop .div-table tfoot td:last-child {
      width: 2.75rem;
      box-sizing: border-box;
      padding-left: 0.25rem;
      padding-right: 0.25rem;
    }
    /* Matrix: Platzhalter wie Summe + Aktionen → Jan–Dez fluchten */
    table.div-month-matrix th.mm-sum,
    table.div-month-matrix td.mm-sum {
      width: 6.5rem;
      box-sizing: border-box;
    }
    table.div-month-matrix th.mm-act,
    table.div-month-matrix td.mm-act {
      width: 2.75rem;
      box-sizing: border-box;
      padding: 0.25rem;
    }

    table.div-month-matrix td.mm-sum {
      text-align: right;
      font-family: var(--font-mono);
      font-size: 0.78rem;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      color: var(--text);
      white-space: nowrap;
      padding-right: 0.45rem;
    }
    table.div-month-matrix th.mm-sum {
      text-align: right;
      padding-right: 0.45rem;
    }
    table.div-month-matrix tr.mm-cash td.mm-sum {
      color: var(--petrol-bright);
    }


    /* Monats-Matrix: wer zahlt wann + Cashflow-Stärke */
    .div-month-matrix-head {
      margin: 0 0 0.5rem;
      padding: 0;
    }
    /* Matrix und €-Tabelle teilen sich .table-wrap → gleiche Breite */
    #divMatrixTableWrap table.div-month-matrix {
      margin-bottom: 0.85rem;
      border-bottom: 1px solid rgba(196, 165, 116, 0.15);
    }
    #divTableWrap table.div-table {
      border-top: none;
    }
    .div-month-matrix-head {
      display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.85rem;
      margin-bottom: 0.65rem;
    }
    .div-month-matrix-title {
      font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.04em; color: var(--text-muted);
    }
    .div-month-matrix-hint {
      font-size: 0.72rem; color: var(--text-muted); opacity: 0.9;
    }
    .div-matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.div-month-matrix {
      width: 100%; border-collapse: collapse; font-size: 0.78rem;
      min-width: 0;
    }
    table.div-month-matrix th,
    table.div-month-matrix td {
      padding: 0.28rem 0.35rem 0.28rem 0.45rem; text-align: center; vertical-align: middle;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      box-sizing: border-box;
    }
    table.div-month-matrix th {
      font-size: 0.75rem; font-weight: 600; color: var(--text-muted);
      letter-spacing: 0.02em;
      text-align: right;
    }
    table.div-month-matrix th.mm-name {
      text-align: left !important;
    }
    table.div-month-matrix th.mm-name,
    table.div-month-matrix td.mm-name {
      text-align: left; padding-left: 0.35rem; padding-right: 0.45rem;
      white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
      font-weight: 600; color: var(--text);
    }
    table.div-month-matrix .mm-dot {
      display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
    }

    #divMatrixTableWrap table.div-month-matrix td.mm-empty,
    table.div-month-matrix td.mm-empty {
      text-align: center !important;
      color: transparent !important;
    }
    #divMatrixTableWrap table.div-month-matrix td.mm-pay,
    table.div-month-matrix td.mm-pay {
      text-align: center !important;
    }
    #divMatrixTableWrap table.div-month-matrix td.mm-pay .mm-dot {
      margin-left: auto;
      margin-right: auto;
    }

    table.div-month-matrix .mm-empty {
      color: rgba(139, 155, 180, 0.35); font-size: 0.65rem;
    }
    table.div-month-matrix tr.mm-cover td {
      font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted);
      border-top: 1px solid rgba(196, 165, 116, 0.15);
      padding-top: 0.45rem;
    }
    table.div-month-matrix tr.mm-cash td {
      padding-top: 0.4rem; padding-bottom: 0.35rem;
      border-bottom: none;
    }
    table.div-month-matrix .mm-bar-wrap {
      display: flex; flex-direction: column; align-items: flex-end; gap: 0.28rem;
      min-height: 3rem; justify-content: flex-end;
      width: 100%;
      box-sizing: border-box;
    }
    table.div-month-matrix .mm-bar-track {
      width: 1.25rem; max-width: 100%; height: 2rem;
      margin: 0;
      margin-left: auto;
      background: rgba(8, 12, 20, 0.75);
      border: 1px solid rgba(168, 180, 196, 0.12);
      border-radius: 4px;
      display: flex; align-items: flex-end; overflow: hidden;
      flex-shrink: 0;
    }
    table.div-month-matrix .mm-bar-fill {
      width: 100%; border-radius: 3px 3px 0 0;
      background: var(--petrol-bar);
      min-height: 2px;
      transition: height 0.25s ease;
    }
    table.div-month-matrix .mm-bar-fill.mm-gap {
      background: var(--petrol-bar-gap);
    }
    table.div-month-matrix .mm-bar-val {
      font-family: var(--font-mono); font-size: 0.78rem;
      font-weight: 600;
      color: var(--text);
      line-height: 1.15; white-space: nowrap;
      font-variant-numeric: tabular-nums;
      text-align: right;
      width: 100%;
    }
    table.div-month-matrix tr.mm-cash td.mm-name {
      font-size: 0.72rem; color: var(--petrol-bright); font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.03em;
    }
    @media (max-width: 900px) {
      table.div-month-matrix { min-width: 0; font-size: 0.72rem; }
      table.div-month-matrix .mm-bar-track { height: 1.6rem; max-width: 1.25rem; }
    }


    .div-year-tabs-with-action {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem 1rem;
      margin-bottom: 0.85rem;
    }
    .div-year-tabs-with-action > .div-year-tabs {
      margin-bottom: 0;
      flex: 1 1 auto;
    }
    .div-year-tabs-with-action > .btn {
      flex: 0 0 auto;
      margin-left: auto;
    }

    /* Kosten / Verlust: Aktionsbuttons Champagner (nicht von Year-Tabs überschreiben) */
    .div-year-tabs-with-action > .btn.btn-primary,
    #btnAddCost.btn-primary,
    #btnAddSale.btn-primary {
      background: rgba(196, 165, 116, 0.14) !important;
      border: 1px solid var(--accent) !important;
      color: #e8d5b5 !important;
      box-shadow: none;
    }
    .div-year-tabs-with-action > .btn.btn-primary:hover,
    #btnAddCost.btn-primary:hover,
    #btnAddSale.btn-primary:hover {
      background: rgba(196, 165, 116, 0.22) !important;
      border-color: #d4b896 !important;
      color: #f0e6d4 !important;
    }


    .div-year-tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
    .div-year-tabs button {
      font-family: inherit; font-size: var(--text-sm); font-weight: 600; padding: 0.4rem 0.85rem;
      border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated);
      color: var(--text-muted); cursor: pointer;
    }
    .div-year-tabs button.active { background: rgba(196, 165, 116, 0.16); border-color: var(--accent); color: #e8d5b5; }
    /* Dividenden + Kosten: alle Monatswerte und Summen rechtsbündig unter den Überschriften */
    .div-table {
      border-collapse: collapse;
    }
    .div-table input.cell {
      min-width: 4.2rem;
      max-width: 100%;
      text-align: right;
      font-variant-numeric: tabular-nums;
      box-sizing: border-box;
    }
    .div-table input.cell[data-month],
    #costBody input.cell[data-month] {
      text-align: right !important;
      font-variant-numeric: tabular-nums;
    }
    .div-table td.month-dash,
    .div-table .month-dash,
    td.month-dash {
      text-align: right !important;
      color: var(--text-muted);
      font-variant-numeric: tabular-nums;
    }
    .div-table thead th {
      text-align: right;
      font-variant-numeric: tabular-nums;
      min-width: 4.2rem;
      padding-left: 0.35rem;
      padding-right: 0.45rem;
    }
    /* Erste Spalte: Unternehmen links */
    .div-table thead th:first-child {
      text-align: left;
      min-width: 9rem;
    }
    /* Kosten-Tabelle: 2. Spalte = Typ – links (Monate bleiben rechts) */
    
    /* Kosten: Select-Pfeil nicht in Nachbarspalten */
    .cost-desktop .div-table select.cell {
      appearance: none;
      -webkit-appearance: none;
      background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
      background-position: calc(100% - 12px) calc(50% - 2px), calc(100% - 8px) calc(50% - 2px);
      background-size: 4px 4px, 4px 4px;
      background-repeat: no-repeat;
      padding-right: 1.2rem;
      max-width: 100%;
      box-sizing: border-box;
    }
    .cost-desktop .div-table td:nth-child(2) {
      overflow: hidden;
      max-width: 11.5rem;
    }

    .cost-desktop .div-table thead th:nth-child(2) {
      text-align: left;
      min-width: 7rem;
    }
    /* Dividenden: 2. Spalte = Jan – rechts wie alle Monate */
    .div-desktop .div-table thead th:nth-child(2) {
      text-align: right;
    }
    /* Summe-Spalte (vorletzte vor Aktionen): rechts, genug Breite für „1.234,56 €“ */
    .div-table thead th:nth-last-child(2) {
      text-align: right;
      min-width: 6.5rem;
    }
    .div-table tbody td,
    .div-table tfoot td {
      padding-left: 0.35rem;
      padding-right: 0.45rem;
    }
    .div-table tbody td:first-child,
    .div-table tfoot td:first-child {
      text-align: left;
    }
    .cost-desktop .div-table tbody td:nth-child(2),
    .cost-desktop .div-table tfoot td:nth-child(2) {
      text-align: left;
    }

    .div-month-sum,
    .cost-sum,
    .div-table tfoot td,
    #divTotals td,
    #costTotals td {
      text-align: right;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      font-family: 'JetBrains Mono', monospace;
    }
    .div-table tfoot td:first-child,
    #divTotals td:first-child,
    #costTotals td:first-child {
      text-align: left;
      font-family: 'Inter', system-ui, sans-serif;
    }
    /* Aktions-Spalte zentriert */
    .div-table td.actions-cell,
    .div-table thead th:last-child {
      text-align: center;
      min-width: 2.5rem;
    }
    /* Dividendenkalender: keine Hintergrund-Markierung bei Einträgen */
    .div-table td.has-div {
      background: transparent;
    }
    .div-table td.has-div input.cell {
      color: var(--text);
      font-weight: 500;
    }
    .div-month-sum { font-weight: 600; color: var(--text) !important; font-size: var(--text-sm); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
    /* Nur die Endsumme (Jahressumme) im Dividendenkalender grün */
    #divTotals td.div-end-sum {
      color: var(--green);
      font-weight: 700;
    }
    /* Kosten: Summen neutral (nicht grün – Grün = Erträge) */
    .cost-sum { font-weight: 600; color: var(--text); }
    tr.cost-group-header .cost-sum { color: var(--text-muted); }
    #costTotals .cost-sum { color: var(--text); font-weight: 700; }
    .date-label {
      font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
      padding: 0.12rem 0.4rem; border-radius: 4px; margin-right: 0.35rem;
      background: rgba(148, 163, 184, 0.12); color: var(--text-muted);
    }
    .date-label.ex,
    .date-label.pay { background: rgba(148, 163, 184, 0.12); color: var(--text-muted); }
    input.cell.date-input { min-width: 130px; font-family: 'JetBrains Mono', monospace; }
    /* Nur Ex-Tag / Zahltag im aktuellen Monat – leicht golden (nicht Aktie/Info) */
    tr.expay-current-month td {
      background: transparent;
    }
    td.expay-month-cell,
    td.expay-pay-current {
      background: rgba(196, 165, 116, 0.14) !important;
      box-shadow: inset 0 0 0 1px rgba(196, 165, 116, 0.22);
      border-radius: 6px;
    }
    td.expay-month-cell input.date-input,
    td.expay-pay-current input.date-input,
    .pos-field.expay-pay-current input.date-input {
      color: inherit !important;
      font-weight: 500 !important;
      background: transparent !important;
      border-color: transparent !important;
      -webkit-text-fill-color: inherit;
    }
    .pos-field.expay-pay-current,
    .pos-field.expay-month-cell {
      background: rgba(196, 165, 116, 0.14);
      box-shadow: inset 0 0 0 1px rgba(196, 165, 116, 0.22);
      border-radius: 8px;
      padding: 0.35rem 0.4rem;
    }
    .m-card.expay-current {
      background: transparent;
      box-shadow: none;
    }
    /* Sparplan-Karte */
    .sparplan-grid {
      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-top: 1rem;
    }
    @media (max-width: 700px) {
      .sparplan-grid { grid-template-columns: 1fr; }
    }
    .sparplan-grid label {
      display: block; font-size: 0.72rem; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.3rem; font-weight: 600;
    }
    .sparplan-grid input {
      width: 100%; font-family: 'JetBrains Mono', monospace; font-size: 0.9rem;
      padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid var(--border);
      background: var(--bg-elevated); color: var(--text); outline: none;
    }
    .sparplan-grid input:focus { border-color: var(--accent); }
    .sparplan-summary {
      font-family: 'JetBrains Mono', monospace; font-size: 0.95rem; font-weight: 600;
      padding-top: 1.35rem; color: var(--text);
    }

    /* Kosten: Gruppenzeilen dunkler, aufgeklappte Detailzeilen wie Header */
    tr.cost-group-header {
      cursor: pointer;
      user-select: none;
    }
    tr.cost-group-header td {
      font-weight: 600; padding: 0.55rem 0.45rem;
      border-bottom: 1px solid var(--border);
      background: var(--bg-card); /* dunkler */
    }
    tr.cost-group-header:hover td {
      background: rgba(196, 165, 116, 0.1);
    }
    tr.cost-group-header .cost-group-label {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      flex-wrap: wrap;
    }
    tr.cost-group-header .cost-group-label .sector-badge {
      font-weight: 600;
    }
    tr.cost-group-header .cost-toggle {
      display: inline-flex; align-items: center; justify-content: center;
      width: 1.25rem; height: 1.25rem; margin-left: 0.15rem;
      font-size: 0.7rem; color: var(--text-muted);
      transition: transform 0.15s;
      flex-shrink: 0;
    }
    tr.cost-group-header.open .cost-toggle { transform: rotate(90deg); color: var(--accent); }
    tr.cost-detail td {
      padding-top: 0.3rem; padding-bottom: 0.3rem;
      background: transparent;
    }
    tr.cost-detail:hover td {
      background: rgba(196, 165, 116, 0.04);
    }
    tr.cost-detail td.has-div,
    tr.cost-detail td.has-div input.cell {
      background: transparent !important;
    }
    tr.cost-detail .cost-indent { padding-left: 1.6rem; color: var(--text-muted); font-size: var(--text-sm); }

    .toast {
      position: fixed; bottom: 1.5rem; right: 1.5rem;
      background: rgba(15, 22, 35, 0.75);
      backdrop-filter: blur(16px) saturate(1.2);
      -webkit-backdrop-filter: blur(16px) saturate(1.2);
      border: 1px solid rgba(196, 165, 116, 0.2);
      border-radius: 12px; padding: 0.75rem 1.25rem;
      font-size: 0.85rem;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      opacity: 0; transform: translateY(10px);
      transition: all 0.25s; z-index: 200; pointer-events: none;
    }
    .toast.show { opacity: 1; transform: translateY(0); }

    /* Glas: Fallback ohne backdrop-filter */
    @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
      nav { background: rgba(8, 12, 22, 0.96) !important; }
      .nav-dd-panel { background: var(--bg-card); }
      .kpi { background: var(--bg-card); }
      .toast { background: var(--bg-elevated); }
    }

    .empty-hint { text-align: center; padding: 2.5rem; color: var(--text-muted); font-size: 0.9rem; }

    /* Portfolio-Wachstum Übersicht */
    .growth-grid {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 1rem;
      margin-bottom: 1.75rem;
    }
    .growth-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1.25rem 1.35rem;
      box-shadow: var(--shadow);
    }
    .growth-card h3 {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-muted);
      margin-bottom: 1rem;
      letter-spacing: 0.02em;
    }
    .growth-summary {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      justify-content: center;
      min-height: 200px;
    }
    .growth-big {
      text-align: center;
      padding: 0.5rem 0 0.75rem;
    }
    .growth-big .rate {
      font-family: 'JetBrains Mono', monospace;
      font-size: 2.4rem;
      font-weight: 700;
      line-height: 1.1;
    }
    .growth-big .rate-label {
      font-size: 0.8rem;
      color: var(--text-muted);
      margin-top: 0.35rem;
    }
    .growth-bars-compare {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
    }
    .growth-bar-item .gbar-label {
      display: flex;
      justify-content: space-between;
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-bottom: 0.25rem;
    }
    .growth-bar-item .gbar-track {
      height: 12px;
      background: rgba(8, 12, 20, 0.85);
      border: 1px solid rgba(168, 180, 196, 0.12);
      border-radius: 6px;
      overflow: hidden;
      position: relative;
    }
    .growth-bar-item .gbar-fill {
      height: 100%;
      border-radius: 5px;
      transition: width 0.4s ease;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    }
    .growth-bar-item.gbar-invest .gbar-track {
      overflow: visible;
      margin-bottom: 1.15rem;
    }
    .gbar-year-mark {
      position: absolute;
      top: -2px;
      bottom: -2px;
      width: 2px;
      margin-left: -1px;
      background: rgba(232, 237, 245, 0.9);
      box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
      border-radius: 1px;
      z-index: 2;
      pointer-events: auto;
      cursor: help;
    }
    .gbar-year-mark::after {
      content: attr(data-year);
      position: absolute;
      top: calc(100% + 0.35rem);
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.62rem;
      font-weight: 600;
      font-family: var(--font-mono);
      color: rgba(200, 210, 220, 0.9);
      white-space: nowrap;
    }
    .growth-chart-wrap {
      position: relative;
      width: 100%;
      min-height: 240px;
    }
    .growth-chart-wrap canvas {
      width: 100% !important;
      height: 240px !important;
      display: block;
    }
    @media (max-width: 900px) {
      .growth-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 1200px) {
      .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .sector-grid .sector-card-pie { grid-column: auto; }
    }
    @media (max-width: 1100px) {
      .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .sector-grid .sector-card-pie { grid-column: auto; }
    }
    @media (max-width: 900px) {
      .kpi-grid { grid-template-columns: 1fr 1fr; }
      .sector-grid { grid-template-columns: 1fr; }

      nav {
        padding: 0 0.75rem;
        padding-top: env(safe-area-inset-top, 0);
        background: rgba(10, 16, 28, 0.94) !important;
        backdrop-filter: blur(16px) saturate(1.2);
        -webkit-backdrop-filter: blur(16px) saturate(1.2);
      }
      .nav-inner {
        flex-wrap: wrap;
        height: auto;
        min-height: 52px;
        padding: 0.4rem 0;
        gap: 0.35rem 0.5rem;
        align-items: center;
      }
      .logo {
        font-size: 1rem;
        order: 0;
        flex: 1 1 auto;
        min-width: 0;
      }
      .nav-burger {
        display: inline-flex;
        order: 1;
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--bg-elevated);
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        padding: 0;
        cursor: pointer;
        flex-shrink: 0;
      }
      .nav-burger span {
        width: 1.1rem;
        height: 2px;
        background: var(--text);
        border-radius: 1px;
        display: block;
        transition: transform 0.2s, opacity 0.2s;
      }
      /* Zeile 2: Keys + Kurse + Daten in stabilem Grid */
      .nav-actions {
        order: 2;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 2.6rem 2.6rem;
        gap: 0.35rem;
        align-items: center;
      }
      .nav-actions .api-key-input {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        min-height: 2.6rem;
        font-size: 16px !important;
        padding: 0.35rem 0.4rem;
        box-sizing: border-box;
      }
      .nav-actions .api-key-input:focus {
        width: 100% !important;
        max-width: none !important;
      }
      .nav-actions #serverStatus {
        display: none !important;
      }
      .nav-actions #ddKurse { grid-column: 4; }
      .nav-actions #ddDaten { grid-column: 5; }
      .nav-dd { position: relative; }
      .nav-dd-toggle .dd-full { display: none; }
      .nav-dd-toggle .dd-short { display: inline; }
      .nav-dd-toggle {
        padding: 0;
        width: 2.6rem;
        height: 2.6rem;
        justify-content: center;
        border-radius: 8px;
      }
      .nav-dd-toggle .caret { display: none; }
      /* Daten-/Kurse-Menü bleibt im iPhone-Viewport */
      .nav-dd-panel {
        position: fixed !important;
        right: max(0.5rem, env(safe-area-inset-right, 0px)) !important;
        left: auto !important;
        width: min(17rem, calc(100vw - 1rem)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 1rem) !important;
        z-index: 400;
        box-sizing: border-box;
      }
      /* Vollbreite-Menü unter der Leiste */
      .nav-links {
        display: none;
        order: 3;
        width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0.2rem;
        padding: 0.35rem 0 0.5rem;
        margin: 0;
        border-top: 1px solid var(--border);
        list-style: none;
      }
      .nav-links.open {
        display: flex;
      }
      .nav-links li {
        width: 100%;
      }
      .nav-links a {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 2.75rem;
        padding: 0.55rem 0.75rem;
        font-size: var(--text-sm);
        font-weight: 500;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--text-muted);
        box-sizing: border-box;
      }
      .nav-links a:hover {
        background: rgba(232, 237, 245, 0.06);
        color: #e8edf5;
      }
      .nav-links a.active {
        color: #f1f5f9;
        background: rgba(232, 237, 245, 0.1);
        box-shadow: inset 0 0 0 1px rgba(232, 237, 245, 0.22);
        font-weight: 600;
      }
    }
    @media (max-width: 560px) {
      /* 2×2 behalten – Positionen mit Dots bleibt lesbar */
      .kpi-grid { grid-template-columns: 1fr 1fr; gap: 0.65rem; }
      .kpi { min-height: 8.25rem; padding: 1rem 0.9rem; }
      .kpi .value { font-size: 1.25rem; }
      /* Nav-Grid bleibt wie bei ≤900px – kein Umspringen */
    }


    /* Jahresübersicht: horizontal scrollbar auf schmalen Screens */
    @media (max-width: 900px) {
      .table-wrap:has(table.earnings-year-table),
      #uebersicht .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
      }
      table.earnings-year-table {
        min-width: 780px;
        table-layout: fixed;
      }
      table.earnings-year-table th.ey-num,
      table.earnings-year-table td.ey-num {
        font-size: 0.72rem;
        padding-left: 0.2rem;
        padding-right: 0.3rem;
      }
      table.earnings-year-table th.ey-year,
      table.earnings-year-table td.ey-year {
        padding-left: 0.35rem;
      }
    }


    /* API-/Nav-Dropdowns auf schmalen Screens im Viewport halten */
    @media (max-width: 768px) {
      .nav-dd-panel {
        position: fixed !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(70vh, 28rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 2000;
      }
      .nav-dd-panel-keys {
        min-width: 0;
        max-width: none;
      }
      .nav-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.35rem;
      }
    }

    /* iPhone / schmale Screens – Tabellen & Abstände */
    @media (max-width: 768px) {
      main {
        padding: 0.85rem 0.55rem 2.5rem;
        max-width: 100%;
        overflow-x: hidden;
      }
      .section { margin-bottom: 1.5rem; }
      .section-header h2 { font-size: 1.1rem; }
      .kpi {
        padding: 0.9rem 1rem;
      }
      .kpi .value { font-size: 1.25rem; }

      .table-wrap {
        margin-left: -0.15rem;
        margin-right: -0.15rem;
        border-radius: 10px;
        max-width: 100%;
      }
      table { font-size: var(--text-sm); }
      th {
        padding: 0.5rem 0.35rem;
        font-size: var(--text-xs);
        letter-spacing: var(--tracking-label);
      }
      td {
        padding: 0.4rem 0.3rem;
        font-size: var(--text-sm);
      }

      /* iOS: ≥16px verhindert Auto-Zoom bei Fokus */
      input.cell, select.cell, .api-key-input, .auto-price-select {
        font-size: 16px !important;
        min-height: 2.75rem;
      }
      .readonly {
        font-size: 0.78rem;
      }

      /* Portfolio: kompaktere Spalten, horizontal scrollbar */
      #portfolioTable {
        min-width: 720px;
      }
      /* 1 Aktie · 2 SP · 3 Sektor · 4 Ticker · 5 ISIN */
      #portfolioTable th:nth-child(1), #portfolioTableBody td:nth-child(1) {
        width: 8rem; min-width: 7rem; max-width: 9rem;
      }
      #portfolioTable th:nth-child(2), #portfolioTableBody td:nth-child(2) {
        width: 2.4rem; min-width: 2.4rem; max-width: 2.6rem;
      }
      #portfolioTable th:nth-child(3), #portfolioTableBody td:nth-child(3) {
        min-width: 9rem;
      }
      #portfolioTable th:nth-child(4), #portfolioTableBody td:nth-child(4) {
        width: 3.5rem; max-width: 4rem;
      }
      /* ISIN auf sehr schmalen Screens ausblenden */
      #portfolioTable th:nth-child(5),
      #portfolioTableBody td:nth-child(5),
      #portfolioTable th.col-isin,
      #portfolioTableBody td.col-isin {
        display: none;
      }
      #portfolioBody td.col-gv,
      #portfolioBody td.col-perf,
      #portfolioBody td.col-pa,
      #portfolioBody td.col-divy {
        min-width: 4.2rem;
        font-size: 0.8rem;
      }

      /* Dividenden-/Kosten-Tabellen */
      .div-table { min-width: 640px; }
      .div-table input.cell { min-width: 3.2rem; }

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

      /* Wachstum */
      .growth-summary {
        flex-direction: column !important;
        align-items: stretch !important;
      }
      .growth-big { min-width: 0 !important; }

      /* Sticky erste Spalte Portfolio (Aktie) */
      #portfolioTable th:nth-child(1),
      #portfolioTableBody td:nth-child(1),
      #portfolioBody td:nth-child(1) {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--bg-card);
        box-shadow: 4px 0 8px rgba(0,0,0,0.25);
      }
      #portfolioTable thead th:nth-child(1) {
        background: var(--bg-elevated);
        z-index: 3;
      }

      /* Nav-Token-Felder nicht zu breit */
      /* API-Felder: Mobile-Grid aus ≤900 steuert die Breite */
      #serverStatus { max-width: 4.5rem; font-size: 0.65rem; }
    }

    @media (max-width: 400px) {
      main { padding: 0.65rem 0.4rem 2rem; }
      /* Ticker + SP + p.a. ausblenden für noch schmalere Sicht */
      #portfolioTable th:nth-child(3),
      #portfolioBody td:nth-child(3),
      #portfolioTable th.col-pa,
      #portfolioBody td.col-pa,
      #portfolioTable th.col-sp,
      #portfolioBody td.col-sp {
        display: none;
      }
      #portfolioTable { min-width: 560px; }
    }

    /* —— Mobile Feinschliff: Touch, Safe-Area, Typo, Karten —— */
    @media (max-width: 900px) {
      html {
        scroll-padding-top: 72px;
      }
      body {
        /* Home-Indicator / Notch */
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
      }
      main {
        padding-bottom: calc(2.75rem + env(safe-area-inset-bottom, 0px));
      }
      .nav-links a {
        min-height: 2.5rem;
        display: inline-flex;
        align-items: center;
        font-size: var(--text-xs);
      }
      .btn, .btn-sm {
        min-height: 2.5rem;
        padding-left: 0.85rem;
        padding-right: 0.85rem;
      }
      .btn-sm {
        font-size: var(--text-sm);
      }
      .kpi .label {
        font-size: var(--text-xs);
      }
      .kpi .value {
        font-size: 1.28rem;
        font-variant-numeric: tabular-nums;
      }
      .section-header {
        gap: 0.5rem;
        align-items: flex-start;
      }
      .section-header h2 {
        font-size: 1.08rem;
        letter-spacing: -0.025em;
      }
      /* Treemap mobil ausblenden */
      .portfolio-treemap-wrap {
        display: none !important;
      }
      /* Sektor-Karten: keine erzwungene Desktop-Höhe */
      .sector-card {
        min-height: 0;
      }
      .sector-card-pie .pie-wrap canvas {
        max-width: min(200px, 92vw);
        width: min(200px, 92vw);
        height: auto !important;
        aspect-ratio: 1 / 1;
      }
      .portfolio-toolbar {
        gap: 0.45rem 0.65rem;
        padding: 0.55rem 0.65rem;
      }
      .portfolio-toolbar label,
      .portfolio-toolbar select {
        font-size: var(--text-sm);
      }
      .portfolio-toolbar select {
        min-height: 2.5rem;
        font-size: 16px; /* iOS kein Zoom */
      }
      .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
      }
      .pos-card {
        padding: 0.9rem 0.95rem;
      }
      .pos-card-fields {
        gap: 0.55rem 0.65rem;
      }
      .pos-field input.cell,
      .pos-field select.cell {
        font-size: 16px !important;
        min-height: 2.75rem;
      }
      .toast {
        left: 0.75rem;
        right: 0.75rem;
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        max-width: none;
      }
      .next-div-strip {
        flex-wrap: wrap;
        gap: 0.35rem 0.75rem;
        font-size: var(--text-sm);
      }
      /* Dividenden/Kosten: Karten statt horizontalem Extrem-Scroll wo vorhanden */
      .m-card {
        padding: 0.85rem 0.9rem;
      }
      .div-year-tabs button {
        min-height: 2.5rem;
        font-size: var(--text-sm);
      }
    }

    @media (max-width: 560px) {
      .kpi-grid {
        gap: 0.55rem;
      }
      .kpi {
        min-height: 7.5rem;
        padding: 0.85rem 0.75rem;
      }
      .kpi .value {
        font-size: 1.15rem;
      }
      .nav-actions .nav-dd-toggle {
        min-height: 2.5rem;
      }
    }


    .loss-kpi-grid {
      grid-template-columns: repeat(4, 1fr);
    }

    .loss-kpi-grid .kpi .value {
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
      white-space: nowrap;
    }
    .loss-kpi-grid .kpi .value.pos,
    .loss-kpi-grid .kpi .value.neg {
      display: block;
      text-align: left;
    }

    @media (max-width: 900px) {
      .loss-kpi-grid {
        grid-template-columns: 1fr 1fr !important;
      }
    }
    @media (max-width: 480px) {
      .loss-kpi-grid {
        grid-template-columns: 1fr !important;
      }
      .loss-kpi-grid .kpi {
        width: 100%;
        min-height: auto;
      }
    }

    .only-mobile { display: none; }
    @media (max-width: 900px) {
      .only-desktop { display: none !important; }
      .only-mobile { display: grid !important; }
    }
    @media (min-width: 901px) {
      .only-mobile { display: none !important; }
      .only-desktop { display: block !important; }
    }

    /* Tabellen Desktop sichtbar */
    @media (min-width: 901px) {
      .only-desktop { display: block !important; }
      /* Nur innerhalb des aktiven Panels erzwingen – nie sektionsübergreifend */
      .portfolio-panel.is-on .div-desktop,
      .portfolio-panel.is-on .cost-desktop,
      #panelKapKosten.is-on .cost-desktop,
      #panelKapKosten .cost-desktop {
        display: block !important;
      }
    }

    /* Portfolio als CSS-Grid (Karten) – primär Handy */
    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 0.85rem;
    }
    .pos-card {
      background: var(--bg-card);
      border: 1px solid rgba(196, 165, 116, 0.14);
      border-radius: var(--radius);
      padding: 0.85rem 0.95rem 0.95rem;
      box-shadow: var(--shadow);
      border-left: 3px solid var(--accent);
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
      min-width: 0;
    }
    .pos-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.5rem;
    }
    .pos-card-head-main {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      min-width: 0;
      flex: 1;
    }
    .pos-card-name-row {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      min-width: 0;
    }
    .pos-card-name-row input.cell.name {
      font-size: 1rem;
      font-weight: 700;
      min-width: 0;
    }
    .pos-card-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.45rem 0.55rem;
    }
    .pos-field {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      min-width: 0;
    }
    .pos-field.wide {
      grid-column: 1 / -1;
    }
    .pos-field label {
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--text-muted);
    }
    .pos-field input.cell,
    .pos-field select.cell {
      width: 100%;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: 7px;
      padding: 0.35rem 0.45rem;
    }
    .pos-card-metrics {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.35rem;
      padding-top: 0.35rem;
      border-top: 1px solid var(--border);
    }
    .pos-metric {
      text-align: center;
      min-width: 0;
    }
    .pos-metric .m-label {
      font-size: 0.6rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      font-weight: 600;
    }
    .pos-metric .m-value {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.82rem;
      font-weight: 700;
      margin-top: 0.1rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pos-card-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
    .portfolio-totals {
      margin-top: 0.85rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.55rem 0.65rem;
      padding: 0.85rem 1rem;
      background: var(--bg-card);
      border: 1px solid rgba(196, 165, 116, 0.18);
      border-radius: var(--radius);
    }
    .portfolio-totals .pt-item {
      min-width: 0;
      text-align: right;
    }
    .portfolio-totals .pt-item .pt-label {
      font-size: 0.65rem;
      text-transform: uppercase;
      color: var(--text-muted);
      font-weight: 600;
      letter-spacing: 0.03em;
    }
    .portfolio-totals .pt-item .pt-value {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
      font-size: 0.9rem;
      margin-top: 0.15rem;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    @media (max-width: 380px) {
      .portfolio-totals {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    .portfolio-empty {
      grid-column: 1 / -1;
      text-align: center;
      color: var(--text-muted);
      padding: 2rem 1rem;
      border: 1px dashed var(--border);
      border-radius: var(--radius);
    }
    @media (max-width: 420px) {
      .portfolio-grid {
        grid-template-columns: 1fr;
      }
      .pos-card-metrics {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (min-width: 1100px) {
      .portfolio-grid {
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      }
    }


        /* Mobile: Dividenden / Kosten – Karten; Ex-& Zahltage – scrollbare Tabelle */
    .mobile-list {
      display: none;
      flex-direction: column;
      gap: 0.75rem;
      width: 100%;
      min-width: 0;
    }
    @media (max-width: 900px) {
      .div-desktop, .cost-desktop { display: none !important; }
      /* Ex-/Zahltage: nur noch Kalender (keine Tabelle) */
      #divMobile, #costMobile {
        display: flex !important;
        visibility: visible !important;
      }
    }
    @media (min-width: 901px) {
      .mobile-list { display: none !important; }
    }
    .m-card {
      background: var(--bg-card);
      border: 1px solid rgba(196,165,116,0.14);
      border-radius: var(--radius);
      padding: 0.85rem 0.9rem;
      border-left: 3px solid var(--accent);
      min-width: 0;
    }
    .m-card-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.55rem;
    }
    .m-card-title {
      font-weight: 700;
      font-size: 0.95rem;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .m-card-sum {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
      font-size: 0.9rem;
      white-space: nowrap;
    }
    .month-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.35rem;
    }
    .month-cell {
      display: flex;
      flex-direction: column;
      gap: 0.12rem;
      min-width: 0;
    }
    .month-cell span {
      font-size: 0.6rem;
      font-weight: 600;
      text-transform: uppercase;
      color: var(--text-muted);
      letter-spacing: 0.03em;
    }
    .month-cell input.cell {
      width: 100%;
      font-size: 16px !important;
      padding: 0.3rem 0.25rem;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: 6px;
      text-align: right;
    }
    /* Mobile-Monatszellen: keine farbige Hervorhebung bei Beträgen */
    .month-cell.has-val input.cell {
      border-color: var(--border);
      background: var(--bg-elevated);
    }
    .expay-m-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.45rem;
    }
    .expay-m-fields .pos-field.wide { grid-column: 1 / -1; }
    .expay-m-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem 0.85rem;
      align-items: center;
      margin: 0.35rem 0 0.55rem;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.8rem;
      color: var(--text);
      line-height: 1.4;
    }
    .expay-m-summary .expay-m-note {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    /* Dividenden-Monats-Kalender (Ex & Zahltage) */
    .expay-paid-panel {
      margin: 0 0 0.85rem;
      padding: 0.85rem 1rem;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--bg-card);
    }
    .expay-paid-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 0.65rem;
      flex-wrap: wrap;
    }
    .expay-paid-head strong {
      font-size: 0.85rem;
      font-weight: 650;
      color: var(--text);
    }
    .expay-paid-sum {
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: 0.9rem;
      color: var(--green);
      font-variant-numeric: tabular-nums;
    }
    .expay-paid-list {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      max-height: 14rem;
      overflow-y: auto;
    }
    
    .expay-paid-row .ep-pay {
      display: inline-block;
      margin-left: 0.35rem;
      padding: 0.12rem 0.4rem;
      border-radius: 6px;
      border: 1px solid var(--accent);
      color: #e8d5b5;
      background: rgba(196, 165, 116, 0.1);
      font-size: 0.75rem;
      font-weight: 600;
    }
    .expay-paid-row .ep-ex {
      display: inline-block;
      padding: 0.12rem 0.35rem;
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    .expay-paid-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.4rem 0.55rem;
      border-radius: 8px;
      background: rgba(148, 163, 184, 0.05);
      border: 1px solid transparent;
      font-size: 0.8rem;
    }
    .expay-paid-row:hover {
      border-color: rgba(196, 165, 116, 0.2);
    }
    .expay-paid-row .ep-meta {
      color: var(--text-muted);
      font-size: 0.72rem;
    }
    .expay-paid-row .ep-amt {
      font-family: var(--font-mono);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      color: var(--text);
    }
    .expay-paid-empty {
      color: var(--text-muted);
      font-size: 0.8rem;
      font-style: italic;
      padding: 0.35rem 0;
    }
    .div-cal {
      margin: 0 0 1.15rem;
      padding: 1rem 1.1rem 1.15rem;
      border-radius: var(--radius);
      border: 1px solid var(--silver-line);
      background: linear-gradient(165deg, var(--silver-soft) 0%, var(--bg-card) 45%);
    }
    .div-cal-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.85rem;
    }
    .div-cal-head h3 {
      font-size: 0.9rem; font-weight: 600; color: var(--text);
      letter-spacing: -0.01em; margin: 0;
    }
    .div-cal-head h3 span { color: var(--text-muted); font-weight: 500; font-size: 0.8rem; }
    .div-cal-nav { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
    .div-cal-nav .btn { min-width: 2.4rem; }
    .div-cal-nav select.cell {
      width: auto; min-width: 4.5rem; min-height: 2.2rem;
      background: var(--bg-elevated); border: 1px solid var(--border);
      color: var(--text); border-radius: 8px; padding: 0.25rem 0.4rem;
      font-size: var(--text-sm); font-family: var(--font-sans);
    }
    .div-cal-cell { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
    .div-cal-cell:hover:not(.muted) {
      border-color: var(--accent-muted); background: var(--bg-card);
    }
    .div-cal-ev { cursor: pointer; }
    .div-cal-editor {
      margin-top: 0.85rem; padding: 0.85rem 1rem;
      border-radius: 10px; border: 1px solid var(--accent-line);
      background: var(--bg-elevated);
    }
    .div-cal-editor-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 0.5rem; margin-bottom: 0.65rem;
    }
    .div-cal-editor-fields {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
      gap: 0.55rem 0.75rem; margin-bottom: 0.75rem;
    }
    .div-cal-editor-fields label {
      display: flex; flex-direction: column; gap: 0.25rem;
      font-size: var(--text-xs); font-weight: 600; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.03em;
    }
    .div-cal-editor-fields input.cell,
    .div-cal-editor-fields select.cell {
      font-size: 16px; min-height: 2.4rem;
      background: var(--bg-card); border: 1px solid var(--border);
      color: var(--text); border-radius: 8px; padding: 0.35rem 0.45rem;
      text-transform: none; letter-spacing: normal; font-weight: 500;
    }
    .div-cal-editor-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }
    .div-cal-legend {
      display: flex; flex-wrap: wrap; gap: 0.75rem 1.1rem;
      font-size: var(--text-xs); color: var(--text-muted); margin-bottom: 0.65rem;
    }
    .div-cal-legend i {
      display: inline-block; width: 0.55rem; height: 0.55rem;
      border-radius: 2px; margin-right: 0.3rem; vertical-align: middle;
    }
    .div-cal-legend .lg-ex { background: var(--accent); }
    .div-cal-legend .lg-pay { background: var(--silver); }
    .div-cal-legend .lg-both {
      background: linear-gradient(135deg, var(--accent) 50%, var(--silver) 50%);
    }
    .div-cal-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 0.35rem;
      align-items: stretch;
      grid-auto-rows: minmax(2.6rem, auto);
    }
    .div-cal-dow {
      text-align: center; font-size: 0.75rem; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.04em;
      color: var(--silver); padding: 0.25rem 0;
    }
    .div-cal-cell {
      min-height: 3.2rem;
      height: auto;
      border-radius: 8px;
      border: 1px solid rgba(168, 180, 196, 0.12);
      background: var(--bg-elevated);
      padding: 0.3rem 0.35rem;
      display: flex; flex-direction: column; gap: 0.2rem;
    }
    .div-cal-cell.muted { opacity: 0.4; }
    .div-cal-cell.today {
      border-color: var(--petrol-line);
      background: var(--petrol-soft);
      box-shadow: inset 0 0 0 1px var(--petrol-muted);
    }
    .div-cal-day {
      font-size: 0.85rem; font-weight: 600; color: var(--text-muted);
      font-variant-numeric: tabular-nums;
      display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap;
    }
    .div-cal-cell.today .div-cal-day {
      color: var(--petrol-bright);
      font-weight: 700;
    }
    .div-cal-ev {
      font-size: 0.78rem; line-height: 1.3;
      border-radius: 4px; padding: 0.12rem 0.25rem;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      cursor: default;
    }
    .div-cal-ev.ex {
      background: rgba(196, 165, 116, 0.28);
      border-left: 3px solid #c4a574;
      box-shadow: inset 0 0 0 1px rgba(196, 165, 116, 0.2);
    }
    .div-cal-ev.pay {
      background: rgba(168, 180, 196, 0.28);
      border-left: 3px solid #a8b4c4;
      box-shadow: inset 0 0 0 1px rgba(168, 180, 196, 0.22);
    }
    .div-cal-ev-kind {
      font-weight: 700;
      font-size: 0.72rem;
    }
    .div-cal-ev.ex .div-cal-ev-kind { color: #e8d5b5; }
    .div-cal-ev.pay .div-cal-ev-kind { color: #c5d0dc; }
    .div-cal-ev-dot {
      display: inline-block;
      width: 0.5rem; height: 0.5rem;
      border-radius: 50%;
      margin-right: 0.2rem;
      vertical-align: middle;
      flex-shrink: 0;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
    }
    .div-cal-ev-name {
      font-weight: 600;
      color: #e8edf5; /* immer hell lesbar auf Champagner/Silber */
    }
    @media (max-width: 700px) {
      .div-cal-dow { font-size: 0.65rem; }
      .div-cal-cell { min-height: 3.4rem; padding: 0.2rem; gap: 0.15rem; }
      .div-cal-day { font-size: 0.72rem; }
      .div-cal-ev { font-size: 0.55rem; padding: 0.08rem 0.15rem; line-height: 1.25; }
      .div-cal-ev-kind { font-size: 0.58rem; }
      .div-cal-ev-dot { width: 0.4rem; height: 0.4rem; }
      .div-cal { padding: 0.75rem; }
    }

    /* Nächster Dividenden-Termin in der Übersicht */
    .next-div-strip {
      display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
      gap: 0.5rem 1.25rem;
      margin: -0.35rem 0 1.75rem;
      padding: 0.85rem 1.25rem;
      border-radius: var(--radius);
      border: 1px solid rgba(196, 165, 116, 0.2);
      background: linear-gradient(165deg, rgba(196, 165, 116, 0.06) 0%, var(--bg-card) 55%);
      font-size: 0.8rem; color: var(--text-muted);
    }
    .next-div-strip .nd-label {
      width: 100%;
      font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.04em; color: var(--text-muted); flex-shrink: 0;
      margin-bottom: 0.15rem;
    }
    /* wie growth-summary: links groß, rechts gestapelte Zeilen, gap ~2rem */
    /* CSS Grid: Spalte 1 = Uhr, Spalte 2 = Termine – exakt bündig */
    .next-div-strip .nd-body {
      display: grid;
      grid-template-columns: 10.5rem minmax(0, 1fr);
      column-gap: 2rem;
      row-gap: 0.55rem;
      align-items: center;
      flex: 1 1 auto;
      min-width: 0;
      width: 100%;
    }
    .next-div-strip .nd-now {
      grid-column: 1;
      grid-row: 1;
      align-self: center;
      justify-self: start;
    }
    .next-div-strip .nd-remind-list,
    .next-div-strip #nextDivContent {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
      width: auto !important;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
      justify-content: center;
    }
    .next-div-strip .nd-remind-row {
      display: grid;
      grid-template-columns: 5.5rem minmax(6rem, 11rem) minmax(0, 1fr);
      column-gap: 0.65rem;
      align-items: center;
      min-height: 1.35rem;
    }
    .next-div-strip .nd-remind-row .nd-badge {
      margin-right: 0;
      justify-self: start;
    }
    .next-div-strip .nd-remind-row .nd-name {
      justify-self: start;
    }
    .next-div-strip .nd-remind-row .nd-meta {
      justify-self: start;
    }

    /* Variante C: Label oben · darunter Uhr + Termine nebeneinander */
    .next-div-strip.nd-variant-c {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0.75rem;
    }
    .next-div-strip.nd-variant-c .nd-top {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem 1rem;
      width: 100%;
    }
    
    .next-div-strip.nd-variant-c .nd-footer {
      display: flex;
      justify-content: flex-end;
      width: 100%;
      margin-top: 0.15rem;
    }
    .next-div-strip.nd-variant-c .nd-footer .nd-link {
      margin-left: 0;
    }

    .next-div-strip.nd-variant-c .nd-label {
      margin: 0;
      width: auto;
    }
    .next-div-strip.nd-variant-c .nd-link {
      margin-left: auto;
      align-self: center;
    }
    /* Hauptzeile: Uhr links, Termine rechts daneben */
    .next-div-strip.nd-variant-c .nd-main {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1rem 2rem;
      width: 100%;
      min-width: 0;
    }
    .next-div-strip.nd-variant-c .nd-now {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      gap: 0.45rem;
      flex: 0 0 auto;
      min-width: 0;
      padding: 0.5rem 1.15rem;
      border-radius: 999px;
      border: 1px solid var(--petrol-line);
      background: var(--bg-elevated);
      box-shadow:
        0 0 0 1px var(--petrol-glow),
        0 0 16px var(--petrol-glow);
    }
    .next-div-strip.nd-variant-c .nd-now-date {
      font-family: var(--font-sans);
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--text-muted);
      letter-spacing: 0.02em;
      text-transform: none;
      line-height: 1.2;
    }
    .next-div-strip.nd-variant-c .nd-now-sep {
      color: var(--text-muted);
      opacity: 0.55;
      font-size: 0.9rem;
      line-height: 1;
    }
    .next-div-strip.nd-variant-c .nd-now-time {
      font-family: var(--font-mono);
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text);
      letter-spacing: 0.02em;
      font-variant-numeric: tabular-nums;
      line-height: 1.2;
    }
    .next-div-strip.nd-variant-c .nd-now-uhr {
      font-family: var(--font-mono);
      font-size: 1.1rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-left: 0.25rem;
      line-height: 1.2;
    }
    .next-div-strip.nd-variant-c #nextDivContent,
    .next-div-strip.nd-variant-c .nd-remind-list {
      flex: 1 1 14rem;
      min-width: 12rem;
      max-width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.45rem;
      width: auto !important;
      grid-column: auto;
      grid-row: auto;
    }
    .next-div-strip.nd-variant-c .nd-remind-row {
      display: grid;
      grid-template-columns: 5.25rem minmax(5.5rem, 10rem) minmax(0, 1fr);
      column-gap: 0.75rem;
      align-items: center;
      min-height: 1.4rem;
    }
    .next-div-strip.nd-variant-c .nd-empty {
      align-self: center;
      padding: 0.15rem 0;
    }
    @media (max-width: 640px) {
      .next-div-strip.nd-variant-c .nd-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
      }
      .next-div-strip.nd-variant-c #nextDivContent,
      .next-div-strip.nd-variant-c .nd-remind-list {
        width: 100% !important;
        min-width: 0;
      }
      .next-div-strip.nd-variant-c .nd-remind-row {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 0.15rem;
      }
      .next-div-strip.nd-variant-c .nd-remind-row .nd-meta {
        grid-column: 1 / -1;
      }
    }

    /* Digitalwecker – neutral, kein Petrol */
    .next-div-strip .nd-now {
      display: flex; flex-direction: column; align-items: stretch;
      gap: 0.12rem;
      flex: 0 0 auto;
      min-width: 10rem;
      padding: 0.45rem 0.75rem 0.5rem;
      border-radius: 10px;
      border: 1px solid var(--border);
      background:
        linear-gradient(180deg, rgba(8, 12, 20, 0.95) 0%, rgba(4, 6, 12, 0.98) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        0 4px 14px rgba(0, 0, 0, 0.25);
    }
    .next-div-strip .nd-now-date {
      font-family: var(--font-mono);
      font-size: 0.82rem;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      color: rgba(200, 210, 220, 0.95);
      letter-spacing: 0.04em;
      text-align: center;
      text-transform: uppercase;
      line-height: 1.25;
    }
    .next-div-strip .nd-now-time {
      font-family: var(--font-mono);
      font-size: 1.35rem;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      color: #e8edf5;
      letter-spacing: 0.08em;
      text-align: center;
      line-height: 1.15;
      text-shadow: 0 0 12px rgba(232, 237, 245, 0.18);
    }
    .next-div-strip .nd-name { font-weight: 600; color: var(--text); }
    .next-div-strip .nd-meta {
      font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text);
    }
    .next-div-strip .nd-empty { color: var(--text-muted); font-style: italic; }
    .next-div-strip .nd-badge {
      display: inline-block; font-size: 0.65rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.03em;
      padding: 0.15rem 0.45rem; border-radius: 999px; margin-right: 0.35rem;
      vertical-align: middle;
    }
    .next-div-strip .nd-badge.today {
      background: var(--petrol-soft); color: var(--petrol-bright);
      border: 1px solid var(--petrol-line);
    }
    .next-div-strip .nd-badge.tomorrow {
      background: rgba(196, 165, 116, 0.22); color: #e8d5b5;
    }
    .next-div-strip .nd-badge.soon {
      background: rgba(148, 163, 184, 0.18); color: #cbd5e1;
    }
    .next-div-strip .nd-remind-row {
      font-size: 0.8rem;
    }
    .next-div-strip a.nd-link {
      font-size: 0.72rem; font-weight: 600;
      color: var(--petrol-bright); text-decoration: none; white-space: nowrap;
      margin-left: auto; align-self: flex-start;
    }
    .next-div-strip a.nd-link:hover {
      color: var(--petrol-200); text-decoration: underline;
    }
    .next-div-strip a.nd-link:hover { text-decoration: underline; }
    @media (max-width: 900px) {
      .next-div-strip {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
        padding: 0.75rem 0.9rem;
      }
      .next-div-strip .nd-body {
        grid-template-columns: 1fr;
        row-gap: 0.65rem;
      }
      .next-div-strip .nd-now {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
      }
      .next-div-strip .nd-remind-list,
      .next-div-strip #nextDivContent {
        grid-column: 1;
        grid-row: auto;
      }
      .next-div-strip .nd-remind-row {
        grid-template-columns: auto minmax(0, 1fr);
      }
      .next-div-strip .nd-remind-row .nd-meta {
        grid-column: 1 / -1;
      }
      .next-div-strip .nd-now-time { font-size: 1.15rem; }
      .next-div-strip a.nd-link { margin-left: 0; align-self: flex-end; }
      .next-div-strip .nd-meta {
        display: block;
        line-height: 1.45;
        white-space: normal;
      }
    }
    /* USD/EUR – dezent unter Nächster Termin */
    .fx-rate-strip {
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem;
      margin: -1.15rem 0 1.75rem;
      padding: 0.4rem 1.1rem 0.55rem;
      font-size: 0.72rem;
      color: var(--text-muted);
      opacity: 0.92;
    }
    .fx-rate-strip .fx-label {
      font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.04em; color: var(--text-muted); opacity: 0.85;
    }
    .fx-rate-strip .fx-value {
      font-family: 'JetBrains Mono', monospace; font-size: 0.74rem;
      color: var(--text-muted); font-weight: 500;
    }
    .fx-rate-strip .fx-meta {
      font-size: 0.68rem; color: var(--text-muted); opacity: 0.8;
    }
    .fx-rate-strip .fx-refresh {
      margin-left: auto;
      background: transparent; border: none; cursor: pointer;
      color: var(--text-muted); font-size: 0.72rem; font-weight: 600;
      padding: 0.15rem 0.35rem; border-radius: 6px;
      font-family: inherit;
    }
    .fx-rate-strip .fx-refresh:hover { color: var(--accent); background: var(--accent-soft); }
    .fx-rate-strip .fx-refresh:disabled { opacity: 0.5; cursor: wait; }
    @media (max-width: 900px) {
      .fx-rate-strip { margin-top: -1rem; padding: 0.35rem 0.9rem 0.5rem; }
      .fx-rate-strip .fx-refresh { margin-left: 0; }
    }
    /* Halbautomatische Dividenden-Termine */
    .div-fetch-panel {
      margin: 0 0 1rem;
      padding: 0.9rem 1rem 1rem;
      border-radius: var(--radius);
      border: 1px solid rgba(196, 165, 116, 0.22);
      background: linear-gradient(165deg, rgba(196, 165, 116, 0.05) 0%, var(--bg-card) 50%);
    }
    .div-fetch-head {
      display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem;
      margin-bottom: 0.35rem;
    }
    .div-fetch-status { font-size: 0.75rem; color: var(--text-muted); }
    .div-fetch-hint {
      font-size: 0.75rem; color: var(--text-muted); margin: 0 0 0.65rem; line-height: 1.4;
    }
    .div-fetch-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
    .div-fetch-table th {
      text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em;
      color: var(--text-muted); padding: 0.4rem 0.35rem; border-bottom: 1px solid var(--border);
    }
    .div-fetch-table td {
      padding: 0.35rem 0.3rem; border-bottom: 1px solid var(--border); vertical-align: middle;
    }
    .div-fetch-table input.cell {
      width: 100%; min-width: 0; background: var(--bg-elevated); border: 1px solid var(--border);
      color: var(--text); border-radius: 6px; padding: 0.25rem 0.35rem;
      font-family: 'JetBrains Mono', monospace; font-size: 0.78rem;
    }
    .div-fetch-table input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
    .div-fetch-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
    #btnFetchDivs.loading { opacity: 0.7; pointer-events: none; }
    .cost-m-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      margin-bottom: 0.5rem;
    }
    .cost-m-meta select.cell {
      font-size: 16px !important;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 0.3rem 0.4rem;
    }
    .m-group-title {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin: 0.35rem 0 0.15rem;
      padding-left: 0.15rem;
    }

    /* Sanfte Übergänge */
    .kpi, .growth-card, .sector-card, .table-wrap, .btn, .sector-badge,
    .nav-links a, input.cell, select.cell, .auto-price-toggle {
      transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease,
                  transform 0.3s ease, color 0.25s ease, opacity 0.3s ease;
    }
    /* KPI: kein Translate – nur Glow (siehe .kpi:hover oben) */
    .growth-card:hover, .sector-card:hover {
      border-color: rgba(196, 165, 116, 0.35);
      box-shadow: 0 10px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(196, 165, 116, 0.08);
      transform: translateY(-2px);
    }
    .btn:hover {
      transform: none;
    }
    .btn-primary {
      box-shadow: none;
    }
    .btn-primary:hover {
      box-shadow: none;
      filter: none;
    }
    .section {
      animation: sectionIn 0.55s ease both;
    }
    .section:nth-of-type(1) { animation-delay: 0.02s; }
    .section:nth-of-type(2) { animation-delay: 0.06s; }
    .section:nth-of-type(3) { animation-delay: 0.1s; }
    .section:nth-of-type(4) { animation-delay: 0.14s; }
    @keyframes sectionIn {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .gbar-fill {
      transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Sehr leichte Champagner-/Gold-Effekte */
    .kpi, .growth-card, .sector-card, .table-wrap {
      border-color: rgba(196, 165, 116, 0.14);
      background: linear-gradient(165deg, rgba(196, 165, 116, 0.04) 0%, var(--bg-card) 42%);
    }
    .totals-row td {
      border-top-color: rgba(196, 165, 116, 0.32);
    }
    nav {
      box-shadow: 0 1px 0 rgba(196, 165, 116, 0.1);
    }
    /* Partikel-Canvas */
    #particleCanvas {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      opacity: 0.4;
    }
  
    /* Matrix: Punkte und Cashflow-Balken zentriert in derselben Monats-Spalte */
    #divMatrixTableWrap table.div-month-matrix tbody td.mm-pay,
    #divMatrixTableWrap table.div-month-matrix tbody td.mm-empty,
    #divMatrixTableWrap table.div-month-matrix tr.mm-cash td:not(.mm-name):not(.mm-freq-h):not(.mm-freq):not(.mm-sum):not(.mm-act) {
      text-align: center !important;
      padding-left: 0.2rem !important;
      padding-right: 0.55rem !important;
      box-sizing: border-box !important;
    }
    #divMatrixTableWrap table.div-month-matrix td.mm-pay .mm-dot,
    #divMatrixTableWrap table.div-month-matrix .mm-dot {
      display: block !important;
      margin-left: auto !important;
      margin-right: auto !important;
      float: none !important;
    }
    #divMatrixTableWrap table.div-month-matrix .mm-bar-wrap {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-end !important;
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 !important;
      margin: 0 auto !important;
      box-sizing: border-box !important;
      min-height: 1.75rem !important;
    }
    #divMatrixTableWrap table.div-month-matrix .mm-bar-track {
      width: 0.85rem !important;
      max-width: 0.85rem !important;
      min-width: 0.85rem !important;
      height: 1.5rem !important;
      margin-left: auto !important;
      margin-right: auto !important;
      align-self: center !important;
    }
    #divMatrixTableWrap table.div-month-matrix thead th:not(:first-child):not(.mm-sum):not(.mm-act) {
      text-align: center !important;
      padding-left: 0.2rem !important;
      padding-right: 0.55rem !important;
    }

  
    

  
    /* —— Farbpalette seitenweit —— */
    .section {
      border-color: var(--border) !important;
    }
    .card, .kpi-card, .panel, .table-wrap, .div-matrix-wrap,
    .section > .card, #dashboard .card {
      background: rgba(255,255,255,0.025);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: none;
    }
    .kpi-card {
      box-shadow: none;
    }
    .section-header h2, .section h2 {
      letter-spacing: 0.03em;
      color: var(--text);
    }
    /* Positive Zahlen: klassisches Grün (lesbar auf Navy) */
    .pos, .text-pos, .kpi-value.pos, .totals-row .pos,
    td.pos, .gain, .profit-pos,
    .div-table .pos, .cost-sum.pos, tr.totals-row td.pos,
    #portfolioTable .pos, .pnl-pos, .wert-pos {
      color: var(--green) !important;
    }
    /* Negative Zahlen */
    .neg, .text-neg, .kpi-value.neg, .totals-row .neg,
    td.neg, .loss, .profit-neg, .pnl-neg,
    .kpi #kpiPerf.neg, .kpi #kpiGain.neg {
      color: var(--red) !important;
      font-weight: 600;
    }
    /* Petrol nur für Struktur/Cashflow/Live – nicht für +/- Beträge */
    .mm-bar-fill:not(.mm-gap),
    .cf-bar,
    .live-dot,
    .status-ok {
      /* bleibt über bestehende Petrol-Regeln */
    }
    /* Tabellen-Wraps */
    .table-wrap {
      background: rgba(255,255,255,0.025);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 0.15rem;
      box-sizing: border-box;
    }
    .portfolio-toolbar label,
    .portfolio-toolbar select,
    .portfolio-toolbar input {
      color: var(--text-muted);
      border-color: var(--border);
      background: var(--bg-elevated);
    }
    .div-year-tabs button {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-muted);
      border-radius: 8px;
    }
    .div-year-tabs button.active {
      border-color: var(--accent-line);
      color: var(--text);
      background: var(--accent-soft);
      box-shadow: none;
    }
    .div-year-tabs button:hover:not(.active) {
      border-color: var(--silver-line);
      color: var(--text);
    }
    /* Sekundär-Buttons */
    .btn-secondary, button.btn-ghost {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-muted);
    }
    .btn-secondary:hover, button.btn-ghost:hover {
      border-color: var(--accent);
      color: var(--accent);
    }
    /* Inputs in Tabellen */
    input.cell, select.cell {
      border-color: transparent;
      background: transparent;
      color: var(--text);
    }
    input.cell:focus, select.cell:focus {
      border-color: var(--accent-line) !important;
      outline: none;
    }
    /* Scrollbars dezent */
    * {
      scrollbar-color: var(--border) transparent;
    }
  
    /* Summe Monat / Jahresende: kein Blau */
    #divTotals td, #costTotals td,
    .div-month-sum, .cost-sum, .div-end-sum,
    tr.totals-row td {
      color: var(--text) !important;
    }
    #divTotals td.div-end-sum, .div-end-sum {
      color: var(--accent) !important;
      font-weight: 650;
    }
    /* Aktiennamen-Spalte Dividenden: wie Portfolio-Zeilen */

    /* KPI-Karten: Champagner-Rand */
    .kpi-card, .kpi-grid > .kpi-card, #dashboard .kpi-card {
      border: 1px solid var(--accent-line) !important;
      border-radius: 12px;
      background: rgba(255,255,255,0.03);
    }
    /* Ex & Zahltage-Link nur im Dashboard-Hinweis, nicht in der Nav */
    #dashboard a.nd-link,
    .next-div-strip a.nd-link {
      color: var(--accent) !important;
    }
    #dashboard a.nd-link:hover,
    .next-div-strip a.nd-link:hover {
      color: var(--text) !important;
    }
    /* Nav: alle Links identisch – keine Ausnahme */
    .nav-links a,
    .nav-links a[href],
    nav .nav-links a {
      color: rgba(232, 237, 245, 0.55) !important;
      background: transparent !important;
      box-shadow: none !important;
      border: none !important;
      font-weight: 500 !important;
    }
    .nav-links a:hover,
    nav .nav-links a:hover {
      color: #e8edf5 !important;
      background: rgba(232, 237, 245, 0.06) !important;
      box-shadow: none !important;
    }
    .nav-links a.active,
    nav .nav-links a.active {
      color: #f1f5f9 !important;
      background: rgba(232, 237, 245, 0.1) !important;
      box-shadow: inset 0 0 0 1px rgba(232, 237, 245, 0.22) !important;
      font-weight: 600 !important;
    }

    table.div-month-matrix tr.mm-cash td.mm-name,
    table.div-month-matrix .mm-name.cashflow-label {
      color: var(--accent) !important;
      font-weight: 650;
    }

  
    /* KPI-Karten Hover Braun/Champagner */
    .kpi-card:hover, #dashboard .kpi-card:hover, .kpi-grid .kpi-card:hover {
      background: var(--accent-soft) !important;
      border-color: var(--accent-line) !important;
      cursor: pointer;
    }

    /* Dividenden Summe Monat – kein Blau */
    #divTotals td,
    #costTotals td,
    tr.totals-row td,
    .div-table tfoot td {
      background: rgba(255, 255, 255, 0.03) !important;
      color: var(--text) !important;
      border-top: 1px solid var(--border) !important;
    }
    #divTotals td.div-month-sum {
      color: var(--text) !important;
      font-weight: 600;
    }
    #divTotals td.div-end-sum.pos,
    #divTotals td.div-end-sum,
    tr.totals-row td.div-end-sum.pos {
      color: var(--green) !important;
      font-weight: 650;
    }
    /* Unternehmen-Spalte Dividenden wie übrige Zellen */
    #divTableWrap .div-table tbody td:first-child,
    #divTableWrap .div-table thead th:first-child {
      background: transparent !important;
    }
    #divTableWrap .div-table tbody tr:hover td,
    #divTableWrap .div-table tbody tr:hover td:first-child {
      background: var(--accent-soft) !important;
    }
    /* Matrix: leere Aktions-Spalte mit hovern */
    #divMatrixTableWrap table.div-month-matrix tbody tr:hover td,
    #divMatrixTableWrap table.div-month-matrix tbody tr:hover td.mm-act,
    #divMatrixTableWrap table.div-month-matrix tbody tr:hover td.mm-sum {
      background: var(--accent-soft) !important;
    }
    /* Negative Zahlen: helles Korallenrosa */
    .neg, .text-neg, .kpi-value.neg, td.neg, .loss, .profit-neg, .pnl-neg,
    .kpi #kpiPerf.neg, .kpi #kpiGain.neg {
      color: var(--red) !important;
      font-weight: 700;
      text-shadow: none;
    }

  
    /* Negativ: helles Rosa, ein Token, maximale Lesbarkeit */
    :root { --red: #ffc4bc; --neg: #ffc4bc; }
    .neg, .text-neg, .kpi-value.neg, .totals-row .neg,
    td.neg, span.neg, .loss, .profit-neg, .pnl-neg,
    .kpi #kpiPerf.neg, .kpi #kpiGain.neg,
    #kpiPerf.neg, #kpiGain.neg {
      color: #ffc4bc !important;
      font-weight: 700 !important;
      text-shadow: none !important;
      opacity: 1 !important;
      filter: none !important;
    }

  
    /* Dashboard-KPI: Klasse ist .kpi (nicht .kpi-card) – Champagner-Rand + Braun-Hover */
    #kpis .kpi,
    .kpi-grid > .kpi,
    #dashboard .kpi {
      border: 1px solid var(--accent-line) !important;
      border-radius: 12px !important;
      background: rgba(255, 255, 255, 0.03) !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    #kpis .kpi:hover,
    .kpi-grid > .kpi:hover,
    #dashboard .kpi:hover,
    #kpis .kpi.kpi-link:hover,
    #kpis .kpi.kpi-hero:hover,
    #kpis .kpi.kpi-pos:hover,
    #kpis .kpi.kpi-neg:hover,
    #kpis .kpi.kpi-positions:hover {
      background: var(--accent-soft) !important;
      border-color: var(--accent) !important;
      box-shadow: none !important;
      transform: none !important;
    }

  
    /* Monats-Spalten Matrix / Dividenden / Kosten – gleiche Box-Modell-Basis */
    #divMatrixTableWrap,
    #divTableWrap,
    .cost-desktop.table-wrap {
      box-sizing: border-box;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    #divMatrixTableWrap table.div-month-matrix,
    #divTableWrap table.div-table,
    .cost-desktop table.div-table {
      table-layout: fixed !important;
      border-collapse: collapse !important;
      box-sizing: border-box !important;
    }
    /* Monatsköpfe: gleiches Padding in allen drei Tabellen */
    #divTableWrap table.div-table thead th:not(:first-child):not(:last-child):not(:nth-last-child(2)),
    .cost-desktop table.div-table thead th:not(:first-child):not(:nth-child(2)):not(:last-child):not(:nth-last-child(2)) {
      text-align: right !important;
      padding-left: 0.2rem !important;
      padding-right: 0.55rem !important;
      box-sizing: border-box !important;
    }

  
    /* Matrix-Inhalt wie Dividenden/Kosten: rechtsbündig in der Monats-Spalte
       (Spaltenbreiten bleiben pixelgleich; nur Innenausrichtung) */
    #divMatrixTableWrap table.div-month-matrix thead th:not(:first-child):not(.mm-sum):not(.mm-act) {
      text-align: right !important;
      padding-left: 0.2rem !important;
      padding-right: 0.55rem !important;
      box-sizing: border-box !important;
    }
    #divMatrixTableWrap table.div-month-matrix tbody td.mm-pay,
    #divMatrixTableWrap table.div-month-matrix tbody td.mm-empty,
    #divMatrixTableWrap table.div-month-matrix tr.mm-cash td:not(.mm-name):not(.mm-freq-h):not(.mm-freq):not(.mm-sum):not(.mm-act) {
      text-align: right !important;
      vertical-align: middle !important;
      padding-left: 0.2rem !important;
      padding-right: 0.55rem !important;
      box-sizing: border-box !important;
    }
    #divMatrixTableWrap table.div-month-matrix td.mm-pay .mm-dot,
    #divMatrixTableWrap table.div-month-matrix .mm-dot {
      display: inline-block !important;
      width: 0.55rem !important;
      height: 0.55rem !important;
      margin: 0 !important;
      margin-right: 0.05rem !important;
      float: none !important;
      vertical-align: middle;
    }
    #divMatrixTableWrap table.div-month-matrix .mm-bar-wrap {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-end !important;
      justify-content: flex-end !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      padding-right: 0.1rem !important;
      box-sizing: border-box !important;
    }
    #divMatrixTableWrap table.div-month-matrix .mm-bar-track {
      width: 0.85rem !important;
      max-width: 0.85rem !important;
      min-width: 0.85rem !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      align-self: flex-end !important;
    }

  

    /* Matrix: Monatskopf + Punkte zentriert (übereinander); Balken mittig unter dem Monat */
    #divMatrixTableWrap table.div-month-matrix thead th:not(:first-child):not(.mm-sum):not(.mm-act) {
      text-align: center !important;
      padding-left: 0.2rem !important;
      padding-right: 0.2rem !important;
    }
    #divMatrixTableWrap table.div-month-matrix tbody td.mm-pay,
    #divMatrixTableWrap table.div-month-matrix tbody td.mm-empty {
      text-align: center !important;
      padding-left: 0.2rem !important;
      padding-right: 0.2rem !important;
    }
    #divMatrixTableWrap table.div-month-matrix td.mm-pay .mm-dot,
    #divMatrixTableWrap table.div-month-matrix .mm-dot {
      display: block !important;
      margin-left: auto !important;
      margin-right: auto !important;
      float: none !important;
    }
    #divMatrixTableWrap table.div-month-matrix tr.mm-cash td:not(.mm-name):not(.mm-freq-h):not(.mm-freq):not(.mm-sum):not(.mm-act) {
      text-align: center !important;
      padding-left: 0.2rem !important;
      padding-right: 0.2rem !important;
    }
    #divMatrixTableWrap table.div-month-matrix .mm-bar-wrap {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-end !important;
      width: 100% !important;
      padding: 0 !important;
      margin: 0 auto !important;
    }
    #divMatrixTableWrap table.div-month-matrix .mm-bar-track {
      margin-left: auto !important;
      margin-right: auto !important;
      align-self: center !important;
    }

  
    /* Gleiche volle Breite der drei Tabellen-Container */
    #divMatrixTableWrap,
    #divTableWrap,
    .table-wrap.cost-desktop {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    #divMatrixTableWrap table.div-month-matrix,
    #divTableWrap table.div-table,
    .cost-desktop table.div-table {
      width: 100% !important;
      max-width: 100% !important;
      table-layout: fixed !important;
      box-sizing: border-box !important;
    }

  
    /* Einheitliches Padding der Monatsköpfe – Spalten fluchten */
    #divTableWrap table.div-table thead th:not(:first-child):not(:last-child):not(:nth-last-child(2)),
    .cost-desktop table.div-table thead th:not(:first-child):not(:nth-child(2)):not(:last-child):not(:nth-last-child(2)) {
      padding-left: 0.2rem !important;
      padding-right: 0.55rem !important;
      box-sizing: border-box !important;
    }

  
    /*
     * Monatsköpfe DEZ usw. in allen drei Tabellen rechtsbündig + gleiches Padding
     * → sichtbare Monatsnamen fluchten (nicht nur die Spaltenboxen).
     * Punkte/Balken in der Matrix an derselben rechten Kante.
     */
    #divMatrixTableWrap table.div-month-matrix thead th:not(:first-child):not(.mm-sum):not(.mm-act) {
      text-align: right !important;
      padding-left: 0.2rem !important;
      padding-right: 0.55rem !important;
      box-sizing: border-box !important;
    }
    #divTableWrap table.div-table thead th:not(:first-child):not(:last-child):not(:nth-last-child(2)),
    .cost-desktop table.div-table thead th:not(:first-child):not(:nth-child(2)):not(:last-child):not(:nth-last-child(2)) {
      text-align: right !important;
      padding-left: 0.2rem !important;
      padding-right: 0.55rem !important;
      box-sizing: border-box !important;
    }
    #divMatrixTableWrap table.div-month-matrix tbody td.mm-pay,
    #divMatrixTableWrap table.div-month-matrix tbody td.mm-empty,
    #divMatrixTableWrap table.div-month-matrix tr.mm-cash td:not(.mm-name):not(.mm-freq-h):not(.mm-freq):not(.mm-sum):not(.mm-act) {
      text-align: right !important;
      padding-left: 0.2rem !important;
      padding-right: 0.55rem !important;
      box-sizing: border-box !important;
    }
    #divMatrixTableWrap table.div-month-matrix td.mm-pay .mm-dot,
    #divMatrixTableWrap table.div-month-matrix .mm-dot {
      display: inline-block !important;
      margin-left: 0 !important;
      margin-right: 0.15rem !important;
      float: none !important;
      vertical-align: middle;
    }
    #divMatrixTableWrap table.div-month-matrix .mm-bar-wrap {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-end !important;
      justify-content: flex-end !important;
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
      box-sizing: border-box !important;
    }
    #divMatrixTableWrap table.div-month-matrix .mm-bar-track {
      margin-left: 0 !important;
      margin-right: 0.15rem !important;
      align-self: flex-end !important;
    }

  
    /* Abschnitts-Titel: hauchdünne Champagner-Linie */
    .section-header h2,
    .section > .section-header h2,
    section.section h2 {
      position: relative;
      display: inline-block;
      padding-bottom: 0.4rem;
      margin-bottom: 0.15rem;
    }
    .section-header h2::after,
    section.section h2::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      max-width: 4.5rem;
      height: 1px;
      background: linear-gradient(90deg, var(--accent-line), transparent 90%);
      opacity: 0.9;
      pointer-events: none;
    }
    /* Karten: etwas mehr Kontrast zur Seite */
    .kpi, #kpis .kpi, .kpi-grid > .kpi,
    .card, .panel, .growth-card, .sector-card {
      background: var(--bg-card) !important;
      border: 1px solid var(--border) !important;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28) !important;
    }
    #kpis .kpi {
      border-color: var(--accent-line) !important;
    }
    .table-wrap {
      background: rgba(26, 24, 21, 0.92) !important;
      border: 1px solid var(--border) !important;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
    }

  
    /* Tabellen-Header: einen Tick kontrastreicher */
    table thead th,
    .div-table thead th,
    #portfolioTable thead th,
    #divTableWrap table.div-table thead th,
    .cost-desktop table.div-table thead th,
    #divMatrixTableWrap table.div-month-matrix thead th,
    #lossTable thead th {
      color: var(--text) !important;
      font-weight: 650 !important;
      background: var(--bg-elevated) !important;
      border-bottom: 1px solid var(--accent-line) !important;
      letter-spacing: 0.03em;
    }
    table thead th,
    .div-table thead th {
      font-size: 0.78rem !important;
    }

  
    /* Sektoren: 3+3 Layout – etwas kompakter */
    @media (min-width: 901px) {
      .sector-grid-pies .sector-card,
      .sector-grid-info .sector-card {
        min-height: 17rem;
        padding: 0.9rem 0.85rem;
      }
      .sector-grid-pies .pie-wrap canvas {
        max-width: 170px;
        max-height: 170px;
      }
    }

  
    /* Abstand Donut-Reihe → Gewinn/Performance-Reihe */
    
    #panelAllokation {
      width: 100%;
      min-width: 0;
    }


    #panelAllokation .sector-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.85rem;
      align-items: stretch;
      width: 100%;
    }
    @media (max-width: 900px) {
      #panelAllokation .sector-grid {
        grid-template-columns: 1fr !important;
      }
    }

    #panelAllokation .sector-grid-pies {
      margin-bottom: 2.75rem !important;
      padding-bottom: 1rem !important;
      border-bottom: 1px solid rgba(196, 165, 116, 0.12);
    }
    #panelAllokation .sector-grid-info {
      margin-top: 0.35rem !important;
      padding-top: 0.35rem !important;
    }

  
    #exzahltage .next-div-strip {
      margin: 0 0 1.25rem;
    }
    #portfolio .growth-card {
      margin-top: 0.25rem;
    }

  




    #kpiCardValue .kpi-body-sub .sub {
      line-height: 1.45;
    }

  
    /* Jahresübersicht: Spaltenbreiten für Lesbarkeit */
    table.earnings-year-table {
      min-width: 1100px !important;
      table-layout: fixed !important;
    }
    table.earnings-year-table th.ey-year,
    table.earnings-year-table td.ey-year {
      width: 3.6rem !important;
      max-width: 3.6rem !important;
    }
    table.earnings-year-table th.ey-w-xs,
    table.earnings-year-table td.ey-w-xs {
      width: 2.6rem !important;
      max-width: 2.8rem !important;
      padding-left: 0.15rem !important;
      padding-right: 0.15rem !important;
      text-align: center !important;
    }
    table.earnings-year-table th.ey-w-pct,
    table.earnings-year-table td.ey-w-pct {
      width: 4.4rem !important;
      max-width: 4.8rem !important;
      padding-left: 0.2rem !important;
      padding-right: 0.25rem !important;
      white-space: nowrap;
    }
    table.earnings-year-table th.ey-w-land,
    table.earnings-year-table td.ey-w-land {
      width: 5.5rem !important;
      max-width: 6.2rem !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 0.78rem;
    }
    table.earnings-year-table th.ey-w-eur,
    table.earnings-year-table td.ey-w-eur {
      width: 5.8rem !important;
      min-width: 5.2rem;
      white-space: nowrap;
      padding-left: 0.25rem !important;
      padding-right: 0.35rem !important;
    }
    table.earnings-year-table th.ey-w-zins,
    table.earnings-year-table td.ey-w-zins {
      width: 5.5rem !important;
    }
    table.earnings-year-table thead th {
      padding-left: 0.25rem !important;
      padding-right: 0.3rem !important;
      font-size: 0.68rem !important;
    }
    table.earnings-year-table tbody td {
      font-size: 0.8rem;
      padding-top: 0.45rem;
      padding-bottom: 0.45rem;
    }
    #uebersicht .table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

  
    table.earnings-year-table td.ey-w-land {
      white-space: normal !important;
      vertical-align: middle;
      line-height: 1.25;
      overflow: visible !important;
      text-overflow: unset !important;
    }
    table.earnings-year-table .ey-land-stack {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.1rem;
    }
    table.earnings-year-table .ey-land-name {
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
    }
    table.earnings-year-table .ey-land-pct {
      font-size: 0.72rem;
      color: var(--text-muted);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

  
    #uebersicht {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
    #uebersicht .table-wrap,
    #uebersicht .earnings-year-table {
      display: block;
      visibility: visible;
    }
    #uebersicht table.earnings-year-table {
      display: table !important;
    }
    #uebersicht .div-year-tabs button.active {
      opacity: 1;
    }

  
    /* Jahresübersicht ohne Land – Spalten neu gewichtet */
    table.earnings-year-table {
      min-width: 1000px !important;
    }
    table.earnings-year-table th.ey-w-land,
    table.earnings-year-table td.ey-w-land {
      display: none !important;
      width: 0 !important;
    }
    table.earnings-year-table th.ey-w-eur,
    table.earnings-year-table td.ey-w-eur {
      width: 6.2rem !important;
      min-width: 5.5rem;
    }
    table.earnings-year-table th.ey-w-pct,
    table.earnings-year-table td.ey-w-pct {
      width: 4.8rem !important;
    }
    table.earnings-year-table th.ey-w-xs,
    table.earnings-year-table td.ey-w-xs {
      width: 2.5rem !important;
      max-width: 2.7rem !important;
    }

  
    /* Abstand IRR → Pos./Sek. */
    table.earnings-year-table th.ey-w-pct,
    table.earnings-year-table td.ey-w-pct {
      width: 5rem !important;
      max-width: 5.2rem !important;
      padding-right: 0.55rem !important;
    }
    table.earnings-year-table th.ey-w-xs,
    table.earnings-year-table td.ey-w-xs {
      width: 3.6rem !important;
      max-width: 3.8rem !important;
      min-width: 3.4rem !important;
      padding-left: 0.55rem !important;
      padding-right: 0.45rem !important;
      text-align: center !important;
    }
    /* erste xs-Spalte (Pos) klar absetzen */
    table.earnings-year-table thead th.ey-w-xs:nth-of-type(6),
    table.earnings-year-table tbody td.ey-w-xs:first-of-type {
      padding-left: 0.65rem !important;
    }

  
    /* ===== Matrix Final Override (Desktop stabil, zentriert) ===== */
    @media (min-width: 901px) {
      #panelDivMatrix.is-on #divMatrixTableWrap {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
      }
      #panelDivMatrix.is-on table.div-month-matrix {
        table-layout: fixed !important;
        width: 100% !important;
        min-width: 640px !important;
        max-width: 100% !important;
        border-collapse: collapse !important;
      }
      #panelDivMatrix.is-on table.div-month-matrix th.mm-name,
      #panelDivMatrix.is-on table.div-month-matrix td.mm-name {
        width: 11rem !important;
        min-width: 11rem !important;
        max-width: 14rem !important;
        text-align: left !important;
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--bg-card);
      }
      #panelDivMatrix.is-on table.div-month-matrix thead th:not(.mm-name):not(.mm-freq-h):not(.mm-freq):not(.mm-sum):not(.mm-act),
      #panelDivMatrix.is-on table.div-month-matrix tbody td.mm-pay,
      #panelDivMatrix.is-on table.div-month-matrix tbody td.mm-empty,
      #panelDivMatrix.is-on table.div-month-matrix tr.mm-cash td:not(.mm-name):not(.mm-freq-h):not(.mm-freq):not(.mm-sum):not(.mm-act) {
        text-align: center !important;
        padding-left: 0.15rem !important;
        padding-right: 0.15rem !important;
        vertical-align: middle !important;
      }
      #panelDivMatrix.is-on table.div-month-matrix th.mm-sum,
      #panelDivMatrix.is-on table.div-month-matrix td.mm-sum {
        width: 5.5rem !important;
        min-width: 5.5rem !important;
        text-align: center !important;
      }
      #panelDivMatrix.is-on table.div-month-matrix td.mm-pay .mm-dot {
        display: inline-block !important;
        margin: 0 auto !important;
      }
      #panelDivMatrix.is-on table.div-month-matrix .mm-bar-wrap {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
      }
      #panelDivMatrix.is-on #matrixMobileHint {
        display: none !important;
      }
    }
    @media (max-width: 900px) {
      #panelDivMatrix.is-on #divMatrixTableWrap,
      #panelDivMatrix.is-on table.div-month-matrix,
      #panelDivMatrix.is-on .div-desktop {
        display: none !important;
      }
      #panelDivMatrix.is-on #matrixMobileHint {
        display: block !important;
      }
    }

  
    /* ===== Matrix Cashflow-Balken: zentriert unter Monatsnamen ===== */
    #divMatrixTableWrap table.div-month-matrix thead th:not(.mm-name):not(.mm-freq-h):not(.mm-freq):not(.mm-sum):not(.mm-act) {
      text-align: center !important;
      padding-left: 0.15rem !important;
      padding-right: 0.15rem !important;
    }
    #divMatrixTableWrap table.div-month-matrix tbody td.mm-pay,
    #divMatrixTableWrap table.div-month-matrix tbody td.mm-empty {
      text-align: center !important;
      padding-left: 0.15rem !important;
      padding-right: 0.15rem !important;
    }
    #divMatrixTableWrap table.div-month-matrix td.mm-pay .mm-dot {
      display: inline-block !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    #divMatrixTableWrap table.div-month-matrix tr.mm-cash td:not(.mm-name):not(.mm-freq-h):not(.mm-freq):not(.mm-sum):not(.mm-act) {
      text-align: center !important;
      vertical-align: bottom !important;
      padding-left: 0.15rem !important;
      padding-right: 0.15rem !important;
    }
    #divMatrixTableWrap table.div-month-matrix .mm-bar-wrap {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-end !important;
      width: 100% !important;
      min-height: 1.75rem !important;
      padding: 0 !important;
      margin: 0 auto !important;
    }
    #divMatrixTableWrap table.div-month-matrix .mm-bar-track {
      width: 0.85rem !important;
      max-width: 0.85rem !important;
      min-width: 0.85rem !important;
      height: 1.5rem !important;
      margin-left: auto !important;
      margin-right: auto !important;
      align-self: center !important;
    }

  
    /* Sektor-Selects: dunkler Hintergrund, lesbar (kein Weiß) */
    select.cell,
    select.wl-input,
    .sector-badge select,
    #filterBranche,
    #filterWatchBranche,
    #filterDivBranche,
    #filterCostBranche,
    .portfolio-toolbar select,
    select {
      background-color: var(--bg-elevated) !important;
      color: var(--text) !important;
      border-color: var(--border);
      color-scheme: dark;
    }
    select.cell option,
    select.wl-input option,
    .sector-badge select option,
    #filterBranche option,
    #filterWatchBranche option,
    #filterDivBranche option,
    #filterCostBranche option,
    .portfolio-toolbar select option,
    select option {
      background-color: #24211d !important;
      color: #f5f0e8 !important;
    }
    /* Inline-Styles transparent überschreiben, wenn Select fokussiert/offen */
    select.cell:focus,
    select.wl-input:focus,
    select:focus {
      background-color: var(--bg-elevated) !important;
      color: var(--text) !important;
    }

  
    th[data-sort="branche"],
    td .branche-with-dot,
    #portfolioTable td:nth-child(3) {
      min-width: 10rem;
    }
  
    /* Portfolio: stabile Spalten, kein Überlappen */
    #portfolioTable {
      table-layout: fixed !important;
      width: 100% !important;
      min-width: 1480px !important;
      border-collapse: collapse !important;
    }
    #portfolioTable th,
    #portfolioTable td {
      box-sizing: border-box !important;
      vertical-align: middle !important;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* 1 Aktie */
    #portfolioTable th:nth-child(1),
    #portfolioTableBody td:nth-child(1) {
      width: 11rem !important;
      min-width: 11rem !important;
      max-width: 12rem !important;
    }
    /* 2 SP */
    #portfolioTable th:nth-child(2),
    #portfolioTableBody td:nth-child(2) {
      width: 2.5rem !important;
      min-width: 2.5rem !important;
      max-width: 2.75rem !important;
    }
    /* 3 Sektor */
    #portfolioTable th:nth-child(3),
    #portfolioTableBody td:nth-child(3) {
      width: 11rem !important;
      min-width: 11rem !important;
      max-width: 12rem !important;
    }
    #portfolioTable select.cell[data-field="branche"],
    #portfolioTable .branche-with-dot select.cell {
      min-width: 0 !important;
      max-width: 100% !important;
      width: 100% !important;
    }
    /* 4 Ticker */
    #portfolioTable th:nth-child(4),
    #portfolioTableBody td:nth-child(4) {
      width: 5.5rem !important;
      min-width: 5.5rem !important;
    }
    /* 5 ISIN */
    #portfolioTable th:nth-child(5),
    #portfolioTableBody td:nth-child(5) {
      width: 8rem !important;
      min-width: 7.5rem !important;
    }
    /* 6 Kaufdatum */
    #portfolioTable th:nth-child(6),
    #portfolioTableBody td:nth-child(6) {
      width: 7rem !important;
      min-width: 6.5rem !important;
    }
    /* 7 Anteile */
    #portfolioTable th:nth-child(7),
    #portfolioTableBody td:nth-child(7) {
      width: 5.5rem !important;
      min-width: 5rem !important;
    }
    /* 8 Kaufpreis */
    #portfolioTable th:nth-child(8),
    #portfolioTableBody td:nth-child(8) {
      width: 5.5rem !important;
      min-width: 5rem !important;
    }
    /* 9 Gesamtpreis */
    #portfolioTable th:nth-child(9),
    #portfolioTableBody td:nth-child(9) {
      width: 6rem !important;
      min-width: 5.5rem !important;
    }
    /* 10 Kurs (+ Meta darunter, nur in dieser Zelle) */
    #portfolioTable th:nth-child(10),
    #portfolioTableBody td:nth-child(10) {
      width: 7.5rem !important;
      min-width: 7rem !important;
      overflow: hidden !important;
    }
    #portfolioTable .kurs-cell-wrap {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 0.15rem !important;
      min-width: 0 !important;
      max-width: 100% !important;
      flex-wrap: nowrap !important;
    }
    #portfolioTable .kurs-cell-wrap input.cell[data-field="kurs"] {
      width: 100% !important;
      min-width: 0 !important;
      flex: none !important;
    }
    #portfolioTable .kurs-cell-wrap .kurs-meta {
      display: block !important;
      flex: none !important;
      max-width: 100% !important;
      width: 100% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      font-size: 0.62rem !important;
      line-height: 1.2 !important;
      margin: 0 !important;
    }
    /* 11 Akt. Wert */
    #portfolioTable th:nth-child(11),
    #portfolioTableBody td:nth-child(11) {
      width: 6rem !important;
      min-width: 5.5rem !important;
    }

  
    /* Watchlist: Sortierung mit Zeigerhand */
    #watchlistTable thead th.sortable {
      cursor: pointer !important;
      user-select: none;
      white-space: nowrap;
    }
    #watchlistTable thead th.sortable:hover {
      color: var(--accent);
    }
    #watchlistTable thead th.sortable .sort-ind {
      font-size: 0.7rem;
      opacity: 0.7;
      margin-left: 0.25rem;
      pointer-events: none;
    }
    #watchlistTable thead th.sortable:hover .sort-ind {
      opacity: 1;
    }

  
    /* Watchlist: Kurs + Quellen-Hinweis wie Portfolio */
    #watchlistTable td.wl-kurs-cell {
      vertical-align: middle;
      white-space: nowrap;
    }
    #watchlistTable .wl-kurs-val {
      font-variant-numeric: tabular-nums;
      font-weight: 600;
      display: inline-block;
      padding: 0.15rem 0.4rem;
      border-radius: 6px;
      border: 1px solid transparent;
    }
    /* Kurs ≤ Alarm: klarer Hinweis auf interessanten Einstieg */
    #watchlistTable tr.wl-row-alarm {
      background: rgba(16, 185, 129, 0.07);
    }
    #watchlistTable tr.wl-row-alarm td {
      border-bottom-color: rgba(16, 185, 129, 0.25);
    }
    #watchlistTable td.wl-kurs-cell.kurs-le-alarm .wl-kurs-val,
    #watchlistTable .wl-kurs-val.kurs-le-alarm {
      border: 1px solid rgba(16, 185, 129, 0.55) !important;
      box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2) !important;
      color: #6ee7b7 !important;
      font-weight: 700;
      background: rgba(16, 185, 129, 0.12);
    }
    #watchlistTable td.wl-alarm-hit input {
      border-color: rgba(16, 185, 129, 0.5) !important;
      background: rgba(16, 185, 129, 0.1) !important;
      color: #6ee7b7 !important;
      font-weight: 600;
    }
    .portfolio-card.wl-card-alarm {
      background: rgba(16, 185, 129, 0.08);
      box-shadow: inset 3px 0 0 #10b981;
    }
    .portfolio-card .pc-row.kurs-le-alarm strong {
      border: 1px solid rgba(16, 185, 129, 0.5);
      box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2);
      border-radius: 6px;
      padding: 0.1rem 0.4rem;
      font-weight: 700;
      color: #6ee7b7;
      background: rgba(16, 185, 129, 0.12);
    }
    #watchlistTable .kurs-meta {
      display: block;
      font-size: 0.68rem;
      color: var(--text-muted);
      font-weight: 500;
      margin-top: 0.1rem;
      line-height: 1.2;
    }

  
    /* Sticky Aktie-Spalte: kein Durchscheinen */
    #portfolioTableBody td:nth-child(1),
    #portfolioBody td:nth-child(1) {
      background: var(--bg-card) !important;
    }
    #portfolioTableBody tr:nth-child(even) td:nth-child(1) {
      background: #1c1a17 !important;
    }

  
    /* Watchlist: PR / TR */
    #watchlistTable td.wl-pr-ok input,
    #watchlistTable td.wl-pr-ok {
      color: #4ade80 !important;
    }
    #watchlistTable td.wl-pr-ok input {
      font-weight: 700;
    }
    #watchlistTable td.wl-pr-high input,
    #watchlistTable td.wl-pr-high {
      color: #f87171 !important;
    }
    #watchlistTable td.wl-pr-high input {
      font-weight: 700;
    }
    #watchlistTable td.wl-tr-cell {
      white-space: nowrap;
      vertical-align: middle;
    }
    #watchlistTable .wl-tr-badge {
      display: inline-block;
      margin-left: 0.25rem;
      font-size: 0.68rem;
      color: var(--text-muted);
      font-weight: 600;
    }

  
    /* Watchlist: Spalten Ticker/ISIN abwählbar, Tabelle scrollbar, Notiz mit Umbruch */
    #watchlistTable.col-hide-ticker th.col-ticker,
    #watchlistTable.col-hide-ticker td.col-ticker {
      display: none !important;
    }
    #watchlistTable.col-hide-isin th.col-isin,
    #watchlistTable.col-hide-isin td.col-isin {
      display: none !important;
    }
    #divMatrixTableWrap,
    #watchlistTable {
      /* placeholder */
    }
    .div-matrix-wrap,
    #panelWatchlist .table-wrap {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
      max-width: 100%;
    }
    #watchlistTable {
      table-layout: auto !important;
      width: max-content !important;
      min-width: 100%;
      border-collapse: collapse;
    }
    #watchlistTable th,
    #watchlistTable td {
      vertical-align: top;
      box-sizing: border-box;
    }
    #watchlistTable td.wl-note-cell,
    #watchlistTable th.wl-note-h {
      min-width: 12rem;
      max-width: 22rem;
      white-space: normal !important;
    }
    #watchlistTable td.wl-note-cell textarea.wl-note {
      width: 100%;
      min-width: 11rem;
      min-height: 2.4rem;
      max-height: 8rem;
      resize: vertical;
      white-space: pre-wrap;
      word-break: break-word;
      background: transparent;
      border: 1px solid transparent;
      color: var(--text);
      font-family: inherit;
      font-size: 0.8rem;
      line-height: 1.35;
      padding: 0.25rem 0.35rem;
      border-radius: 6px;
      box-sizing: border-box;
    }
    #watchlistTable td.wl-note-cell textarea.wl-note:focus {
      border-color: var(--accent);
      background: var(--bg-elevated);
      outline: none;
    }

  
    /* Portfolio / Watchlist TR-Spalte – feste Raster: Zahl | Badge */
    #portfolioTable th.col-tr,
    #portfolioTable td.col-tr,
    #watchlistTable th.col-tr,
    #watchlistTable td.wl-tr-cell,
    #watchlistTable td.col-tr {
      min-width: 10.5rem !important;
      width: 10.5rem !important;
      max-width: 11.5rem !important;
      white-space: nowrap !important;
      vertical-align: middle !important;
      overflow: hidden !important;
      text-align: left !important;
    }
    .tr-cell-inner {
      display: grid !important;
      grid-template-columns: 2.75rem minmax(0, 1fr);
      align-items: center;
      column-gap: 0.4rem;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    input.cell.tr-years,
    #portfolioTable td.col-tr input.cell.tr-years,
    #watchlistTable input.cell.tr-years,
    #watchlistTable td.wl-tr-cell input.cell.tr-years {
      display: block !important;
      width: 2.75rem !important;
      min-width: 2.75rem !important;
      max-width: 2.75rem !important;
      box-sizing: border-box !important;
      text-align: right !important;
      font-weight: 700 !important;
      font-variant-numeric: tabular-nums !important;
      font-family: var(--font-mono) !important;
      font-size: 0.8rem !important;
      padding: 0.2rem 0.2rem !important;
      margin: 0 !important;
      justify-self: stretch;
    }
    .tr-badge {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      gap: 0.12rem;
      width: 6.4rem !important;
      min-width: 6.4rem !important;
      max-width: 6.4rem !important;
      box-sizing: border-box;
      font-size: 0.62rem !important;
      font-weight: 700;
      letter-spacing: 0.01em;
      line-height: 1.15;
      padding: 0.2rem 0.35rem !important;
      border-radius: 999px;
      white-space: nowrap;
      border: 1px solid transparent;
      overflow: hidden;
      text-overflow: ellipsis;
      justify-self: start;
    }
    .tr-badge.tr-king {
      color: #1a1815;
      background: linear-gradient(135deg, #e8d5b5 0%, #c4a574 55%, #a8895a 100%);
      border-color: rgba(196, 165, 116, 0.65);
      box-shadow: 0 0 0 1px rgba(196, 165, 116, 0.15);
    }
    .tr-badge.tr-aristocrat {
      color: #e8d5b5;
      background: rgba(196, 165, 116, 0.16);
      border-color: rgba(196, 165, 116, 0.45);
    }
    .tr-badge.tr-contender {
      color: var(--petrol-400);
      background: var(--petrol-soft);
      border-color: var(--petrol-line);
    }
    .tr-badge.tr-challenger {
      color: var(--silver);
      background: var(--silver-soft);
      border-color: var(--silver-line);
    }
    .tr-badge.tr-starter {
      color: var(--text-muted);
      background: rgba(148, 163, 184, 0.08);
      border-color: rgba(148, 163, 184, 0.22);
      font-weight: 600;
    }
    .tr-badge.tr-none {
      color: var(--text-muted);
      background: transparent;
      border-color: transparent;
      opacity: 0.5;
      font-weight: 500;
      box-shadow: none;
    }
    #watchlistTable .wl-tr-badge { display: none !important; }

    #portfolioTable.col-hide-tr th.col-tr,
    #portfolioTable.col-hide-tr td.col-tr {
      display: none !important;
    }
    #portfolioTable.col-hide-pa th.col-pa,
    #portfolioTable.col-hide-pa td.col-pa {
      display: none !important;
    }
    #portfolioTable.col-hide-weight th.col-weight,
    #portfolioTable.col-hide-weight td.col-weight {
      display: none !important;
    }
    #portfolioTable.col-hide-gesamtpreis th.col-gesamtpreis,
    #portfolioTable.col-hide-gesamtpreis td.col-gesamtpreis {
      display: none !important;
    }
  
    

    /* Chart-Button in Watchlist */
    .wl-chart {
      background: var(--bg-elevated, #1e293b);
      border: 1px solid var(--border, #334155);
      color: var(--text, #e2e8f0);
      padding: 0.2rem 0.4rem;
      min-width: 1.8rem;
    }
    .wl-chart:hover {
      background: #0ea5e9;
      border-color: #0ea5e9;
      color: #fff;
    }
    #watchlistTable .col-act { width: 4.5rem; }

  
    /* TradingView Chart Modal */
    .tv-modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    .tv-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.65);
      backdrop-filter: blur(4px);
    }
    .tv-modal-panel {
      position: relative;
      background: var(--bg-elevated, #0f172a);
      border: 1px solid var(--border, #334155);
      border-radius: 12px;
      width: min(1100px, 96vw);
      height: min(70vh, 640px);
      display: flex;
      flex-direction: column;
      box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
      overflow: hidden;
    }
    .tv-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.6rem 1rem;
      border-bottom: 1px solid var(--border, #334155);
      background: var(--bg, #020617);
      font-weight: 600;
      font-size: 0.95rem;
    }
    .tv-modal-actions {
      display: flex;
      gap: 0.4rem;
      align-items: center;
    }
    .tv-modal-actions .btn {
      min-width: 2rem;
      padding: 0.25rem 0.5rem;
    }
    .tv-modal-body {
      flex: 1;
      min-height: 0;
      background: #131722;
    }
    @media (max-width: 640px) {
      .tv-modal-panel {
        width: 100%;
        height: 80vh;
        border-radius: 10px 10px 0 0;
        align-self: flex-end;
      }
    }

    /* Matrix: keine leere Aktions-Spalte mehr */
    table.div-month-matrix col.col-act,
    table.div-month-matrix th.mm-act,
    table.div-month-matrix td.mm-act { display: none !important; width: 0 !important; }
    table.div-month-matrix td.mm-freq {
      border-right: 1px solid rgba(148, 163, 184, 0.2);
    }


/* ===== Matrix Final: Name | Jan–Dez | Summe ===== */
#divMatrixTableWrap table.div-month-matrix,
table.div-month-matrix {
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
  min-width: 640px !important;
}

table.div-month-matrix col.col-name { width: 11rem !important; }
table.div-month-matrix col.col-month { width: auto !important; min-width: 2.75rem !important; }
table.div-month-matrix col.col-sum { width: 6.5rem !important; }

/* Name – Strich vor Januar */
#divMatrixTableWrap table.div-month-matrix th.mm-name,
#divMatrixTableWrap table.div-month-matrix td.mm-name {
  width: 11rem !important;
  min-width: 11rem !important;
  max-width: 12rem !important;
  text-align: left !important;
  box-sizing: border-box !important;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-card);
  border-right: 1px solid rgba(148, 163, 184, 0.35) !important;
}

#divMatrixTableWrap table.div-month-matrix th.mm-name {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--text-muted) !important;
  padding: 0.45rem 0.55rem !important;
}

/* Monate – gleiches Raster/Padding wie Kosten */
#divMatrixTableWrap table.div-month-matrix thead th:not(.mm-name):not(.mm-sum),
#divMatrixTableWrap table.div-month-matrix tbody td.mm-pay,
#divMatrixTableWrap table.div-month-matrix tbody td.mm-empty,
#divMatrixTableWrap table.div-month-matrix tr.mm-cash td:not(.mm-name):not(.mm-sum) {
  text-align: center !important;
  vertical-align: middle !important;
  min-width: 2.75rem !important;
  padding: 0.4rem 0.25rem !important;
  box-sizing: border-box !important;
}

#divMatrixTableWrap table.div-month-matrix thead th:not(.mm-name):not(.mm-sum) {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--text-muted) !important;
}

/* Summe: Wert + Balken zentriert in der Spalte */
#divMatrixTableWrap table.div-month-matrix th.mm-sum {
  width: 6.5rem !important;
  min-width: 6.5rem !important;
  text-align: center !important;
  padding: 0.45rem 0.4rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--text-muted) !important;
  border-left: 1px solid rgba(148, 163, 184, 0.35) !important;
  box-sizing: border-box !important;
}
#divMatrixTableWrap table.div-month-matrix td.mm-sum {
  width: 6.5rem !important;
  min-width: 6.5rem !important;
  text-align: center !important;
  padding: 0.3rem 0.4rem !important;
  border-left: 1px solid rgba(148, 163, 184, 0.35) !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

#divMatrixTableWrap table.div-month-matrix .mm-row-sum {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.15rem !important;
  width: 100% !important;
  margin: 0 auto !important;
}
#divMatrixTableWrap table.div-month-matrix .mm-row-sum-val {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  font-family: var(--font-mono), monospace !important;
  color: var(--text) !important;
  text-align: center !important;
  width: 100% !important;
}
#divMatrixTableWrap table.div-month-matrix .mm-row-sum-track {
  height: 3px !important;
  border-radius: 2px !important;
  background: rgba(148, 163, 184, 0.12) !important;
  overflow: hidden !important;
  width: 3.6rem !important;
  max-width: 3.6rem !important;
  margin: 0 auto !important;
  align-self: center !important;
}
#divMatrixTableWrap table.div-month-matrix .mm-row-sum-fill {
  height: 100% !important;
  border-radius: 2px !important;
  opacity: 0.9 !important;
  min-width: 0 !important;
}

/* Quartals-Trenner */
table.div-month-matrix th.mm-q-end,
table.div-month-matrix td.mm-q-end,
#divMatrixTableWrap table.div-month-matrix th.mm-q-end,
#divMatrixTableWrap table.div-month-matrix td.mm-q-end {
  border-right: 1px solid rgba(148, 163, 184, 0.35) !important;
}

/* Cashflow: etwas höher / Balken etwas größer */
#divMatrixTableWrap table.div-month-matrix tr.mm-cash td {
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
  vertical-align: middle !important;
  border-bottom: none !important;
  height: auto !important;
}
#divMatrixTableWrap table.div-month-matrix tr.mm-cash td.mm-name {
  color: var(--accent);
  font-weight: 650;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#divMatrixTableWrap table.div-month-matrix .mm-bar-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-height: 1.85rem !important;
  height: 1.85rem !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
#divMatrixTableWrap table.div-month-matrix .mm-bar-track {
  width: 0.85rem !important;
  max-width: 0.85rem !important;
  min-width: 0.85rem !important;
  height: 1.65rem !important;
  margin: 0 auto !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  background: rgba(148, 163, 184, 0.12) !important;
}
#divMatrixTableWrap table.div-month-matrix .mm-bar-fill {
  width: 100% !important;
  border-radius: 3px 3px 0 0 !important;
}
#divMatrixTableWrap table.div-month-matrix tr.mm-cash .mm-cash-sum {
  font-size: 0 !important;
  color: transparent !important;
  padding: 0 !important;
}
#divMatrixTableWrap table.div-month-matrix tbody tr.mm-cash + tr {
  display: none !important;
}
#divMatrixTableWrap {
  padding-bottom: 0 !important;
}
#divMatrixTableWrap table.div-month-matrix {
  margin-bottom: 0 !important;
}

/* Alte Spacer/Freq ausblenden falls noch im DOM */
#divMatrixTableWrap table.div-month-matrix th.mm-typ-spacer,
#divMatrixTableWrap table.div-month-matrix td.mm-typ-spacer,
#divMatrixTableWrap table.div-month-matrix th.mm-freq-h,
#divMatrixTableWrap table.div-month-matrix td.mm-freq {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  border: none !important;
}


/* ========== Dividendenliste Screener (Watchlist) ========== */
.dl-accordion {
  margin-top: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
}
.dl-accordion-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  background: transparent;
  border: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.dl-accordion-toggle:hover { background: var(--bg-soft, rgba(255,255,255,0.03)); }
.dl-toggle-label { flex: 0 0 auto; }
.dl-toggle-meta {
  flex: 1;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}
.dl-caret {
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.dl-accordion-toggle[aria-expanded="true"] .dl-caret { transform: rotate(180deg); }

.dl-body {
  padding: 0 1rem 1.1rem;
  border-top: 1px solid var(--border);
}
.dl-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.9rem 0 0.6rem;
}
.dl-search {
  flex: 1;
  min-width: 140px;
  font: inherit;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg, #12181f);
  color: var(--text);
}
.dl-toolbar select,
.dl-toolbar input[type="number"] {
  font: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg, #12181f);
  color: var(--text);
}
.dl-yl { font-size: 0.85rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.3rem; }
.dl-toolbar .btn.is-on {
  background: var(--accent, #3b82f6);
  color: #fff;
  border-color: transparent;
}

.dl-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.dl-stats b { color: var(--text); font-weight: 600; }

.dl-table-wrap { max-height: 62vh; overflow: auto; }
.dl-table { min-width: 980px; }
.dl-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.dl-table th.l, .dl-table td.l { text-align: left; }
.dl-table th.s::after { content: " ▲"; font-size: 0.7em; }
.dl-table th.s.d::after { content: " ▼"; }
.dl-table .sym { font-weight: 600; }
.dl-table .co {
  font-size: 0.75rem;
  color: var(--text-muted);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-table tr.dl-r { cursor: pointer; }
.dl-table tr.dl-r:hover td { background: var(--bg-soft, rgba(255,255,255,0.03)); }
.dl-table .t {
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--bg-soft, rgba(255,255,255,0.06));
}
.dl-table .t.King, .dl-table .t.Champion {
  background: var(--text);
  color: var(--bg, #12181f);
}
.dl-table .up { color: var(--pos, #1f7a5a); font-weight: 600; }
.dl-table .neg { color: var(--neg, #b5443a); }
.dl-table .sL { background: #1f7a5a; color: #fff; font-weight: 600; }
.dl-table .sS { background: #b5443a; color: #fff; font-weight: 600; }
.dl-table .mut { color: var(--text-muted); }
.dl-table .col-act { white-space: nowrap; }
.dl-table .col-act .btn { padding: 0.2rem 0.45rem; font-size: 0.72rem; }

.dl-det td {
  background: var(--bg-soft, rgba(255,255,255,0.03));
  text-align: left;
  white-space: normal;
  padding: 0.9rem 1rem;
}
.dl-det-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.55rem;
  margin-top: 0.6rem;
  font-size: 0.85rem;
}
.dl-det-l { display: block; font-size: 0.72rem; color: var(--text-muted); }
.dl-det-v { font-weight: 500; }
.dl-det-actions { margin-top: 0.75rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }

.dl-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0.7rem 0 0;
}


/* Signal-Spalte breiter, Chart-Button */
.dl-table th[data-k="sg"],
.dl-table td:nth-child(14) {
  min-width: 5.5rem;
  white-space: nowrap;
}
.dl-table .t.sL,
.dl-table .t.sS {
  display: inline-block;
  min-width: 4.2rem;
  text-align: center;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
}
.dl-table .col-act {
  width: 2.8rem;
  text-align: center;
}
.dl-table .dl-chart {
  padding: 0.25rem 0.45rem;
  font-size: 0.9rem;
}