/* ============================================================
   BÖRSENSTRATEGIE — eigener Reiter unter Finanzen, komplett eigener
   boe*-Namespace. Wiederverwendet bewusst bereits bestehende generische
   Klassen (.card/.field/.btn/.tag/.pdpTabs/.pdpTab/.pdpSection/
   .tableWrap/.itemRow/.emptyState/.prioDot), nur wirklich neue Bausteine
   (Balkenliste mit Live-Breite, Ziel/Ist-Regionsbalken, Tranchen-
   Kursanzeige, Markt-Status-Punkt) bekommen eigene Klassen.
   ============================================================ */
      .ghostField {
        border: 0;
        background: none;
        color: var(--ink);
        font: inherit;
        font-size: var(--fs-sm);
        padding: 0;
        width: 100%;
        resize: vertical;
      }
      .ghostField.strong {
        font-weight: 600;
      }
      .ghostField.dim {
        color: var(--ink-3);
      }
      .ghostField.done {
        text-decoration: line-through;
        color: var(--ink-3);
      }
      .ghostField[readonly] {
        cursor: default;
      }
      .boeDrittel {
        display: flex;
        gap: var(--s3);
        flex-wrap: wrap;
      }
      .boeDritt {
        padding: var(--s4);
        flex: 1;
        min-width: 180px;
        margin-bottom: 0;
      }
      .gebot {
        display: flex;
        gap: var(--s3);
        margin-bottom: var(--s4);
      }
      .gebotNr {
        flex-shrink: 0;
        width: 20px;
      }
      .gebotBody {
        flex: 1;
      }
      .chipX {
        border: 0;
        background: none;
        color: var(--ink-3);
        cursor: pointer;
        padding: 0;
        display: inline-flex;
      }
      .chipX:hover {
        color: var(--danger);
      }
      .tHit {
        color: var(--warning);
        font-weight: 600;
      }
      .pos {
        color: var(--success);
      }
      .boeEditBar {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 14px;
      }
      #boePanel-strategie:not(.boeEditMode) .boeEditOnly {
        display: none !important;
      }
      #boePanel-strategie:not(.boeEditMode) .boeBarTop input[type="text"],
      #boePanel-strategie:not(.boeEditMode) .boeBarTop input[type="number"] {
        pointer-events: none;
      }
      .boeBarRow {
        margin-bottom: 14px;
      }
      .boeBarRow:last-child {
        margin-bottom: 0;
      }
      .boeBarTop {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 5px;
      }
      .boeBarTop input[type="text"] {
        flex: 1;
        font-size: var(--fs-sm);
      }
      .boeBarTop .boeBarVal {
        font-size: var(--fs-sm);
        color: var(--primary);
        white-space: nowrap;
        width: 90px;
        text-align: right;
      }
      .boeBarTrack {
        height: 6px;
        border-radius: var(--r-sm);
        background: var(--surface-2);
        overflow: hidden;
      }
      .boeBarFill {
        height: 100%;
        border-radius: var(--r-sm);
        background: var(--a-vermoegen);
      }
      .boeChipRow {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
      }
      
      
      
      
      
      
      
      
      
      .boeBarFill.over {
        background: var(--danger);
      }
      /* Dashboard-Tab: Kategorie-Limit-Karten (Ist/Limit/Titel/Balken/Badge)
   und die sortierten Regionen-/Sektoren-Abweichungstabellen. */
      .boeLimitGrid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 12px;
      }
      .boeLimitCard {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        padding: 14px;
      }
      .boeLimitCard .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
      }
      .boeLimitCard .name {
        font-weight: 600;
        font-size: var(--fs-sm);
      }
      .boeLimitCard .figures {
        font-size: var(--fs-xs);
        color: var(--ink-3);
        margin-bottom: 8px;
      }
      .badge.boeOk {
        background: var(--success-tint);
        color: var(--success);
      }
      .badge.boeBad {
        background: var(--danger-tint);
        color: var(--danger);
      }
      #view-boerse .pdpTabs,
      #view-habitloop .pdpTabs {
        flex-wrap: wrap;
      }
      .boeTrancheCell label {
        font-size: var(--fs-xs);
        color: var(--ink-3);
        display: inline-flex;
        align-items: center;
        gap: 3px;
        margin-right: 8px;
        white-space: nowrap;
      }
      .boeTranchePrices {
        font-size: var(--fs-xs);
        line-height: 1.7;
        white-space: nowrap;
      }
      .boeTranchePrices .row {
        display: flex;
        justify-content: space-between;
        gap: 10px;
      }
      .boeTranchePrices .row span:first-child {
        color: var(--ink-3);
      }
      .boeIndicator {
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        padding: 14px 16px;
        margin-bottom: 14px;
      }
      .boeIndicator:last-child {
        margin-bottom: 0;
      }
      .boeIndicator .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        font-size: var(--fs-sm);
        font-weight: 600;
      }
      .boeIndicator .top .prob {
        font-weight: 400;
        color: var(--primary);
        font-size: var(--fs-xs);
      }
      .boeIndicator .status {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: var(--fs-xs);
        margin-top: 8px;
      }
      .boeStatusDot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--border);
        flex-shrink: 0;
      }
      .boeStatusDot.green {
        background: var(--success);
      }
      .boeStatusDot.red {
        background: var(--danger);
      }
      .boeYearRow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 16px;
        flex-wrap: wrap;
        font-size: var(--fs-sm);
      }
      .boeYearRow .yr {
        font-weight: 600;
        color: var(--primary);
      }