/* ---------- Finanzen: KPI tiles ---------- */
      .statTile {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        padding: 18px 20px;
      }
      .statTile .label {
        color: var(--ink-3);
        font-size: var(--fs-sm);
        margin-bottom: 6px;
      }
      .statTile .value {
        font-size: var(--fs-2xl);
        font-weight: 600;
      }
      .statTile .sub {
        font-size: var(--fs-xs);
        color: var(--ink-3);
        margin-top: 6px;
      }

      /* ---------- Ampelsystem priority dots ---------- */
      .prioDot {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 8px;
        vertical-align: middle;
      }
      .prioDot.rot {
        background: var(--danger);
      }
      .prioDot.gelb {
        background: var(--warning);
      }
      .prioDot.gruen {
        background: var(--success);
      }
      .prioDot.grau {
        background: var(--ink-3);
      }

      /* ---------- Projekte: Statusgruppen mit Zeilenliste und Detailseite.
   Gruppenköpfe nutzen .jMonth, Zeilen .list/.row, Fortschritt .progress. ---------- */
      .projStatus {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 24px;
        padding: 0 10px;
        border-radius: 99px;
        font-size: var(--fs-xs);
        font-weight: 500;
        white-space: nowrap;
        color: var(--sc);
        background: color-mix(in srgb, var(--sc) 15%, transparent);
      }
      .projStatus::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
      }
      .projDot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--sc);
        flex-shrink: 0;
      }
      .jMonth h3 .projDot {
        margin: 0 2px;
      }
      .projGroup + .projGroup {
        margin-top: var(--s2);
      }
      .projGroup > .list + .subHead,
      .projGroup > .subHead + .list {
        margin-top: var(--s2);
      }
      .subHead {
        font-size: var(--fs-sm);
        font-weight: 500;
        color: var(--ink-3);
        margin: var(--s4) 0 var(--s2);
      }
      .projRow .r-end {
        width: auto;
      }
      .row.wrap .r-t {
        white-space: normal;
        overflow: visible;
      }
      .row.is-done .r-t {
        text-decoration: line-through;
        color: var(--ink-3);
      }
      .row .r-t .prioDot {
        margin-right: 6px;
      }
      .catAdd {
        display: flex;
        gap: var(--s2);
        align-items: flex-end;
        margin-bottom: var(--s4);
      }
      .catAdd .field {
        flex: 1;
        margin-bottom: 0;
      }
      .noteBlock {
        padding: var(--s4) 0;
        border-top: 1px solid var(--border);
      }
      .noteBlock:first-of-type {
        border-top: 0;
        padding-top: 0;
      }
      .noteHead {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--s3);
        margin-bottom: var(--s3);
      }
      .noteHead .r-s {
        display: flex;
        gap: var(--s3);
        flex-wrap: wrap;
        color: var(--ink-3);
        font-size: var(--fs-xs);
      }
      .noteHead .r-s span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
      }
      .noteBlock h4 {
        margin: var(--s3) 0 var(--s1);
        font-size: var(--fs-sm);
        font-weight: 500;
        color: var(--ink-3);
      }
      .teamRow {
        display: flex;
        align-items: center;
        gap: var(--s3);
        padding: 6px 0;
        font-size: var(--fs-md);
      }
      .avatar {
        display: inline-grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--surface-3);
        color: var(--ink-2);
        font-size: var(--fs-xs);
        font-weight: 500;
        flex-shrink: 0;
      }
      .projTime {
        display: flex;
        flex-direction: column;
        gap: var(--s2);
        margin-top: var(--s3);
      }

      /* ---------- Texteditor und gerenderte Inhalte: siehe css/rich.css ---------- */
      /* Gerenderte Tabellen aus Importen (Excel/Word): ruhig, redaktionell */
      .tableWrap table {
        width: 100%;
        border-collapse: collapse;
        margin: var(--s3) 0;
        font-size: var(--fs-md);
      }
      .tableWrap td {
        border-bottom: 1px solid var(--border);
        padding: 9px 10px;
        text-align: left;
      }
      .tableWrap th {
        border-bottom: 1px solid var(--border);
        padding: 9px 10px;
        text-align: left;
        font-weight: 500;
        font-size: var(--fs-xs);
        color: var(--ink-3);
      }
      .tableWrap tbody tr:hover td {
        background: var(--surface-2);
      }

      /* ---------- Wider modal variant ---------- */
      #modalBody.modalWide {
        max-width: 700px;
      }
      #modalBody.modalXWide {
        max-width: 860px;
      }

      /* ---------- Meilenstein-Seiten (Detail + Neu) ---------- */
      .subAdd {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
        gap: var(--s2);
        margin-bottom: var(--s4);
      }
      .subDates {
        display: flex;
        gap: var(--s2);
        margin-top: var(--s2);
      }
      .subDates .input {
        width: auto;
        min-width: 0;
        flex: 1 1 0;
        max-width: 160px;
      }
      @media (max-width: 640px) {
        .subAdd {
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        }
        .subAdd > :first-child,
        .subAdd > .btn {
          grid-column: 1 / -1;
        }
      }
      .msTimeline {
        display: flex;
        flex-direction: column;
        gap: var(--s2);
        margin-bottom: var(--s3);
      }
      .msTimeline:empty {
        display: none;
      }
      .msCard {
        display: flex;
        align-items: center;
        gap: var(--s2);
        padding: var(--s2) var(--s3);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        background: var(--surface-2);
        transition: border-color 0.15s;
      }
      .msCard:hover {
        border-color: var(--a-person);
      }
      .msCard.dragging {
        opacity: 0.4;
      }
      .msGrip {
        color: var(--ink-3);
        cursor: grab;
        display: inline-flex;
        flex-shrink: 0;
      }
      .msGrip:active {
        cursor: grabbing;
      }
      .msDone {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 1.5px solid var(--border-strong);
        background: none;
        color: transparent;
        display: grid;
        place-items: center;
        cursor: pointer;
        flex-shrink: 0;
        padding: 0;
      }
      .msDone.done {
        background: var(--success);
        border-color: var(--success);
        color: var(--surface);
      }
      .msSubstepTitleInput {
        flex: 1;
        min-width: 0;
      }
      .msDate {
        width: 150px;
        flex-shrink: 0;
      }
      @media (max-width: 640px) {
        .msCard {
          flex-wrap: wrap;
        }
        .msSubstepTitleInput {
          flex-basis: calc(100% - 100px);
        }
        .msDate {
          flex: 1;
          width: auto;
          min-width: 0;
        }
      }