.tc-view { display: flex; flex-direction: column; height: 100%; min-height: 0; flex: 1 1 auto; }
    /* ── Ansicht 1: Chat-Liste ── */
    .tc-chatlist { flex: 1 1 auto; overflow-y: auto; padding: .4rem .55rem 1rem; min-height: 0; }
    .tc-list-label { font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
      color: #64748b; margin: .95rem .45rem .35rem; }
    .tc-chat-item { display: flex; align-items: center; gap: .65rem; padding: .55rem .6rem;
      border-radius: .6rem; cursor: pointer; }
    .tc-chat-item:hover { background: rgba(148,163,184,.1); }
    .tc-item-av { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center;
      justify-content: center; font-weight: 700; font-size: .9rem; color: #fff; flex-shrink: 0; background: #334155; }
    .tc-item-main { flex: 1; min-width: 0; }
    .tc-item-top { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
    .tc-item-name { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tc-item-time { font-size: .68rem; color: #64748b; flex-shrink: 0; }
    .tc-item-preview { font-size: .76rem; color: #8b93a7; white-space: nowrap; overflow: hidden;
      text-overflow: ellipsis; margin-top: .12rem; }
    /* ── Ansicht 2: Unterhaltung ── */
    .tc-conv-head { display: flex; align-items: center; gap: .5rem; min-width: 0; }
    .tc-back { background: none; border: none; color: inherit; font-size: 1.2rem; line-height: 1;
      cursor: pointer; padding: .25rem .45rem; border-radius: .45rem; flex-shrink: 0; }
    .tc-back:hover { background: rgba(148,163,184,.14); }
    .tc-conv-av { width: 34px; height: 34px; border-radius: 50%; background: #334155; color: #fff;
      display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .82rem; flex-shrink: 0; }
    .tc-conv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .tc-conv-info strong { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tc-conv-info span { font-size: .72rem; color: #8b93a7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* ── Abrechnung (Angebote, Rechnungen, Verträge) ─────────── */
    .ab-status { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem;
      background: #f8fafc; border: 1px solid #e5e9f0; border-radius: 10px;
      padding: .7rem 1rem; margin-bottom: .9rem; font-size: .82rem; color: #475569; }
    .ab-status b { color: #0f172a; font-size: 1rem; }
    .ab-status button { margin-left: auto; }
    .ab-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
      border-radius: 10px; padding: .7rem .9rem; margin-bottom: .9rem; font-size: .82rem; line-height: 1.5; }
    .ab-hinweis { background: #eff6ff; border: 1px solid #dbeafe; color: #1e40af;
      border-radius: 10px; padding: .7rem .9rem; margin-bottom: .9rem; font-size: .8rem; line-height: 1.5; }
    .ab-meldung { border-radius: 8px; padding: .55rem .8rem; margin-bottom: .8rem; font-size: .8rem; }
    .ab-meldung.info  { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
    .ab-meldung.fehler{ background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
    .ab-reiter { display: flex; flex-wrap: wrap; gap: .35rem; border-bottom: 1px solid #e5e9f0; margin-bottom: .9rem; }
    .ab-tab { background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
      padding: .5rem .8rem; font-size: .82rem; font-weight: 600; color: #64748b; }
    .ab-tab:hover { color: #2563eb; }
    .ab-tab.aktiv { color: #2563eb; border-bottom-color: #2563eb; }
    .ab-zahl { background: #eef2f7; color: #475569; border-radius: 999px; padding: 0 .4rem; font-size: .7rem; }
    .ab-form { border: 1px solid #e5e9f0; border-radius: 10px; padding: .6rem .9rem; margin-bottom: .9rem; background: #fcfdff; }
    .ab-form summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: #2563eb; }
    .ab-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; margin: .7rem 0; }
    .ab-grid.drei { grid-template-columns: repeat(3, minmax(0,1fr)); }
    @media (max-width: 800px) { .ab-grid, .ab-grid.drei { grid-template-columns: 1fr; } }
    .ab-form label, .ab-grid label { display: flex; flex-direction: column; gap: .25rem;
      font-size: .74rem; font-weight: 600; color: #475569; }
    .ab-inp { width: 100%; box-sizing: border-box; padding: .42rem .6rem; font-size: .82rem;
      border: 1px solid #dbe2ea; border-radius: .45rem; background: #fff; color: #0f172a; font-weight: 400; }
    .ab-inp:focus { outline: none; border-color: #2563eb; }
    .ab-poswrap { display: flex; flex-direction: column; gap: .4rem; margin: .5rem 0; }
    .ab-pos { display: grid; grid-template-columns: 3fr 1fr 1fr 1.2fr auto; gap: .4rem; align-items: center; }
    @media (max-width: 700px) { .ab-pos { grid-template-columns: 1fr 1fr; } }
    .ab-btn { background: #2563eb; color: #fff; border: none; border-radius: .5rem;
      padding: .45rem .9rem; font-size: .8rem; font-weight: 600; cursor: pointer; }
    .ab-btn:hover { background: #1d4ed8; }
    /* Zweiter, ruhigerer Knopf (z. B. "Muster-Rechnung ansehen") */
    .ab-btn.hell { background: #eef2f7; color: #334155; }
    .ab-btn.hell:hover { background: #e2e8f0; }
    .ab-knopfzeile { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
    .ab-trenner { height: 1px; background: #e5e9f0; margin: 1.4rem 0 1rem; }

    /* ── Firmendaten: Formular links, mitlaufende Vorschau rechts ── */
    .fa-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(370px, 470px);
      gap: 1.3rem; align-items: start; }
    /* Im schmaleren linken Bereich sind drei Eingabespalten zu eng. */
    .fa-form .ab-grid.drei { grid-template-columns: repeat(2, minmax(0,1fr)); }
    @media (max-width: 1250px) { .fa-split { grid-template-columns: 1fr; } }
    @media (max-width: 900px)  { .fa-form .ab-grid.drei { grid-template-columns: 1fr; } }

    .fa-vorschau { position: sticky; top: .6rem; display: flex; flex-direction: column;
      border: 1px solid #e5e9f0; border-radius: 12px; background: #fff; overflow: hidden;
      box-shadow: 0 6px 22px rgba(15,23,42,.06); }
    .fa-vs-kopf { display: flex; align-items: center; justify-content: space-between;
      gap: .6rem; flex-wrap: wrap; padding: .55rem .75rem; border-bottom: 1px solid #eef2f7; }
    .fa-vs-titel { font-size: .8rem; font-weight: 700; color: #334155; }
    .fa-vs-art { display: flex; gap: .15rem; background: #f1f5f9; border-radius: .5rem; padding: .15rem; }
    .fa-vs-tab { border: none; background: transparent; cursor: pointer; font-size: .72rem;
      font-weight: 600; color: #64748b; padding: .3rem .6rem; border-radius: .4rem; }
    .fa-vs-tab:hover { color: #0f172a; }
    .fa-vs-tab.aktiv { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(15,23,42,.14); }
    .fa-vs-rahmen { position: relative; background: #eef2f7; height: 64vh; min-height: 470px; }
    .fa-vs-blatt { height: 100%; overflow: auto; padding: 14px; display: flex;
      justify-content: center; align-items: flex-start; }
    .fa-vs-blatt canvas { display: block; max-width: 100%; background: #fff; border-radius: 2px;
      box-shadow: 0 4px 18px rgba(15,23,42,.20); }
    .fa-vs-knoepfe { display: flex; align-items: center; gap: .35rem; }
    .fa-vs-blatt-btn { width: 26px; height: 26px; border: 1px solid #dbe2ea; background: #fff;
      color: #475569; border-radius: .4rem; cursor: pointer; font-size: .95rem; line-height: 1; }
    .fa-vs-blatt-btn:hover:not(:disabled) { background: #f1f5f9; }
    .fa-vs-blatt-btn:disabled { opacity: .4; cursor: default; }
    .fa-vs-lade { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      font-size: .78rem; color: #64748b; background: rgba(238,242,247,.9); z-index: 2; text-align: center;
      padding: 1rem; }
    .fa-vs-fuss { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
      flex-wrap: wrap; padding: .5rem .75rem; border-top: 1px solid #eef2f7; }
    .fa-vs-info { font-size: .7rem; color: #94a3b8; }
    .ab-link { background: none; border: none; color: #2563eb; font-size: .78rem;
      font-weight: 600; cursor: pointer; padding: .2rem 0; text-decoration: underline; }
    .ab-btn-x { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
      border-radius: .4rem; cursor: pointer; padding: .3rem .5rem; font-size: .75rem; }
    .ab-mini { background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155; border-radius: .4rem;
      padding: .25rem .55rem; font-size: .72rem; font-weight: 600; cursor: pointer; margin-left: .25rem; }
    .ab-mini:hover { background: #e2e8f0; }
    .ab-mini.gruen { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
    .ab-mini.gelb  { background: #fffbeb; border-color: #fde68a; color: #b45309; }
    .ab-mini.rot   { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
    .ab-scroll { overflow-x: auto; }
    table.ab-liste { width: 100%; border-collapse: collapse; font-size: .8rem; }
    table.ab-liste th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
      color: #94a3b8; padding: .45rem .5rem; border-bottom: 1px solid #e5e9f0; white-space: nowrap; }
    table.ab-liste td { padding: .5rem .5rem; border-bottom: 1px solid #f1f5f9; color: #0f172a; vertical-align: middle; }
    table.ab-liste .num, table.ab-liste th.num { text-align: right; white-space: nowrap; }
    .ab-badge { display: inline-block; border-radius: 999px; padding: .1rem .5rem; font-size: .7rem; font-weight: 700; }
    .ab-badge.entwurf, .ab-badge.abgelaufen { background: #f1f5f9; color: #475569; }
    .ab-badge.festgeschrieben, .ab-badge.versendet { background: #eff6ff; color: #1d4ed8; }
    .ab-badge.bezahlt, .ab-badge.angenommen { background: #f0fdf4; color: #15803d; }
    .ab-badge.ueberfaellig, .ab-badge.storniert, .ab-badge.abgelehnt { background: #fef2f2; color: #b91c1c; }
    .ab-klein { font-size: .7rem; color: #94a3b8; font-weight: 400; }
    .ab-leer { text-align: center; color: #94a3b8; font-size: .82rem; padding: 1.6rem 0; }
    .ab-check { display: flex; flex-direction: row; align-items: center; gap: .5rem;
      font-size: .8rem; color: #475569; margin: .6rem 0; }
    .ab-mail { border: 1px solid #e5e9f0; border-radius: 10px; padding: .7rem .9rem; margin-bottom: .6rem; background: #fff; }
    .ab-mail.fertig { opacity: .6; }
    .ab-mail-kopf { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .85rem; }
    .ab-mail-text { white-space: pre-wrap; font-family: inherit; font-size: .78rem; color: #475569;
      background: #f8fafc; border-radius: 8px; padding: .6rem .7rem; margin: .5rem 0; }
    .ab-kundebox { border: 1px solid #e5e9f0; border-radius: 12px; padding: 1rem 1.1rem; margin-top: 1rem; background: #fff; }
    .ab-kundebox h4 { font-size: .95rem; font-weight: 700; color: #0f172a; margin-bottom: .6rem; }
    .ab-kzeile { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
      padding: .6rem 0; border-bottom: 1px solid #f1f5f9; font-size: .84rem; }
    .ab-kzeile:last-child { border-bottom: none; }