/* ============================================================
   REDESIGN — elegant components for: Start (Duplikate entfernt),
   Aufgaben, Gesundheit/Profil, Vermögenswerte/Kategorien,
   Ideenjournal, Ziele, Kontakte, Bücher.
   Neue, eigenständige Klassen — bestehende globale Klassen
   (itemRow, listRow …) bleiben für alle übrigen, nicht genannten
   Bereiche unverändert.
   ============================================================ */

      /* ---------- Aufgaben: Zeilen mit Checkbox, Priorität und Aktionen ---------- */
      .row.static {
        cursor: default;
      }
      .row.static:hover {
        background: transparent;
      }
      .row .rowAct {
        width: auto;
        gap: var(--s2);
      }
      .row .r-s .is-late {
        color: var(--danger);
      }
      .chk {
        width: 18px;
        height: 18px;
        accent-color: var(--primary);
        flex-shrink: 0;
        cursor: pointer;
        margin: 0;
      }
      .row.is-done .r-s {
        opacity: 0.7;
      }
      .narrow {
        max-width: 130px;
      }

      /* ---------- Gesundheit / Profil ---------- */
      .healthProfileWrap {
        display: flex;
        flex-direction: column;
        gap: 18px;
      }
      .healthSection {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        padding: 22px 24px;
        box-shadow: var(--sh-1);
      }
      .healthSectionHead {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--border);
      }
      .healthSectionIcon {
        width: 32px;
        height: 32px;
        border-radius: var(--r-md);
        background: color-mix(in srgb, var(--primary) 13%, transparent);
        color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--fs-md);
        flex-shrink: 0;
      }
      .healthSectionTitle {
        font-family: var(--font-ui);
        font-weight: 600;
        font-size: var(--fs-md);
      }
      .healthSectionSub {
        color: var(--ink-3);
        font-size: var(--fs-xs);
        margin-top: 2px;
      }
      .healthFooterActions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        padding-top: 4px;
      }
      .medEntryRow {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        padding: 11px 14px;
        margin-bottom: 8px;
      }
      .medEntryBody {
        flex: 1;
        min-width: 0;
      }
      .medEntryText {
        font-size: var(--fs-sm);
        color: var(--ink);
      }
      .medEntryDate {
        font-size: var(--fs-xs);
        color: var(--ink-3);
        margin-top: 3px;
      }

      /* ---------- Vermögenswerte: Übersicht (Gesamt + Verteilung nach Typ) ---------- */
      .finOverviewGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        background: var(--border);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        overflow: hidden;
      }
      .finOverviewGrid > div {
        background: var(--surface);
        padding: var(--s5);
      }
      .finOverviewGrid .label {
        color: var(--ink-3);
        font-size: var(--fs-sm);
        margin-bottom: var(--s2);
      }
      .finOverviewGrid .value {
        font-size: var(--fs-2xl);
        font-weight: 600;
      }
      .finOverviewGrid .sub {
        font-size: var(--fs-sm);
        margin-top: var(--s2);
      }
      @media (max-width: 640px) {
        .finOverviewGrid {
          grid-template-columns: 1fr;
        }
      }
      .dashTop {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: var(--s4);
        align-items: stretch;
      }
      .dashTop > * {
        margin-bottom: 0;
      }
      @media (max-width: 1024px) {
        .dashTop {
          grid-template-columns: minmax(0, 1fr);
        }
      }
      .finDist {
        display: flex;
        gap: var(--s6);
        align-items: center;
        flex-wrap: wrap;
      }
      .finBreak {
        flex: 1;
        min-width: 220px;
      }
      .donut {
        width: 100%;
        max-width: 220px;
        height: auto;
        display: block;
        margin: 0 auto;
        flex-shrink: 0;
      }
      .donutVal {
        font-size: var(--fs-lg);
        font-weight: 600;
        fill: var(--ink);
      }
      .donutLbl,
      .axisLbl {
        font-size: var(--fs-xs);
        fill: var(--ink-3);
      }
      .chartVal {
        font-size: var(--fs-sm);
        font-weight: 600;
        fill: var(--ink);
      }
      .chartScroll {
        overflow-x: auto;
      }
      .chartScroll svg {
        width: 100%;
        min-width: var(--minw, 560px);
        height: var(--h, 260px);
        display: block;
      }
      .legendRow {
        display: flex;
        align-items: center;
        gap: var(--s3);
        padding: var(--s2) 0;
        border-top: 1px solid var(--border);
      }
      .legendRow:first-child {
        border-top: 0;
      }
      .legendRow .lg-name {
        flex: 1;
        min-width: 0;
      }
      .legendRow .lg-val {
        min-width: 96px;
        text-align: right;
      }
      .histEntry {
        margin: 0;
      }
      .entryDetail {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: var(--s3);
        padding: var(--s3) var(--s5) var(--s4);
        border-top: 1px solid var(--border);
        background: var(--surface-2);
      }
      .entryVal {
        font-weight: 600;
      }
      .rowLabel {
        flex: 1;
        min-width: 140px;
      }
      .addRow {
        margin-top: var(--s3);
      }

      /* ---------- Vermögenswerte: Kategorien als Cards (eine Card je Typ-Gruppe, klappbar) ---------- */
      .finCatListWrap {
        margin-top: var(--s3);
      }
      .finCatHeadRow {
        display: flex;
        justify-content: space-between;
        padding: 0 var(--s4) var(--s2);
        font-size: var(--fs-xs);
        color: var(--ink-3);
      }
      .finCatHeadCols {
        display: flex;
        gap: var(--s6);
      }
      .finCatCard {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        padding: var(--s3) var(--s4);
        margin-bottom: var(--s3);
      }
      .finCatCard:last-child {
        margin-bottom: 0;
      }
      .finCatCardHead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s3);
        cursor: pointer;
      }
      .finCatCardHeadLeft {
        display: flex;
        align-items: center;
        gap: var(--s3);
        min-width: 0;
      }
      .finCatCardIcon {
        width: 34px;
        height: 34px;
        border-radius: var(--r-md);
        background: var(--surface-2);
        color: var(--area, var(--ink-2));
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border: 0;
      }
      .finCatCardName {
        font-weight: 600;
        font-size: var(--fs-md);
        color: var(--ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .finCatCardHeadRight {
        display: flex;
        align-items: center;
        gap: var(--s3);
        flex-shrink: 0;
      }
      .finCatPctBadge {
        background: var(--surface-3);
        color: var(--ink-2);
        border-radius: 99px;
        padding: 2px 10px;
        font-size: var(--fs-xs);
        font-weight: 500;
        white-space: nowrap;
      }
      .finCatCardAmount {
        font-weight: 600;
        font-size: var(--fs-md);
        color: var(--ink);
        text-align: right;
        white-space: nowrap;
      }
      .finCatGroupChevron {
        color: var(--ink-3);
        display: inline-flex;
        transition: transform 0.15s;
        transform: rotate(-90deg);
      }
      .finCatGroupChevron.is-open {
        transform: none;
      }
      .finCatCardBody {
        margin-top: var(--s3);
        padding-top: var(--s3);
        border-top: 1px solid var(--border);
      }
      .finCatPostenRow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s3);
        padding: var(--s2) 0;
        border-bottom: 1px solid var(--border);
        cursor: pointer;
      }
      .finCatPostenRow:last-of-type {
        border-bottom: none;
      }
      .finCatPostenRow:hover .finCatPostenName,
      .finCatPostenRow:hover .finCatPostenPct,
      .finCatPostenRow:hover .finCatPostenVal {
        color: var(--primary);
      }
      .finCatPostenName {
        font-size: var(--fs-md);
        color: var(--ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
      }
      .finCatPostenRight {
        display: flex;
        align-items: center;
        gap: var(--s3);
        flex-shrink: 0;
        color: var(--ink-3);
      }
      .finCatPostenPct {
        color: var(--ink-3);
        font-size: var(--fs-xs);
      }
      .finCatPostenVal {
        font-size: var(--fs-md);
        font-weight: 500;
        color: var(--ink);
      }
      .finCatAddBtn {
        background: none;
        border: 1px dashed var(--border-strong);
        color: var(--ink-3);
        border-radius: var(--r-md);
        padding: var(--s2) var(--s3);
        font-size: var(--fs-sm);
        cursor: pointer;
        font-family: inherit;
        width: 100%;
        text-align: left;
        margin-top: var(--s3);
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .finCatAddBtn:hover {
        border-color: var(--primary);
        color: var(--primary);
      }

      /* ---------- Finanz-Dashboard: Nettovermögen, Kurve mit Bereichsumschalter, Verteilung je Position ---------- */
      .finPills {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s2);
        margin-top: var(--s3);
      }
      .finPillsNote {
        flex-basis: 100%;
        margin: 0;
      }
      .finAreas {
        margin-top: var(--s4);
        border-top: 1px solid var(--border);
      }
      .finArea {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--s3);
        padding: var(--s2) 0;
        border-bottom: 1px solid var(--border);
      }
      .finAreaName {
        display: flex;
        align-items: center;
        gap: var(--s2);
        font-size: var(--fs-sm);
        color: var(--ink-2);
        min-width: 0;
      }
      .finAreaVal {
        text-align: right;
      }
      .finAreaVal b {
        display: block;
        font-weight: 600;
      }
      .finAreaVal small {
        font-size: var(--fs-xs);
        color: var(--ink-3);
        white-space: nowrap;
      }
      .finSparLink {
        display: flex;
        align-items: center;
        gap: var(--s2);
        width: 100%;
        margin-top: var(--s3);
        padding: var(--s2) 0;
        border: 0;
        background: none;
        font-size: var(--fs-sm);
        color: var(--ink-2);
        cursor: pointer;
        text-align: left;
      }
      .finSparLink b {
        color: var(--ink);
      }
      .finSparLink svg:last-child {
        margin-left: auto;
        color: var(--ink-3);
      }
      /* Kartenköpfe mit Umschalter oder Schalter brechen um; der Umschalter scrollt im schmalen Fenster für sich */
      #view-findashboard .card-h {
        flex-wrap: wrap;
        gap: var(--s2);
      }
      #finDashRange {
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
      }
      #finDashRange::-webkit-scrollbar {
        display: none;
      }
      #finDashRange .seg button {
        white-space: nowrap;
      }
      .finSwitch {
        display: inline-flex;
        align-items: center;
        gap: var(--s2);
        font-size: var(--fs-sm);
        color: var(--ink-2);
      }
      .finAxisHint {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: var(--fs-xs);
        color: var(--ink-3);
        margin-bottom: var(--s2);
      }
      .finChartInfo {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s2) var(--s4);
        align-items: center;
        margin-top: var(--s3);
        padding: var(--s2) var(--s3);
        background: var(--surface-2);
        border-radius: var(--r-md);
        font-size: var(--fs-sm);
      }
      #finDashChart svg {
        display: block;
        max-width: 100%;
      }
      .finPt {
        cursor: pointer;
      }
      .finPt:focus {
        outline: none;
      }
      .finPt:focus-visible .vis {
        stroke: var(--primary);
        stroke-width: 3;
      }
      .finBarRow {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
        gap: var(--s3);
        align-items: center;
        padding: 6px 0;
        font-size: var(--fs-sm);
      }
      .finBarName {
        display: flex;
        align-items: center;
        gap: var(--s2);
        min-width: 0;
      }
      .finBarName span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .finBar {
        height: 8px;
        border-radius: var(--r-sm);
        background: var(--surface-2);
        overflow: hidden;
      }
      .finBar i {
        display: block;
        height: 100%;
        width: var(--w);
        background: var(--c);
        border-radius: var(--r-sm);
      }
      @media (max-width: 640px) {
        .finBarRow {
          grid-template-columns: minmax(0, 1fr) auto;
        }
        .finBar {
          grid-column: 1 / -1;
          grid-row: 2;
        }
      }
      .finLegend {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s2) var(--s4);
        font-size: var(--fs-xs);
        color: var(--ink-2);
        margin-top: var(--s3);
      }
      .finLegend span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .finAvTag {
        margin-left: var(--s1);
      }
      .finCatCardTitle {
        display: flex;
        flex-direction: column;
        min-width: 0;
      }
      .finCatCardSub {
        font-size: var(--fs-xs);
        color: var(--ink-3);
      }
      .finHist {
        display: flex;
        flex-direction: column;
        gap: var(--s2);
      }
      .finHistHead {
        font-size: var(--fs-xs);
        color: var(--ink-3);
        font-weight: 600;
        margin-top: var(--s2);
      }
      .finHistRow {
        display: flex;
        justify-content: space-between;
        gap: var(--s3);
        padding: 4px 0;
        border-bottom: 1px dashed var(--border);
        font-size: var(--fs-sm);
      }
      .finHistRow:last-child {
        border-bottom: 0;
      }
      .finAreaCard {
        margin-top: var(--s3);
      }
      .finAreaRow {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--s3);
        padding: var(--s2) 0;
        border-bottom: 1px solid var(--border);
        font-size: var(--fs-sm);
      }
      .finAreaNote {
        margin: var(--s2) 0 0;
      }

      /* ---------- Immobilien: Portfolio-Karten ---------- */
      .immoCardGrid {
        display: flex;
        flex-direction: column;
        gap: var(--s3);
      }
      .immoCard {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: var(--s4) var(--s5);
        cursor: pointer;
        transition: border-color 0.15s;
      }
      .immoCard:hover {
        border-color: var(--border-strong);
      }
      .immoCardTop {
        display: flex;
        align-items: center;
        gap: var(--s3);
      }
      .immoCardIcon {
        width: 40px;
        height: 40px;
        border-radius: var(--r-md);
        background: var(--surface-2);
        color: var(--area, var(--ink-2));
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .immoCardName {
        font-weight: 600;
        font-size: var(--fs-lg);
      }
      .immoCardMoveBtns {
        display: flex;
        gap: var(--s1);
        flex-shrink: 0;
      }
      .immoCardTags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s2);
        margin-top: var(--s3);
        padding-top: var(--s3);
        border-top: 1px solid var(--border);
      }
      .immoPlanTog {
        display: flex;
        align-items: center;
        gap: var(--s2);
        font-size: var(--fs-sm);
        color: var(--ink-2);
        margin-top: var(--s3);
        cursor: pointer;
      }
      .card.is-warn {
        border-color: var(--warning);
      }
      /* Generisch für alle drei Drag&Drop-Kontexte dieses Bereichs
   (Portfolio-Karten, Dashboard-KPIs, Dashboard-Bereiche) — ein einziger
   JS-Helfer (bindDragReorder) + eine einzige CSS-Regel. */
      [draggable="true"].dragging {
        opacity: 0.4;
      }
      .immoDragHandle {
        color: var(--ink-3);
        cursor: grab;
        flex-shrink: 0;
        user-select: none;
        display: inline-flex;
      }
      .immoDragHandle:active {
        cursor: grabbing;
      }
      .immoCurveToggle {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s4);
      }
      .immoCurveToggle label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: var(--fs-sm);
        color: var(--ink-2);
        cursor: pointer;
      }

      /* ---------- Ideenjournal ---------- */
      .ideaIco {
        width: 36px;
        height: 36px;
        border-radius: var(--r-md);
        background: color-mix(in srgb, var(--a-person) 14%, transparent);
        color: var(--a-person);
        display: grid;
        place-items: center;
        flex-shrink: 0;
      }
      @media (max-width: 640px) {
        .ideaIco {
          display: none;
        }
      }
      .ideaPreview {
        color: var(--ink-3);
        font-size: var(--fs-sm);
        line-height: 1.5;
        margin-top: 2px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      /* ---------- Ziele (Vision) ---------- */
      .goalCover {
        width: 100%;
        max-height: 220px;
        object-fit: cover;
        border-radius: var(--r-md);
        display: block;
        margin-bottom: var(--s2);
      }
      #vf-image-preview-wrap {
        display: flex;
        flex-direction: column;
        gap: var(--s2);
      }