:root {
    --bg: #ffffff;
    --surface: #f5f9fc;
    --surface-2: #e8f2fa;
    --surface-hover: #eef5fb;
    --border: #dbe6ee;
    --border-strong: #c3d6e3;
    --text: #14212c;
    --text-muted: #5c7185;
    --text-faint: #8598a8;
    --accent: #2f7ec4;
    --accent-strong: #1f5f96;
    --accent-tint: #dbeefc;
    --good: #2f9e6a;
    --good-tint: #e1f5ea;
    --danger: #c0432f;
    --danger-tint: #fbe4e0;
    --shadow: 0 1px 2px rgba(20, 33, 44, 0.05);
    --shadow-md: 0 4px 16px rgba(20, 33, 44, 0.08);
    --overlay-shadow: -8px 0 24px rgba(20, 33, 44, 0.10);

    --fs-xs: 11.5px;
    --fs-sm: 12.5px;
    --fs-base: 13.5px;
    --fs-md: 14.5px;
    --fs-lg: 16px;
    --fs-xl: 19px;

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    --radius: 7px;
    --radius-sm: 5px;

    color-scheme: light;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0f1720;
      --surface: #16212c;
      --surface-2: #1c2b38;
      --surface-hover: #1f3040;
      --border: #263949;
      --border-strong: #324a5d;
      --text: #e7eef4;
      --text-muted: #93a7b8;
      --text-faint: #66798a;
      --accent: #5eb3ec;
      --accent-strong: #8ecdf5;
      --accent-tint: #1d3a4e;
      --good: #4cbb87;
      --good-tint: #163826;
      --danger: #e2685a;
      --danger-tint: #3a1f1a;
      --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
      --overlay-shadow: -8px 0 24px rgba(0, 0, 0, 0.4);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #0f1720;
    --surface: #16212c;
    --surface-2: #1c2b38;
    --surface-hover: #1f3040;
    --border: #263949;
    --border-strong: #324a5d;
    --text: #e7eef4;
    --text-muted: #93a7b8;
    --text-faint: #66798a;
    --accent: #5eb3ec;
    --accent-strong: #8ecdf5;
    --accent-tint: #1d3a4e;
    --good: #4cbb87;
    --good-tint: #163826;
    --danger: #e2685a;
    --danger-tint: #3a1f1a;
    --overlay-shadow: -8px 0 24px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
  :root[data-theme="light"] {
    --bg: #ffffff;
    --surface: #f5f9fc;
    --surface-2: #e8f2fa;
    --surface-hover: #eef5fb;
    --border: #dbe6ee;
    --border-strong: #c3d6e3;
    --text: #14212c;
    --text-muted: #5c7185;
    --text-faint: #8598a8;
    --accent: #2f7ec4;
    --accent-strong: #1f5f96;
    --accent-tint: #dbeefc;
    --good: #2f9e6a;
    --good-tint: #e1f5ea;
    --danger: #c0432f;
    --danger-tint: #fbe4e0;
    --overlay-shadow: -8px 0 24px rgba(20, 33, 44, 0.10);
    color-scheme: light;
  }

  * { box-sizing: border-box; }
  html, body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--fs-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  button, input, textarea { font-family: inherit; }
  button { cursor: pointer; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

  /* ---------- Shell ---------- */
  .shell { height: 100vh; display: grid; grid-template-columns: 72px 1fr; }

  .mainnav {
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-3) 0 var(--sp-3);
    gap: var(--sp-2);
  }
  /* ZYAN-Zeichen trägt seine eigenen, festen Markenfarben im SVG (fill,
     nicht currentColor) - unabhängig vom Theme. Das dunkle Navy im Zeichen
     würde vor dunklem App-Hintergrund kaum auffallen, deshalb ein kleines,
     helles Hintergrundplättchen dahinter statt die Logofarben anzupassen. */
  .mark {
    width: 26px; height: 26px; flex: none; margin-bottom: var(--sp-3);
    display: flex; align-items: center; justify-content: center;
    background: #f4f7fb; border-radius: 7px; box-shadow: 0 0 0 1px rgba(20, 33, 44, 0.06);
    padding: 3px;
  }
  .mark svg { width: 100%; height: 100%; display: block; }

  .auth-brand { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); }
  .auth-brand .mark { width: 44px; height: 44px; margin-bottom: 0; padding: 5px; }
  .auth-brand-name { font-size: var(--fs-lg); font-weight: 800; letter-spacing: 0.14em; color: var(--text); }
  .navbtn {
    width: 44px; height: 44px;
    border: none; background: none; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    position: relative;
    transition: background 0.12s ease, color 0.12s ease;
  }
  .navbtn:hover { background: var(--surface-hover); color: var(--text); }
  .navbtn.active { background: var(--accent-tint); color: var(--accent-strong); }
  .navbtn svg { width: 19px; height: 19px; }
  .navbtn .soon-dot {
    position: absolute; top: 6px; right: 6px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
  }
  .nav-spacer { flex: 1; }
  /* Beschriftung unter den Tab-Icons - nur auf dem Handy (siehe Block am Dateiende). */
  .navlabel { display: none; }
  /* Zurück-Leiste über Ticket-/Kontakt-Detail und Einstellungs-Inhalt - nur auf dem Handy. */
  .detail-mobilebar { display: none; }
  .avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent-tint); color: var(--accent-strong);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm); font-weight: 600; flex: none;
    margin-top: var(--sp-1);
  }

  .page { min-width: 0; min-height: 0; height: 100vh; display: flex; flex-direction: column; }

  /* ---------- Begrüßungs-/Kennzahlen-Panel (Posteingang, zum Herunterziehen) ----------
     Bewusst schlank gehalten (kleinerer Griff, wenig Innenabstand, kleinere
     Zahlen als im ersten Entwurf) - das Panel soll beim Arbeiten nicht im
     Weg stehen, sondern kurz aufgezogen und wieder zugemacht werden. */
  .greet-region { flex: none; background: var(--bg); border-bottom: 1px solid var(--border); }
  .greet-handle {
    display: flex; align-items: center; justify-content: center; width: 100%;
    height: 14px; padding: 0; border: none; background: none; cursor: grab;
    touch-action: none; -webkit-user-select: none; user-select: none;
  }
  .greet-handle.is-dragging { cursor: grabbing; }
  .greet-grip {
    width: 32px; height: 4px; border-radius: 4px; background: var(--border-strong);
    transition: background-color 150ms ease, width 150ms ease;
  }
  .greet-handle:hover .greet-grip { background: var(--text-faint); }
  .greet-handle.is-dragging .greet-grip,
  .greet-handle:focus-visible .greet-grip { background: var(--accent); width: 40px; }
  .greet-wrap { overflow: hidden; transition: height 280ms cubic-bezier(0.22, 0.68, 0.24, 1); }
  /* Kein eigener Begrüßungstext mehr (siehe app.js::greetPanelHtml()) -
     nur noch die Kennzahlen, darum knapper bemessen als vorher. */
  .greet-panel { padding: 0 var(--sp-6) var(--sp-2); }
  .greet-stats { display: flex; align-items: center; gap: var(--sp-4); }
  .greet-stat-block { display: flex; align-items: baseline; gap: 6px; }
  .greet-stat-div { width: 1px; height: 16px; background: var(--border); flex: none; }
  .greet-stat-main .greet-stat-num {
    font-size: 18px; font-weight: 700; color: var(--accent);
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1;
  }
  .greet-stat-main .greet-stat-word { font-size: var(--fs-sm); color: var(--text-muted); }
  .greet-stat-sub .greet-stat-num-sm { font-size: var(--fs-base); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
  .greet-stat-sub .greet-stat-word-sm { font-size: var(--fs-xs); color: var(--text-muted); }
  .greet-empty-row { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: var(--fs-sm); }
  .greet-empty-row svg { color: var(--good); width: 15px; height: 15px; flex: none; }
  .greet-done-line { margin: 3px 0 0; font-size: var(--fs-xs); color: var(--text-muted); }

  /* ---------- Top bar (inbox page) ---------- */
  .topbar { display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-4); height: 52px; border-bottom: 1px solid var(--border); flex: none; }
  .search { flex: 1; min-width: 0; max-width: 420px; position: relative; }
  .search input {
    width: 100%; padding: 7px var(--sp-3) 7px 32px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text); font-size: var(--fs-base);
  }
  .search input::placeholder { color: var(--text-faint); }
  .search input:focus { border-color: var(--accent); background: var(--bg); }
  .search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--text-faint); width: 14px; height: 14px; }
  .topbar-right { margin-left: auto; font-size: var(--fs-sm); color: var(--text-muted); }
  .topbar-right strong { color: var(--text); font-weight: 600; }
  .last-updated { font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
  #refreshBtn svg { width: 13px; height: 13px; }

  .simple-header { padding: var(--sp-5) var(--sp-6) var(--sp-4); border-bottom: 1px solid var(--border); flex: none; }
  .simple-header h1 { font-size: var(--fs-xl); font-weight: 600; margin: 0; text-wrap: balance; }

  /* ---------- Body grid ---------- */
  .body { flex: 1; display: grid; grid-template-columns: 200px 340px 1fr; min-height: 0; }

  /* Nur der Posteingang bekommt verstellbare Spalten (per --inbox-rail-w/
     --inbox-list-w, siehe app.js) - die Kartei nutzt dasselbe .body-Grid,
     bleibt aber bewusst fest. Die Griffe selbst nehmen keinen Layout-Platz
     ein (0 Breite in der Spur), sitzen exakt auf der schon vorhandenen
     Trennlinie von .rail/.list-col und weiten nur ihre Klickfläche per
     Pseudo-Element nach beiden Seiten auf. */
  .inbox-body { grid-template-columns: var(--inbox-rail-w, 200px) 0 var(--inbox-list-w, 340px) 0 1fr; }
  /* Kanalleiste eingeklappt (app.js::railToggle) - auf eine schmale, feste
     Spur statt der gemerkten Breite, den frei werdenden Platz bekommen
     Liste und Detailansicht automatisch dazu (1fr wächst mit). Ziehgriff
     ergibt bei fester Breite keinen Sinn mehr. */
  .inbox-body.rail-collapsed { grid-template-columns: 40px 0 var(--inbox-list-w, 340px) 0 1fr; }
  /* visibility statt display:none - ein per Grid-Auto-Placement
     positioniertes Kind aus dem Layout zu nehmen (display:none)
     verschiebt alle nachfolgenden Grid-Kinder um eine Spur nach links
     (list-col landet in der 0px-Griffspur, detail-col bekommt gar keine
     Spur mehr ab) - genau der Bug, der hier beim ersten Versuch
     entstand. visibility:hidden lässt die (ohnehin 0px breite) Spur
     unangetastet stehen, ist aber ebenso unsichtbar und nicht klickbar. */
  .inbox-body.rail-collapsed [data-resize="rail"] { visibility: hidden; }
  .resize-handle { position: relative; width: 0; cursor: col-resize; z-index: 3; flex: none; }
  .resize-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px; }
  .resize-handle::after { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: transparent; transition: background 0.12s ease; }
  .resize-handle:hover::after, .resize-handle.resizing::after { background: var(--accent); }
  /* Während des Ziehens: Cursor konsistent halten und Textmarkierung
     unterbinden, auch wenn die Maus kurz die Spur verlässt. */
  body.col-resizing { cursor: col-resize !important; user-select: none; }
  body.col-resizing * { cursor: col-resize !important; user-select: none; }

  /* ---------- Rail ---------- */
  .rail { border-right: 1px solid var(--border); background: var(--surface); padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); overflow-y: auto; }
  .rail-section-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); padding: 0 var(--sp-2); margin-bottom: var(--sp-1); }
  .rail-section-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); margin-bottom: var(--sp-1); }
  .rail-toggle { flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none; background: none; color: var(--text-faint); border-radius: var(--radius-sm); cursor: pointer; }
  .rail-toggle:hover { background: var(--surface-hover); color: var(--text); }
  .rail-toggle svg { width: 14px; height: 14px; transition: transform 0.15s ease; }
  /* Eingeklappt: nur noch der Knopf sichtbar, gedreht (zeigt jetzt nach
     rechts = "aufklappen"), Rest der Leiste ausgeblendet statt nur
     überlaufen zu lassen. */
  .inbox-body.rail-collapsed .rail { padding: var(--sp-4) 0; align-items: center; overflow: visible; }
  .inbox-body.rail-collapsed .rail-section-row { justify-content: center; }
  .inbox-body.rail-collapsed .rail-section-label,
  .inbox-body.rail-collapsed #filterNav { display: none; }
  .inbox-body.rail-collapsed .rail-toggle svg { transform: rotate(180deg); }
  .rail-section-row .rail-section-label { margin-bottom: 0; }
  .kartei-export-btn {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border: none; background: none; color: var(--text-faint);
    cursor: pointer; border-radius: var(--radius-sm); opacity: 0.7;
  }
  .kartei-export-btn:hover { background: var(--surface-hover); color: var(--text-muted); opacity: 1; }
  .kartei-export-btn svg { width: 13px; height: 13px; }
  .rail-item {
    display: flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-2);
    border-radius: var(--radius-sm); color: var(--text-muted); font-size: var(--fs-base);
    border: none; background: none; text-align: left; width: 100%;
  }
  .rail-item:hover { background: var(--surface-hover); color: var(--text); }
  .rail-item.active { background: var(--accent-tint); color: var(--accent-strong); font-weight: 600; }
  .rail-item .tag-soon { font-size: 9.5px; font-weight: 600; color: var(--text-faint); background: var(--surface-2); border-radius: 4px; padding: 1px 4px; }
  .rail-item .count { margin-left: auto; font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }
  .rail-item.active .count { color: var(--accent-strong); }

  /* ---------- Ticket list ---------- */
  .list-col { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
  .list-header { padding: var(--sp-4) var(--sp-4) var(--sp-3); display: flex; align-items: baseline; justify-content: space-between; }
  .list-header h1 { font-size: var(--fs-lg); font-weight: 600; margin: 0; text-wrap: balance; }
  .list-header .sub { font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }
  .status-filter { display: flex; gap: 4px; padding: 0 var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--border); }
  .status-filter[hidden] { display: none; }
  .status-filter-btn { flex: 1; padding: 5px 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; transition: background 0.12s ease, color 0.12s ease; }
  .status-filter-btn:hover { background: var(--surface-hover); color: var(--text); }
  .status-filter-btn.active { background: var(--accent-tint); color: var(--accent-strong); border-color: transparent; }
  .triage-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--border); }
  .triage-toolbar.collapsed { padding: 4px var(--sp-4); }
  .triage-toolbar-field { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-faint); min-width: 0; }
  .triage-toolbar-field select { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 6px; font-size: var(--fs-xs); background: var(--surface); color: var(--text); font-family: inherit; min-width: 0; }
  .triage-toolbar-field select:focus { border-color: var(--accent); background: var(--bg); outline: none; }
  .triage-toolbar-toggle {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text-faint); font-size: 13px; line-height: 1; cursor: pointer;
  }
  .triage-toolbar-toggle:hover { background: var(--surface-hover); color: var(--text); }
  .list { overflow-y: auto; flex: 1; }
  .ticket { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border); padding: var(--sp-3) var(--sp-4); position: relative; }
  .ticket:hover { background: var(--surface-hover); }
  .ticket.active { background: var(--surface-2); }
  .ticket.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
  .ticket-top { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 3px; }
  .ticket-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; visibility: hidden; }
  .ticket.unread .ticket-dot { visibility: visible; }
  /* Triage (core/triage.py) - läuft im Hintergrund beim Abholen mit, kein
     eigener Knopf, deshalb hier nur ein stiller Indikator statt einer
     erklärenden Textzeile. */
  .ticket-urgent { display: flex; flex: none; color: var(--danger); }
  .ticket-urgent svg { width: 13px; height: 13px; }
  .ticket-sender { font-size: var(--fs-base); color: var(--text); font-weight: 400; }
  .ticket.unread .ticket-sender { font-weight: 700; }
  .ticket-time { margin-left: auto; font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; flex: none; }
  .ticket-subject { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
  .ticket.unread .ticket-subject { color: var(--text); }
  .ticket-meta { display: flex; align-items: center; gap: 6px; }
  .badge { font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; padding: 2px 6px; border-radius: 4px; background: var(--surface-2); color: var(--text-muted); }
  .badge.kaufland { background: var(--accent-tint); color: var(--accent-strong); }
  .badge.ebay { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border-strong); }
  .status-pill { font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 4px; margin-left: auto; }
  /* Zustandsnamen wie im Backend: zu_bearbeiten, warten, geschlossen, erledigt. */
  .status-pill.zu_bearbeiten { background: var(--accent-tint); color: var(--accent-strong); }
  .status-pill.warten { background: var(--surface-2); color: var(--text-muted); }
  .status-pill.geschlossen,
  .status-pill.erledigt { background: transparent; color: var(--text-faint); }
  .list-empty { padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--text-faint); font-size: var(--fs-sm); }

  /* ---------- Detail column ---------- */
  .detail-col { display: flex; flex-direction: row; min-height: 0; background: var(--bg); position: relative; }
  .detail-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
  .detail-header { padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: var(--sp-4); }
  /* Ohne min-width:0 gilt für Flex-Kinder der Vorgabewert min-width:auto -
     .detail-header-main durfte dann nie schmaler werden als sein Inhalt
     (langer Name/Betreff) und hat .detail-actions ("Ticket schließen"/
     "Löschen") über den eigentlich per padding-right reservierten Rand
     hinaus nach rechts gedrückt. Bei 1440px Desktop-Breite nie
     aufgefallen (immer genug Platz); auf 375px beim echten mobilen
     Durchklicken gefunden - der Knopf landete unter .edge-dock
     (Bestellinfo/Notizen, siehe dort) und war nur noch teilweise lesbar. */
  .detail-header-main { min-width: 0; }
  .detail-header-main h2 { font-size: var(--fs-xl); font-weight: 600; margin: 0 0 2px; text-wrap: balance; }
  .detail-header-main .subject { font-size: var(--fs-base); color: var(--text-muted); margin-bottom: 6px; }
  .detail-header-main .meta-row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-faint); }
  .detail-actions { margin-left: auto; display: flex; gap: var(--sp-2); flex: none; }

  /* Verweis zwischen Otto-Klärfall und der Kundenanfrage, aus der er
     entstand (dieselbe Auftragsnummer) - siehe README "Für die
     Oberfläche - offen, bitte übernehmen". */
  .related-ticket-link {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
    font-size: var(--fs-sm); font-weight: 600; color: var(--accent-strong);
    background: var(--accent-tint); border: none; border-radius: 999px; padding: 4px 10px 4px 8px;
  }
  .related-ticket-link:hover { background: var(--accent); color: #fff; }
  .related-ticket-link svg { width: 13px; height: 13px; flex: none; }

  .btn { font-size: var(--fs-base); font-weight: 600; padding: 7px 14px; border-radius: var(--radius); border: 1px solid transparent; transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease, box-shadow 0.12s ease; display: inline-flex; align-items: center; gap: 6px; }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow); }
  .btn-primary:hover { background: var(--accent-strong); box-shadow: var(--shadow-md); }
  .btn-primary:disabled { background: var(--surface-2); color: var(--text-faint); box-shadow: none; cursor: not-allowed; }
  .btn-ghost { background: var(--bg); color: var(--text-muted); border-color: var(--border-strong); }
  .btn-ghost:hover { background: var(--surface-hover); color: var(--text); border-color: var(--text-faint); }
  .btn-ghost:disabled { color: var(--text-faint); cursor: not-allowed; }
  .btn-ghost.accent { color: var(--accent-strong); border-color: var(--accent-tint); }
  .btn-ghost.accent:hover { background: var(--accent-tint); }
  .btn-sm { padding: 5px 11px; font-size: var(--fs-sm); }
  .btn svg { width: 14px; height: 14px; flex: none; }
  .chip { font-size: var(--fs-sm); font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg); color: var(--text-muted); }
  .chip:hover { background: var(--surface-hover); color: var(--text); }

  .thread { flex: 1; overflow-y: auto; padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
  .msg { max-width: 640px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
  .msg.from-agent { background: var(--accent-tint); border-color: transparent; margin-left: auto; }
  .msg-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) 0; font-size: var(--fs-sm); }
  .msg-head .who { font-weight: 600; color: var(--text); }
  .msg-head .when { margin-left: auto; color: var(--text-faint); font-variant-numeric: tabular-nums; }
  .msg-body { padding: var(--sp-2) var(--sp-4) var(--sp-4); font-size: var(--fs-md); color: var(--text); line-height: 1.65; white-space: pre-wrap; }
  .msg-body:has(+ .msg-translate-btn) { padding-bottom: 2px; }
  .msg-translate-btn {
    display: block; margin: 0 var(--sp-4) var(--sp-4); font-size: var(--fs-xs); font-weight: 600;
    color: var(--accent-strong); background: none; border: none; padding: 0; cursor: pointer;
  }
  .msg-translate-btn:hover { text-decoration: underline; }
  .msg-translate-btn:disabled { color: var(--text-faint); cursor: default; text-decoration: none; }
  .msg-translation { margin: 6px var(--sp-4) var(--sp-4); padding: var(--sp-3); background: var(--surface-2); border-radius: var(--radius-sm); font-size: var(--fs-md); color: var(--text); line-height: 1.6; white-space: pre-wrap; }
  .msg-translation[hidden] { display: none; }
  .msg-translation.error { background: none; padding: 0; margin: 4px var(--sp-4) var(--sp-4); color: var(--danger); font-size: var(--fs-sm); white-space: normal; }
  .msg-translation.hinweis { background: none; padding: 0; margin: 4px var(--sp-4) var(--sp-4); color: var(--text-faint); font-size: var(--fs-sm); white-space: normal; }
  .msg-translation-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-faint); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.02em; }

  /* ---------- Order sidebar (Inhalt sitzt jetzt im .edge-panel-Ausklapper) ---------- */
  .order-field { margin-bottom: var(--sp-4); }
  .order-field .k { font-size: var(--fs-xs); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
  .order-field .v { font-size: var(--fs-base); color: var(--text); line-height: 1.45; }
  .order-field .v.mono { font-variant-numeric: tabular-nums; }
  .order-field .v.address { white-space: pre-line; }
  .order-portal-link {
    display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); font-weight: 600;
    color: var(--accent-strong); text-decoration: none;
  }
  .order-portal-link:hover { text-decoration: underline; }
  .order-portal-link svg { width: 13px; height: 13px; flex: none; }
  .widerruf-pill { display: inline-block; font-size: var(--fs-sm); font-weight: 600; padding: 3px 8px; border-radius: 5px; }
  .widerruf-pill.yes { background: var(--good-tint); color: var(--good); }
  .widerruf-pill.no { background: var(--danger-tint); color: var(--danger); }
  .widerruf-pill.pending { background: var(--surface-2); color: var(--text-muted); }

  .composer { border-top: 1px solid var(--border); padding: var(--sp-4) var(--sp-6); background: var(--bg); flex: none; }
  .ai-row { display: flex; align-items: center; gap: 6px; margin-bottom: var(--sp-2); flex-wrap: wrap; }
  .composer textarea { width: 100%; min-height: 84px; resize: vertical; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: var(--sp-3); font-size: var(--fs-md); line-height: 1.5; }
  .composer textarea:focus { border-color: var(--accent); background: var(--bg); }
  .composer textarea:disabled { color: var(--text-faint); }
  .composer-row { display: flex; align-items: center; margin-top: var(--sp-3); gap: var(--sp-2); }
  .composer-hint { font-size: var(--fs-xs); color: var(--text-faint); }
  .composer-form-error { font-size: var(--fs-sm); color: var(--danger); margin-top: var(--sp-1); }
  .composer-form-error:empty { display: none; }
  /* Meldung des KI-Assistenten, dass hier bewusst KEIN Entwurf entstanden
     ist (z.B. Anwaltspost) - siehe api/assistent.py, Feld "hinweis".
     Eigene, ruhige Optik statt der roten Fehlerfarbe: das ist keine
     Störung, sondern eine bewusste Einschätzung. */
  .ai-hinweis { display: flex; align-items: flex-start; gap: var(--sp-2); background: var(--accent-tint); color: var(--accent-strong); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); font-size: var(--fs-sm); line-height: 1.5; }
  .ai-hinweis svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
  .composer-actions { margin-left: auto; display: flex; gap: var(--sp-2); }

  .empty-state { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: var(--fs-base); }

  /* ---------- Kaufland: Bestellstatus + Aktion an der Bestellposition ---------- */
  .kl-order-status { font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--good-tint); color: var(--good); }
  .kl-order-status.storniert { background: var(--danger-tint); color: var(--danger); }
  .kl-aktion-panel { margin: var(--sp-4) var(--sp-6) 0; padding: var(--sp-4); border: 1px solid var(--accent-tint); background: var(--surface); border-radius: var(--radius); display: flex; flex-direction: column; gap: var(--sp-2); }
  .kl-aktion-panel .form-row { margin-bottom: 0; }
  .kl-aktion-titel { font-size: var(--fs-md); font-weight: 700; }
  .kl-check { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text); }
  .kl-aktion-hinweis { font-size: var(--fs-sm); color: var(--danger); line-height: 1.45; }
  .kl-aktion-knoepfe { display: flex; gap: var(--sp-2); justify-content: flex-end; }
  .app-loading { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); color: var(--text-muted); font-size: var(--fs-base); }
  .spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--border); border-top-color: var(--accent); animation: spin 0.7s linear infinite; }
  @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.6s; } }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ---------- Settings ---------- */
  .settings-body { padding: var(--sp-6); max-width: 620px; }
  .conn-card { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: var(--sp-3); overflow: hidden; max-width: 560px; box-shadow: var(--shadow); }
  .conn-card.zustand-danger { border-left: 3px solid var(--danger); }
  .conn-card.zustand-good { border-left: 3px solid var(--good); }
  .conn-card.zustand-neutral { border-left: 3px solid var(--border-strong); }

  /* Verbindungskarte: eingeklappt nur Name/Marktplatz/Status, Aktionen erst
     nach Klick sichtbar - siehe renderConnectionsList(). */
  .conn-summary-row { display: flex; align-items: center; }
  .conn-summary {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4); background: none; border: none; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  }
  .conn-summary:hover { background: var(--surface-hover); }
  .conn-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .conn-name { font-weight: 600; font-size: var(--fs-md); display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
  /* Team-Zeilen (renderTeamList()/teamMemberRowHtml()): Name/E-Mail plus
     Rollen-Tag im selben Flex-Wort - ohne eigenes min-width:0 wächst der
     Text unbegrenzt (Flex-Kinder sind sonst min-width:auto) und drängt
     den Tag bei langen Adressen aus dem sichtbaren Bereich, statt selbst
     zu kürzen. Der Tag bleibt dabei immer vollständig lesbar. */
  .conn-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .status-line { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-muted); }
  .status-line.status-danger { color: var(--danger); font-weight: 500; }
  .status-line svg { width: 13px; height: 13px; flex: none; }
  .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
  .dot-good { background: var(--good); }
  .dot-danger { background: var(--danger); }
  .dot-neutral { background: var(--border-strong); }

  .fix-btn {
    flex: none; font-size: var(--fs-xs); font-weight: 700; color: var(--danger);
    border: 1px solid var(--danger); background: var(--danger-tint);
    padding: 5px var(--sp-3); border-radius: var(--radius-sm); cursor: pointer; margin-right: var(--sp-2);
  }
  .fix-btn:hover { filter: brightness(1.05); }
  .chevron-btn {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; margin-right: var(--sp-2); border: none; background: none; cursor: pointer; border-radius: var(--radius-sm);
  }
  .chevron-btn:hover { background: var(--surface-hover); }
  .chevron { display: inline-block; color: var(--text-faint); font-size: var(--fs-lg); line-height: 1; transition: transform 0.15s ease; }
  .conn-summary[aria-expanded="true"] ~ .chevron-btn .chevron,
  .chevron-btn[aria-expanded="true"] .chevron { transform: rotate(90deg); }

  .conn-body { border-top: 1px solid var(--border); padding: var(--sp-4); background: var(--surface); }
  .conn-body[hidden] { display: none; }
  .btn-ghost.danger { color: var(--danger); }
  .btn-ghost.danger:hover { background: var(--danger-tint); border-color: var(--danger); }

  .conn-list { display: flex; flex-direction: column; gap: var(--sp-2); }
  .section-head { display: flex; align-items: baseline; justify-content: space-between; margin: var(--sp-6) 0 var(--sp-3); }
  .section-head .conn-h3 { margin: 0; }
  .section-count { font-size: var(--fs-xs); color: var(--text-faint); }

  /* Konto hinzufügen: ein Akkordeon statt einzelner Karten - siehe
     renderConnectionsList(). */
  .add-list { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; max-width: 560px; }
  .add-row { border-bottom: 1px solid var(--border); }
  .add-row:last-child { border-bottom: none; }
  .add-row-header {
    width: 100%; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
    background: none; border: none; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  }
  button.add-row-header:hover { background: var(--surface-hover); }
  .add-row-name { font-weight: 600; font-size: var(--fs-md); }
  .add-row-header .chevron { margin-left: auto; }
  .add-row-header[aria-expanded="true"] .chevron { transform: rotate(90deg); }
  .add-row-body { padding: 0 var(--sp-4) var(--sp-4); }
  .add-row-body[hidden] { display: none; }
  .add-row-static { padding: 0 var(--sp-4) var(--sp-4); }
  .add-row.locked .add-row-header { cursor: default; opacity: 0.62; }
  .add-row.locked .add-row-name { color: var(--text-faint); }
  .oauth-text { font-size: var(--fs-base); color: var(--text-muted); margin: 0 0 var(--sp-3); max-width: 460px; }
  .fallback { margin-top: var(--sp-1); }
  .fallback > summary {
    list-style: none; cursor: pointer; font-size: var(--fs-xs); color: var(--accent-strong);
    text-decoration: underline; text-underline-offset: 2px;
  }
  .fallback > summary::-webkit-details-marker { display: none; }

  .tag { display: inline-flex; align-items: center; padding: 2px var(--sp-2); border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
  .tag-locked { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border-strong); }
  .tag-warning { background: var(--danger-tint); color: var(--danger); }
  .tag-good { background: var(--good-tint); color: var(--good); }

  /* Tarif-/Abo-Anzeige über den Verbindungen. */
  .plan-bar {
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); box-shadow: var(--shadow);
  }
  .plan-text { font-size: var(--fs-base); color: var(--text); }
  .plan-meter { width: 120px; height: 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; flex: none; }
  .plan-meter-fill { height: 100%; background: var(--accent); border-radius: 999px; }
  .plan-meter-fill.full { background: var(--danger); }

  .field-hint { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 3px; line-height: 1.4; }
  /* Einstellungen -> Allgemein: Design-Auswahl (System/Hell/Dunkel), gleiche
     Pillenoptik wie .status-filter-btn im Posteingang. */
  .theme-choice { display: flex; gap: 4px; max-width: 320px; }
  .theme-choice-btn { flex: 1; padding: 6px 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
  .theme-choice-btn:hover { background: var(--surface-hover); color: var(--text); }
  .theme-choice-btn.active { background: var(--accent-tint); color: var(--accent-strong); border-color: transparent; }
  .conn-note { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--border); line-height: 1.5; }
  .btn-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }

  /* ---------- Addon-Store ---------- */
  .addons-body { max-width: 760px; }
  .addons-kicker {
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-faint); margin: 0 0 4px;
  }
  .addons-subtitle { font-size: var(--fs-base); color: var(--text-muted); margin: 0 0 var(--sp-4); max-width: 60ch; line-height: 1.5; }
  .addons-summary-bar {
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); box-shadow: var(--shadow);
  }
  .addons-summary-count { font-weight: 600; color: var(--text); }
  .addons-summary-extra { margin-left: auto; font-size: var(--fs-sm); color: var(--text-muted); }
  .addons-search { margin-bottom: var(--sp-4); max-width: none; }

  /* flex-wrap: bei wenig Platz (schmales Fenster, Mobile) drückt der
     nicht schrumpfende .addon-price-block (fixe Breite, flex:none)
     .addon-main sonst auf wenige Pixel zusammen - einzelne Wörter im
     Namen/der Beschreibung brechen nicht mitten im Wort um und liefen
     dadurch sichtbar in den Preis-Block hinein (z. B. "Zusätzlicher
     Anbindungs-Slot" bei 20,00 €/Monat). Gefunden beim echten mobilen
     Durchklicken. Mit Wrap rutscht der Preis-Block bei Bedarf in eine
     eigene Zeile statt sich mit dem Namen zu überlagern; margin-left:auto
     hält ihn dabei weiterhin rechtsbündig. */
  .addon-summary { align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; }
  .addon-icon {
    flex: none; width: 34px; height: 34px; border-radius: 50%; margin-top: 1px;
    display: flex; align-items: center; justify-content: center; color: var(--accent-strong);
    background: radial-gradient(circle at 30% 25%, var(--accent-tint), var(--surface-2));
    border: 1px solid var(--border);
  }
  .addon-icon svg { width: 16px; height: 16px; }
  .addon-main { align-items: flex-start; }
  .addon-name { font-weight: 600; color: var(--text); }
  .addon-desc { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
  .addon-price-block { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; margin-left: auto; }
  .addon-price { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .addon-price-unit { font-weight: 400; color: var(--text-faint); }
  .addon-price-qty { font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }

  .addon-stepper-row { display: flex; align-items: center; gap: var(--sp-3); }
  .addon-stepper { display: flex; align-items: center; gap: var(--sp-2); }
  .addon-stepper button {
    width: 26px; height: 26px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--bg); color: var(--text); display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-md); line-height: 1;
  }
  .addon-stepper button:hover:not(:disabled) { background: var(--surface-hover); }
  .addon-stepper button:disabled { opacity: 0.4; cursor: not-allowed; }
  .addon-stepper-value { min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
  .addon-stepper-preis { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }

  /* ---------- Discord Auto-Poster addon page ---------- */
  .discord-page { padding: var(--sp-6); max-width: 780px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-5); }
  .discord-back-link {
    display: inline-flex; align-items: center; gap: var(--sp-2); width: fit-content;
    background: none; border: none; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600;
    padding: var(--sp-1) var(--sp-2); margin-left: calc(var(--sp-2) * -1); border-radius: var(--radius-sm); cursor: pointer;
  }
  .discord-back-link:hover { color: var(--accent-strong); background: var(--surface-hover); }
  .discord-back-link svg { width: 14px; height: 14px; }

  .discord-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
  .discord-page-heading { display: flex; align-items: flex-start; gap: var(--sp-3); }
  .discord-icon-badge {
    flex: none; width: 42px; height: 42px; border-radius: var(--radius); margin-top: 1px;
    display: flex; align-items: center; justify-content: center; color: var(--accent-strong);
    background: var(--surface-2); border: 1px solid var(--border);
  }
  .discord-icon-badge svg { width: 22px; height: 22px; }
  .discord-page-heading h1 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; }
  .discord-status-pill { margin-left: var(--sp-2); }
  .discord-page-sub { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 2px; max-width: 52ch; }

  .discord-stage { display: flex; flex-direction: column; gap: var(--sp-4); align-items: center; }
  .discord-segmented { display: inline-flex; background: var(--surface-2); padding: 3px; border-radius: 999px; border: 1px solid var(--border); gap: 2px; }
  .discord-seg-btn {
    border: none; background: transparent; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 700;
    padding: 7px 20px; border-radius: 999px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  }
  .discord-seg-btn:hover { color: var(--text); }
  .discord-seg-btn.active { background: var(--bg); color: var(--accent-strong); box-shadow: var(--shadow); }

  .discord-editor-card { width: 100%; max-width: 720px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow); }
  .discord-editor-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); flex-wrap: wrap; }
  .discord-editor-head label { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
  .discord-auto-badge {
    display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 600;
    color: var(--accent-strong); background: var(--accent-tint); padding: 3px 9px; border-radius: 999px;
  }
  .discord-auto-badge svg { width: 13px; height: 13px; }
  .discord-editor-card textarea {
    width: 100%; resize: vertical; min-height: 110px; background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: var(--sp-3); color: var(--text); font-size: var(--fs-base); line-height: 1.55; font-family: inherit;
  }
  .discord-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); flex-wrap: wrap; }
  .discord-last-sent { font-size: var(--fs-xs); color: var(--text-faint); }

  .discord-targets-row { width: 100%; max-width: 720px; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-sm); }
  .discord-targets-label { color: var(--text-muted); font-weight: 600; flex-shrink: 0; }
  .discord-target-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
  .discord-target-chip {
    display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text); font-size: var(--fs-xs); font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  }
  .discord-target-chip .ch { color: var(--text-faint); font-weight: 500; }
  .discord-target-empty { color: var(--text-faint); font-style: italic; }

  .discord-preview-stage { width: 100%; max-width: 720px; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
  .discord-window-frame {
    --dc-bg: #313338; --dc-bg-2: #2b2d31; --dc-bg-3: #232428; --dc-border: #1e1f22;
    --dc-text: #f2f3f5; --dc-muted: #949ba4; --dc-muted-2: #6d7178;
    width: 100%; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--border-strong); background: var(--dc-bg-3);
  }
  .discord-window-chrome { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--dc-bg-3); border-bottom: 1px solid var(--dc-border); }
  .discord-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .discord-dot-r { background: #ec6a5e; }
  .discord-dot-y { background: #f4bf4f; }
  .discord-dot-g { background: #61c454; }
  .discord-window-url { margin: 0 auto; background: var(--dc-bg-2); color: var(--dc-muted); font-size: var(--fs-xs); padding: 4px 12px; border-radius: 999px; }

  .discord-window { background: var(--dc-bg); color: var(--dc-text); }
  .discord-titlebar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--dc-border); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); }
  .discord-server-chip { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: var(--fs-sm); color: var(--dc-text); }
  .discord-server-chip svg { width: 16px; height: 16px; color: var(--dc-muted); }
  .discord-channel-sep { color: var(--dc-muted-2); }
  .discord-channel { display: flex; align-items: center; gap: 3px; color: var(--dc-muted); font-size: var(--fs-sm); font-weight: 600; }
  .discord-channel svg { width: 15px; height: 15px; color: var(--dc-muted-2); }

  .discord-msg-area { padding: var(--sp-4); min-height: 220px; }
  .discord-message { display: flex; gap: var(--sp-3); }
  .discord-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .discord-avatar svg { width: 20px; height: 20px; }
  .discord-message-main { flex: 1; min-width: 0; }
  .discord-message-meta { display: flex; align-items: baseline; gap: 7px; margin-bottom: 3px; flex-wrap: wrap; }
  .discord-username { font-weight: 600; color: var(--dc-text); font-size: var(--fs-base); }
  .discord-tag { background: var(--accent); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; padding: 1px 5px; border-radius: 3px; line-height: 1.5; }
  .discord-time { color: var(--dc-muted-2); font-size: var(--fs-xs); }
  .discord-time.pending { font-style: italic; }

  .discord-embed { margin-top: 4px; max-width: 480px; background: var(--dc-bg-2); border-left: 4px solid var(--accent); border-radius: 4px; padding: 10px 14px; transition: box-shadow 0.3s ease; }
  .discord-embed.pulse { box-shadow: 0 0 0 3px var(--accent-tint); }
  .discord-embed-text { color: #dbdee1; font-size: var(--fs-sm); white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
  .discord-embed-text.empty { color: var(--dc-muted); font-style: italic; }
  .discord-embed-footer { display: flex; align-items: center; gap: 5px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.06); color: var(--dc-muted-2); font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; }
  .discord-embed-footer svg { width: 12px; height: 12px; }

  .discord-preview-caption { color: var(--text-faint); font-size: var(--fs-xs); text-align: center; }

  .discord-drawer-backdrop { position: fixed; inset: 0; background: rgba(10, 16, 22, 0.38); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 40; }
  .discord-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
  .discord-drawer {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(400px, 92vw); background: var(--surface); border-left: 1px solid var(--border);
    box-shadow: var(--overlay-shadow); transform: translateX(100%); transition: transform 0.25s ease; z-index: 50; display: flex; flex-direction: column;
  }
  .discord-drawer.open { transform: translateX(0); }
  .discord-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4); border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .discord-drawer-head h2 { font-size: var(--fs-lg); font-weight: 700; }
  .icon-btn {
    width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent;
    color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .icon-btn svg { width: 16px; height: 16px; }
  .icon-btn:hover { background: var(--surface-hover); color: var(--text); }
  .icon-btn.danger:hover { background: var(--danger-tint); color: var(--danger); }

  .discord-drawer-body { flex: 1; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-6); }
  .discord-drawer-section h3 {
    display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 700; color: var(--text);
    text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: var(--sp-3);
  }
  .discord-drawer-section h3 svg { width: 15px; height: 15px; color: var(--text-faint); }

  .discord-server-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-3); list-style: none; padding: 0; }
  .discord-server-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; }
  .discord-server-item-info { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .discord-server-item-info svg { width: 16px; height: 16px; color: var(--text-faint); flex: none; }
  .discord-server-item-text { display: flex; flex-direction: column; min-width: 0; }
  .discord-server-item-text strong { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .discord-server-item-text span { font-size: var(--fs-xs); color: var(--text-faint); }
  .discord-server-empty { font-size: var(--fs-sm); color: var(--text-faint); font-style: italic; padding: var(--sp-2) 2px var(--sp-3); list-style: none; }

  .discord-add-server-form { display: flex; gap: 6px; margin-bottom: var(--sp-4); flex-wrap: wrap; }
  .discord-add-server-form input {
    flex: 1 1 110px; min-width: 0; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 7px 9px; font-size: var(--fs-sm); color: var(--text);
  }
  .discord-add-server-form input:focus { border-color: var(--accent); background: var(--surface); outline: none; }
  .discord-add-server-form .btn { padding: 7px 12px; flex-shrink: 0; }

  .discord-schedule-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-3); }
  .discord-schedule-row { display: flex; align-items: center; gap: var(--sp-3); }
  .discord-schedule-row > span { font-size: var(--fs-sm); font-weight: 600; }
  .discord-schedule-time-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3);
    padding-top: var(--sp-3); border-top: 1px solid var(--border); transition: opacity 0.15s ease;
  }
  .discord-schedule-time-row.disabled { opacity: 0.45; }
  .discord-schedule-time-row label { font-size: var(--fs-sm); color: var(--text-muted); }
  .discord-schedule-time-row input[type="time"] { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 8px; color: var(--text); font-size: var(--fs-sm); }

  .app-toast {
    position: fixed; left: 50%; bottom: var(--sp-6); transform: translate(-50%, 12px); background: var(--text); color: var(--bg);
    padding: 10px 16px; border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 600; display: flex; align-items: center; gap: 8px;
    box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 60; max-width: 90vw;
  }
  .app-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
  .app-toast.danger { background: var(--danger); color: #fff; }
  .app-toast svg { width: 14px; height: 14px; color: var(--good); flex-shrink: 0; }
  .app-toast.danger svg { color: #fff; }

  @media (max-width: 720px) {
    .discord-page { padding: var(--sp-4); }
    .discord-topbar { flex-direction: column; }
  }

  .tag-active { background: var(--accent-tint); color: var(--accent-strong); }

  /* ---------- Cold Reaching addon ---------- */
  .coldreach-page { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .coldreach-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .coldreach-screen[hidden] { display: none; }
  #coldreachOverview { overflow-y: auto; }

  .coldreach-overview-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
  .coldreach-overview-header h1 { margin: 0; }
  .coldreach-subtitle { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 3px; }

  .coldreach-campaign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-5); padding: var(--sp-6); }
  .coldreach-campaign-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-5);
    cursor: pointer; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: var(--sp-4);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  }
  .coldreach-campaign-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
  .coldreach-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
  .coldreach-card-top h3 { font-size: var(--fs-md); font-weight: 700; line-height: 1.35; margin: 0; }
  .coldreach-progress-track { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
  .coldreach-progress-fill { height: 100%; background: var(--accent); border-radius: 999px; }
  .coldreach-card-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
  .coldreach-card-stat { display: flex; flex-direction: column; gap: 2px; }
  .coldreach-card-stat .num { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
  .coldreach-card-stat .lbl { font-size: var(--fs-xs); color: var(--text-muted); }
  .coldreach-card-footer {
    display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs);
    color: var(--text-faint); border-top: 1px solid var(--border); padding-top: var(--sp-3);
  }
  .coldreach-kartei-link { color: var(--accent-strong); display: flex; align-items: center; gap: 4px; font-weight: 600; }
  .coldreach-kartei-link svg { width: 12px; height: 12px; }

  .coldreach-workspace-topbar {
    display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-6);
    border-bottom: 1px solid var(--border); flex-wrap: wrap; background: var(--surface); flex: none;
  }
  .coldreach-back-btn {
    display: flex; align-items: center; gap: 4px; background: none; border: none; color: var(--text-muted);
    font-size: var(--fs-sm); font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: var(--radius-sm);
  }
  .coldreach-back-btn:hover { background: var(--surface-hover); color: var(--text); }
  .coldreach-back-btn svg { width: 15px; height: 15px; }
  .coldreach-topbar-title { display: flex; flex-direction: column; gap: 2px; min-width: 140px; }
  .coldreach-topbar-title h2 { font-size: var(--fs-lg); font-weight: 700; margin: 0; }
  .coldreach-stats-row { display: flex; gap: var(--sp-2); margin-left: auto; flex-wrap: wrap; }
  .coldreach-stat-pill {
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 5px var(--sp-3); text-align: center; min-width: 60px;
  }
  .coldreach-stat-pill .val { font-size: var(--fs-md); font-weight: 700; display: block; line-height: 1.3; font-variant-numeric: tabular-nums; }
  .coldreach-stat-pill .lbl { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
  .coldreach-kartei-badge {
    display: flex; align-items: center; gap: 6px; background: var(--accent-tint); color: var(--accent-strong);
    border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-xs); font-weight: 700; cursor: pointer; white-space: nowrap;
  }
  .coldreach-kartei-badge:hover { background: var(--accent); color: #fff; }
  .coldreach-kartei-badge svg { width: 13px; height: 13px; flex: none; }

  .coldreach-columns { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px minmax(340px, 1fr) 320px; overflow-x: auto; }
  .coldreach-col { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .coldreach-col-contacts { border-right: 1px solid var(--border); }
  .coldreach-col-message { border-right: 1px solid var(--border); overflow-y: auto; padding: var(--sp-5); gap: var(--sp-4); }
  .coldreach-col-thread { overflow-y: auto; padding: var(--sp-5); gap: var(--sp-3); }

  .coldreach-col-header { padding: var(--sp-4); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--sp-3); flex: none; }
  .coldreach-contact-search { max-width: none; }
  .coldreach-filter-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
  .coldreach-filter-tab {
    font-size: var(--fs-xs); padding: 4px 9px; border-radius: 999px; background: var(--surface-2);
    color: var(--text-muted); border: 1px solid transparent; cursor: pointer; font-weight: 600; white-space: nowrap;
  }
  .coldreach-filter-tab:hover { background: var(--surface-hover); }
  .coldreach-filter-tab.active { background: var(--accent); color: #fff; }
  .coldreach-contact-actions { display: flex; gap: 6px; }

  .coldreach-contact-list { flex: 1; min-height: 0; overflow-y: auto; }
  .coldreach-contact-row {
    display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.12s ease; position: relative;
  }
  .coldreach-contact-row:hover { background: var(--surface-hover); }
  .coldreach-contact-row.selected { background: var(--accent-tint); }
  .coldreach-contact-row.selected::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
  .coldreach-avatar {
    width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); color: var(--accent-strong);
    display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 700; flex: none;
  }
  .coldreach-contact-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .coldreach-contact-name { font-size: var(--fs-sm); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .coldreach-contact-firma { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .coldreach-contact-reply-preview { font-size: var(--fs-xs); color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; font-style: italic; }
  .coldreach-status-icon { width: 17px; height: 17px; flex: none; }
  .coldreach-status-icon svg { width: 100%; height: 100%; }
  .coldreach-status-icon.coldreach-status-offen { color: var(--text-faint); }
  .coldreach-status-icon.coldreach-status-gesendet { color: var(--accent); }
  .coldreach-status-icon.coldreach-status-beantwortet { color: var(--good); }
  .coldreach-status-icon.coldreach-status-bounced { color: var(--danger); }

  .coldreach-msg-header-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
  .coldreach-msg-header-row h3 { font-size: var(--fs-md); font-weight: 700; margin: 0; }
  .coldreach-segmented { display: flex; background: var(--surface-2); border-radius: var(--radius); padding: 2px; gap: 2px; }
  .coldreach-segmented button { border: none; background: none; padding: 5px 11px; font-size: var(--fs-xs); font-weight: 700; border-radius: calc(var(--radius) - 2px); cursor: pointer; color: var(--text-muted); }
  .coldreach-segmented button.active { background: var(--bg); color: var(--text); box-shadow: var(--shadow); }

  .coldreach-message-textarea, .coldreach-reply-textarea {
    width: 100%; resize: vertical; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: var(--sp-3); color: var(--text); font-size: var(--fs-base); font-family: inherit; line-height: 1.6;
  }
  .coldreach-message-textarea { min-height: 190px; }
  .coldreach-reply-textarea { min-height: 70px; }
  .coldreach-message-textarea:focus, .coldreach-reply-textarea:focus { outline: none; border-color: var(--accent); }

  .coldreach-preview-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: var(--sp-4); font-size: var(--fs-sm); }
  .coldreach-preview-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--border); padding-bottom: var(--sp-3); display: flex; flex-direction: column; gap: 2px; }
  .coldreach-preview-subject { font-size: var(--fs-sm); font-weight: 700; color: var(--text); margin-bottom: var(--sp-2); }
  .coldreach-preview-body { white-space: pre-wrap; line-height: 1.65; }

  .coldreach-mailbox-row { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
  .coldreach-mailbox-row svg { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
  .coldreach-mb-label { color: var(--text-muted); }
  .coldreach-mb-addr { font-weight: 700; }
  .coldreach-mailbox-connected { margin-left: auto; display: flex; align-items: center; gap: 4px; color: var(--good); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
  .coldreach-mailbox-connected svg { width: 13px; height: 13px; color: var(--good); }

  .coldreach-send-box { margin-top: auto; border-top: 1px solid var(--border); padding-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
  .coldreach-remaining { font-size: var(--fs-sm); color: var(--text-muted); }
  .coldreach-send-actions .btn { width: 100%; justify-content: center; }

  .coldreach-thread-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--text-faint); gap: var(--sp-3); }
  .coldreach-thread-empty svg { width: 36px; height: 36px; opacity: 0.55; }
  .coldreach-thread-empty p { font-size: var(--fs-sm); max-width: 220px; }
  .coldreach-thread-header { display: flex; flex-direction: column; gap: 3px; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-3); flex: none; }
  .coldreach-thread-name-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); }
  .coldreach-thread-header h3 { font-size: var(--fs-md); font-weight: 700; margin: 0; }
  .coldreach-thread-firma { font-size: var(--fs-xs); color: var(--text-muted); }
  .coldreach-thread-email { font-size: var(--fs-xs); color: var(--text-faint); }
  .coldreach-thread-kartei-link {
    font-size: var(--fs-xs); color: var(--accent-strong); cursor: pointer; display: inline-flex; align-items: center; gap: 3px;
    margin-top: 4px; font-weight: 600; background: none; border: none; padding: 0;
  }
  .coldreach-thread-kartei-link svg { width: 11px; height: 11px; }
  .coldreach-thread-kartei-link:hover { text-decoration: underline; }

  .coldreach-thread-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
  .coldreach-thread-messages { display: flex; flex-direction: column; gap: var(--sp-3); }
  .coldreach-bubble { max-width: 92%; padding: var(--sp-3); border-radius: var(--radius); font-size: var(--fs-sm); line-height: 1.55; white-space: pre-wrap; }
  .coldreach-bubble.out { background: var(--accent-tint); color: var(--text); }
  .coldreach-bubble.in { background: var(--surface-2); color: var(--text); }
  .coldreach-bubble-wrap { display: flex; flex-direction: column; }
  .coldreach-bubble-wrap.out { align-items: flex-end; }
  .coldreach-bubble-wrap.out .coldreach-bubble { border-bottom-right-radius: 2px; }
  .coldreach-bubble-wrap.in { align-items: flex-start; }
  .coldreach-bubble-wrap.in .coldreach-bubble { border-bottom-left-radius: 2px; }
  .coldreach-bubble-meta { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 4px; }

  .coldreach-log-reply { display: flex; flex-direction: column; gap: var(--sp-2); border-top: 1px solid var(--border); padding-top: var(--sp-3); }
  .coldreach-log-reply-actions { display: flex; gap: 6px; flex-wrap: wrap; }

  .coldreach-status-banner { display: flex; align-items: flex-start; gap: 8px; padding: var(--sp-3); border-radius: var(--radius); font-size: var(--fs-sm); }
  .coldreach-status-banner.coldreach-banner-danger { background: var(--danger-tint); color: var(--danger); }
  .coldreach-status-banner.coldreach-banner-muted { background: var(--surface-2); color: var(--text-muted); }
  .coldreach-status-banner svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
  .coldreach-banner-actions { margin-top: var(--sp-2); }


  .modal-backdrop { position: fixed; inset: 0; background: rgba(10, 16, 22, 0.45); display: none; align-items: center; justify-content: center; z-index: 300; padding: var(--sp-4); }
  .modal-backdrop.open { display: flex; }
  .modal { display: none; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-6); width: 400px; max-width: 100%; box-shadow: var(--shadow-md); }
  .modal.open { display: flex; flex-direction: column; gap: var(--sp-4); }
  .modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
  .modal-header h3 { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 3px; }
  .modal-header p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
  .modal-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-1); }
  /* Validierungsfehler (z. B. "Namen eingeben") zeigen die Toast, während
     das Modal noch offen ist - muss über dem Modal-Hintergrund liegen. */
  .coldreach-toast { z-index: 310; }

  /* ---------- Ticket <-> Kartei-Kontakt Verknüpfung ---------- */
  .kartei-link-row { position: relative; margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; }
  .kartei-link-popover {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: 280px; max-width: 90vw;
    background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius);
    box-shadow: var(--shadow-md); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2);
  }
  .kartei-link-popover[hidden] { display: none; }
  .kartei-link-suggestion {
    display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
    background: var(--good-tint); color: var(--good); border: none; border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  }
  .kartei-link-suggestion:hover { opacity: 0.85; }
  .kartei-link-suggestion svg { width: 14px; height: 14px; flex: none; }
  .kartei-link-search { max-width: none; }
  .kartei-link-results { list-style: none; margin: 0; padding: 0; max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
  .kartei-link-results li { padding: 6px 8px; border-radius: var(--radius-sm); font-size: var(--fs-sm); cursor: pointer; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
  .kartei-link-results li:hover { background: var(--surface-hover); }
  .kartei-link-results li span { color: var(--text-faint); font-size: var(--fs-xs); }
  .kartei-link-results .kartei-link-cat { margin-left: auto; color: var(--accent-strong); }
  .kartei-link-results li.kartei-link-empty { cursor: default; color: var(--text-faint); font-style: italic; }
  .kartei-link-results li.kartei-link-empty:hover { background: none; }

  /* ---------- Abo & Zahlung (Profil) ---------- */
  .abo-devbypass-name { display: flex; align-items: center; gap: 6px; }
  .abo-devbypass-name svg { width: 15px; height: 15px; color: var(--danger); flex: none; }

  /* ---------- AI chat drawer ---------- */
  /* z-index 10, nicht 5: liegt im selben Elternelement wie .edge-dock
     (Bestellinfo-Panel, z-index 6) - offen deckt die Schublade sonst
     dessen unsichtbaren 46px-Hover-Streifen am rechten Rand nicht ab und
     Klicks in der Schublade landen bei jedem Ticket mit Bestellung im
     Bestellinfo-Panel statt in der Schublade selbst. Gefunden beim echten
     Durchklicken mit Playwright, nicht durch Code-Lesen. */
  .chat-drawer { position: absolute; top: 0; right: -340px; bottom: 0; width: 320px; background: var(--bg); border-left: 1px solid var(--border); box-shadow: var(--overlay-shadow); display: flex; flex-direction: column; transition: right 0.18s ease; z-index: 10; }
  .chat-drawer.open { right: 0; }
  .chat-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); font-weight: 600; font-size: var(--fs-base); flex: none; }
  .chat-head svg { width: 16px; height: 16px; color: var(--accent); }
  .chat-close { margin-left: auto; background: none; border: none; color: var(--text-faint); width: 24px; height: 24px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
  .chat-close:hover { background: var(--surface-hover); color: var(--text); }
  .chat-quick-row { display: flex; gap: 6px; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); flex-wrap: wrap; flex: none; }
  .chat-log { flex: 1; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
  .chat-bubble { font-size: var(--fs-base); line-height: 1.5; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); max-width: 88%; }
  .chat-bubble.assistant { background: var(--surface); border: 1px solid var(--border); align-self: flex-start; }
  .chat-bubble.user { background: var(--accent); color: #fff; align-self: flex-end; }
  .chat-apply { margin-top: 6px; font-size: var(--fs-xs); color: var(--accent-strong); background: none; border: none; padding: 0; text-decoration: underline; align-self: flex-start; }
  .chat-input-row { border-top: 1px solid var(--border); padding: var(--sp-3); display: flex; gap: 6px; flex: none; }
  .chat-input-row input { flex: 1; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); padding: 6px 10px; font-size: var(--fs-base); }
  .chat-input-row input:focus { border-color: var(--accent); background: var(--bg); }

  /* ---------- Avatar as nav button ---------- */
  .avatar { border: none; padding: 0; cursor: pointer; }
  .avatar:hover { box-shadow: 0 0 0 2px var(--border-strong); }
  .avatar.active { box-shadow: 0 0 0 2px var(--accent); }

  /* ---------- Settings layout ---------- */
  .settings-layout { display: grid; grid-template-columns: 200px 1fr; flex: 1; min-height: 0; }
  .settings-body { padding: var(--sp-6); max-width: 620px; overflow-y: auto; }
  .form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--sp-4); max-width: 420px; }
  .form-row label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
  .form-row input, .form-row select, .form-row textarea { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font-size: var(--fs-base); background: var(--surface); color: var(--text); font-family: inherit; }
  .form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--accent); background: var(--bg); outline: none; }
  .form-row textarea { min-height: 70px; resize: vertical; line-height: 1.5; }
  .form-row input.input-error, .form-row select.input-error, .form-row textarea.input-error { border-color: var(--danger); }
  /* Formular-Raster für Bereiche mit vielen kurzen Feldern (z. B. Firma) -
     bei fester max-width:420px pro .form-row blieb auf breiten
     Bildschirmen viel Platz rechts ungenutzt, wirkte unfertig. Vier
     gleich breite Spuren, jedes Feld entscheidet per Klasse (span-1/2/4),
     wie viele es einnimmt - z. B. Straße allein auf der ganzen Breite,
     PLZ/Stadt/Land auf einer Zeile daneben. */
  .form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 var(--sp-4); max-width: 640px; }
  .form-grid .form-row { max-width: none; }
  .form-grid .span-1 { grid-column: span 1; }
  .form-grid .span-2 { grid-column: span 2; }
  .form-grid .span-4 { grid-column: span 4; }
  .settings-h2 { font-size: var(--fs-lg); font-weight: 600; margin: 0 0 var(--sp-4); }

  /* TEMPORÄR - vor dem Launch entfernen, siehe app.js::tempAnthropicKeyBoxHtml()
     und backend/api/temp_anthropic_key.py. Bewusst mit gestricheltem Rand
     abgesetzt, damit auf den ersten Blick klar ist: das ist Bau-Gerüst,
     kein fertiges Feature. */
  .ki-temp-key { border: 1px dashed var(--danger); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-6); max-width: 100%; }
  .ki-temp-key h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-base); display: flex; align-items: center; gap: var(--sp-2); }
  .ki-temp-key-status { font-size: var(--fs-sm); color: var(--text-muted); margin: var(--sp-2) 0; }
  .ki-temp-key-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
  .ki-temp-key-row input { flex: 1; min-width: 220px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font-size: var(--fs-base); background: var(--surface); color: var(--text); }
  .ki-temp-key-row input:focus { border-color: var(--accent); background: var(--bg); outline: none; }

  /* Einstellungen -> KI-Assistent (Shop-Kontext), siehe app.js */
  .kf-pflicht { color: var(--danger); }
  .ki-gruppe { margin-bottom: var(--sp-6); }
  .ki-gruppe .form-row { max-width: 100%; }
  .ki-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip.active { background: var(--accent-tint); color: var(--accent-strong); border-color: var(--accent); }
  .ki-budget { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); font-size: var(--fs-sm); color: var(--text-muted); }
  .ki-budget-bar { flex: 1; max-width: 220px; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
  .ki-budget-fill { height: 100%; background: var(--accent); border-radius: inherit; }
  .ki-budget.voll .ki-budget-fill { background: var(--danger); }
  .ki-budget.voll span { color: var(--danger); font-weight: 600; }

  /* Einrichtungshilfe (POST /api/shopkontext/vorschlag) - Knopf + Status
     oberhalb der Felder, siehe app.js::kiVorschlagWiren(). */
  .ki-einrichtungshilfe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-6); }
  .ki-einrichtungshilfe .btn svg { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
  .ki-einrichtungshilfe .field-hint { margin: 0; flex-basis: 100%; }
  .ki-vorschlag-status { font-size: var(--fs-sm); color: var(--accent-strong); flex-basis: 100%; }
  .ki-vorschlag-status.error { color: var(--danger); }
  .ki-vorschlag-status:empty { display: none; }
  /* Markiert Felder, die gerade eben vom Vorschlag befüllt wurden und noch
     nicht gespeichert sind - verschwindet beim nächsten Laden des Tabs. */
  .ki-feld.ki-vorschlag-uebernommen { background: var(--accent-tint); border-radius: var(--radius-sm); padding: var(--sp-2); margin: 0 calc(var(--sp-2) * -1) var(--sp-4); }

  .ki-vorschau { margin: var(--sp-2) 0 var(--sp-8); }
  .ki-vorschau summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
  .ki-vorschau pre { margin-top: var(--sp-2); padding: var(--sp-3); background: var(--surface-2); border-radius: var(--radius); font-size: var(--fs-xs); line-height: 1.6; white-space: pre-wrap; word-break: break-word; max-height: 340px; overflow-y: auto; }
  .ki-bausteine-section { max-width: 100%; }
  .ki-baustein-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
  .ki-baustein-row:last-child { border-bottom: none; }
  .ki-baustein-main { flex: 1; min-width: 0; }
  .ki-baustein-text { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; white-space: pre-wrap; }
  .ki-baustein-neu { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 420px; margin-top: var(--sp-3); }
  .ki-baustein-neu input, .ki-baustein-neu select, .ki-baustein-neu textarea { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font-size: var(--fs-base); background: var(--surface); color: var(--text); font-family: inherit; }
  .ki-baustein-neu textarea { min-height: 60px; resize: vertical; }

  /* Eigens umrandet statt wie .ki-gruppe im Fluss: macht sichtbar, dass
     hier eine einzelne Anbindung statt des allgemeinen Werts bearbeitet
     wird - dieselbe Absicht wie die gestrichelte Umrandung beim
     temporären Anthropic-Testschlüssel, nur ohne den "temporär"-Ton. */
  .ki-override-section { margin: var(--sp-2) 0 var(--sp-8); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
  .ki-override-section .ki-feld { max-width: 100%; }
  .ki-override-section #kiOverridePanel { margin-top: var(--sp-3); }

  /* Sprachauswahl zum Eintippen - schwebt über dem Inhalt darunter statt ihn
     zu verschieben, gleiches Muster wie .kartei-address-suggest. */
  .lang-combo { position: relative; }
  .lang-combo-input { width: 100%; box-sizing: border-box; cursor: text; }
  .lang-combo-list {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5;
    margin: 0; padding: 4px; list-style: none;
    background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md); max-height: 280px; overflow-y: auto;
  }
  .lang-combo-list[hidden] { display: none; }
  .lang-combo-list li[role="option"] {
    padding: 7px 9px; border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--text);
    cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .lang-combo-list li.active,
  .lang-combo-list li[role="option"]:hover { background: var(--accent-tint); color: var(--accent-strong); }
  .lang-combo-list li.current { font-weight: 600; }
  .lang-combo-list li.current::after { content: "✓"; float: right; color: var(--accent); }
  .lang-combo-divider { height: 1px; margin: 4px 2px; background: var(--border); list-style: none; }
  .lang-combo-empty { padding: 7px 9px; font-size: var(--fs-sm); color: var(--text-faint); }

  .feature-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
  .feature-row:last-child { border-bottom: none; }
  .feature-row .name { font-weight: 600; font-size: var(--fs-md); }
  .feature-row .desc { font-size: var(--fs-sm); color: var(--text-muted); }
  .feature-row .spacer { flex: 1; }

  .switch { width: 36px; height: 20px; border-radius: 999px; background: var(--border-strong); position: relative; border: none; flex: none; transition: background 0.15s ease; padding: 0; }
  .switch.on { background: var(--accent); }
  .switch .knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 0.15s ease; box-shadow: var(--shadow); }
  .switch.on .knob { left: 18px; }
  .switch:disabled { opacity: .5; cursor: not-allowed; }

  /* ---------- Dashboard ---------- */
  .dash-header { display: flex; align-items: center; gap: var(--sp-4); }
  .avatar-lg { width: 52px; height: 52px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-strong); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex: none; }
  .dash-header h1 { margin: 0; font-size: var(--fs-xl); }
  .dash-header .sub { color: var(--text-muted); font-size: var(--fs-base); }

  /* ---------- Auswertung (Profil) ---------- */
  .analytics-empty { color: var(--text-muted); }
  .analytics-h3 { font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin: var(--sp-5) 0 var(--sp-2); }
  .analytics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-2); }
  .analytics-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 2px; }
  .analytics-card-num { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .analytics-card-label { font-size: var(--fs-xs); color: var(--text-muted); }
  .analytics-card-hint { font-size: 10px; color: var(--text-faint); }
  @media (max-width: 860px) { .analytics-grid { grid-template-columns: repeat(2, 1fr); } }

  .analytics-bars { display: flex; flex-direction: column; gap: var(--sp-2); }
  .analytics-bar-row { display: grid; grid-template-columns: 110px 1fr 28px; align-items: center; gap: var(--sp-3); }
  .analytics-bar-label { font-size: var(--fs-sm); color: var(--text); }
  .analytics-bar-track { height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
  .analytics-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
  .analytics-bar-value { font-size: var(--fs-xs); color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }

  .analytics-mood-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
  .analytics-mood-seg.mood-positiv { background: var(--good); }
  .analytics-mood-seg.mood-neutral { background: var(--text-faint); }
  .analytics-mood-seg.mood-negativ { background: var(--danger); }
  .analytics-mood-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); }
  .analytics-mood-legend-item { display: inline-flex; align-items: center; gap: 6px; }
  .analytics-mood-legend-item i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
  .analytics-mood-legend-item i.mood-positiv { background: var(--good); }
  .analytics-mood-legend-item i.mood-neutral { background: var(--text-faint); }
  .analytics-mood-legend-item i.mood-negativ { background: var(--danger); }

  .analytics-trend { display: flex; align-items: flex-end; gap: 4px; height: 64px; }
  .analytics-trend-col { flex: 1; height: 100%; display: flex; align-items: flex-end; background: var(--surface-2); border-radius: 3px 3px 0 0; }
  .analytics-trend-fill { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 3px; }

  /* ---------- Auth screen ---------- */
  .auth-page { height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--surface); }
  .auth-card { width: 340px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-6); box-shadow: var(--shadow-md); }
  .auth-tabs { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: var(--sp-5); }
  .auth-tab { flex: 1; border: none; background: var(--bg); color: var(--text-muted); font-size: var(--fs-base); font-weight: 600; padding: 8px; }
  .auth-tab.active { background: var(--accent-tint); color: var(--accent-strong); }
  .auth-error { font-size: var(--fs-sm); color: var(--danger); background: var(--danger-tint); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); }
  .auth-waitlist { text-align: center; }
  .auth-waitlist h1 { font-size: var(--fs-lg); margin: 0 0 var(--sp-3); }
  .auth-waitlist p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; margin: 0 0 var(--sp-5); }

  /* ---------- Connections (live) ---------- */
  .conn-loading, .conn-error { font-size: var(--fs-base); color: var(--text-muted); padding: var(--sp-3) 0; }
  .conn-error { color: var(--danger); }
  .conn-form-error { font-size: var(--fs-sm); color: var(--danger); margin-top: var(--sp-1); }

  /* ---------- Connect success animation ---------- */
  .connect-success-overlay {
    position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0); pointer-events: none; z-index: 50;
    opacity: 0; transition: opacity 0.25s ease, background 0.25s ease;
  }
  .connect-success-overlay.show { opacity: 1; background: rgba(20, 33, 44, 0.15); }
  .connect-success-card {
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-md); padding: var(--sp-6) var(--sp-8); text-align: center;
    transform: scale(0.94); transition: transform 0.25s ease;
  }
  .connect-success-overlay.show .connect-success-card { transform: scale(1); }
  .success-check { width: 52px; height: 52px; margin: 0 auto var(--sp-3); display: block; }
  .success-check-circle {
    stroke: var(--good); stroke-width: 3;
    stroke-dasharray: 145; stroke-dashoffset: 145;
    transition: stroke-dashoffset 0.5s ease 0.1s;
  }
  .success-check-mark {
    stroke: var(--good); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 34; stroke-dashoffset: 34;
    transition: stroke-dashoffset 0.35s ease 0.55s;
  }
  .connect-success-overlay.show .success-check-circle { stroke-dashoffset: 0; }
  .connect-success-overlay.show .success-check-mark { stroke-dashoffset: 0; }
  .success-check-circle.error { stroke: var(--danger); }
  .success-check-mark.error { stroke: var(--danger); stroke-dasharray: 48; stroke-dashoffset: 48; }
  .connect-success-name { font-weight: 700; font-size: var(--fs-lg); margin-bottom: 2px; }
  .connect-success-label { font-size: var(--fs-sm); color: var(--text-muted); }
  @media (prefers-reduced-motion: reduce) {
    .connect-success-overlay, .connect-success-card, .success-check-circle, .success-check-mark { transition: none !important; }
  }

  .badge { display: inline-block; margin: 0 4px 4px 0; }

/* ---------------------------------------------------------------
   Systemnachrichten und Anhänge im Verlauf
   Nachgebaut nach dem bestehenden Ticket-Tool: Systemmeldungen des
   Marktplatzes sind keine Gesprächsbeiträge und sollen sich deutlich
   von Kunde und eigener Antwort abheben.
   --------------------------------------------------------------- */

.msg.system {
  align-self: center;
  max-width: 90%;
  background: transparent;
  border: 1px dashed var(--border, #d8dae0);
  color: var(--text-faint, #6b7280);
  font-size: 0.92em;
}

.msg.system .who { font-weight: 600; letter-spacing: 0.02em; }
.msg.system .msg-body { font-style: italic; }

.msg-files {
  margin: 0.4rem 0 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.msg-files-lbl {
  font-size: 0.85em;
  color: var(--text-faint, #6b7280);
}

.msg-files .att {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border, #d8dae0);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  max-width: 22rem;
}

.msg-files .att img {
  max-width: 5rem;
  max-height: 5rem;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

.msg-files .att span {
  font-size: 0.85em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

  /* ---------- Kartei ---------- */
  .rail-add { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--accent); background: none; border: none; text-align: left; padding: 6px var(--sp-2); cursor: pointer; border-radius: var(--radius-sm); width: 100%; }
  .rail-add:hover { background: var(--surface-hover); }
  .kartei-new-cat-row { display: flex; gap: 4px; padding: var(--sp-2); }
  .kartei-new-cat-row input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 8px; font-size: var(--fs-sm); background: var(--bg); color: var(--text); }

  .kartei-subrow { display: grid; grid-template-columns: 110px 1fr 28px; gap: 6px; margin-bottom: 6px; align-items: center; }
  .kartei-subrow-verlauf { grid-template-columns: 130px 100px 1fr 28px; }
  .kartei-subrow select, .kartei-subrow input {
    border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px;
    font-size: var(--fs-sm); background: var(--surface); color: var(--text); min-width: 0;
  }
  .kartei-subrow select:focus, .kartei-subrow input:focus { border-color: var(--accent); background: var(--bg); }
  .kartei-subrow-remove {
    width: 28px; height: 28px; border: none; background: none; color: var(--text-faint);
    border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
  }
  .kartei-subrow-remove:hover { background: var(--surface-hover); color: var(--danger); }
  .kartei-subrow-remove svg { width: 13px; height: 13px; }
  .ai-notes-empty { color: var(--text-muted); font-style: italic; }

  /* -- Listenzeile: Avatar + Name/Firma/Beziehung/Adresse, KI-Punkt bei vorhandenen KI-Notizen -- */
  .ticket.kartei-list-item { display: flex; align-items: flex-start; gap: var(--sp-3); }
  .kartei-list-avatar {
    flex: none; width: 34px; height: 34px; border-radius: 50%; margin-top: 1px;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xs); font-weight: 700; color: var(--accent-strong);
    background: radial-gradient(circle at 30% 25%, var(--accent-tint), var(--surface-2));
    border: 1px solid var(--border);
  }
  .kartei-list-main { min-width: 0; flex: 1; }
  .kartei-list-ai { color: var(--accent); display: inline-flex; flex: none; }
  .kartei-list-ai svg { width: 12px; height: 12px; }
  .kartei-list-firma {
    font-size: var(--fs-xs); color: var(--text-faint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .kartei-list-address {
    display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--text-faint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .kartei-list-address svg { width: 11px; height: 11px; flex: none; }

  /* -- Detail-Kopf: Avatar mit KI-Abzeichen, Name/Adresse inline editierbar -- */
  .kartei-avatar-wrap { position: relative; flex: none; }
  .kartei-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-lg); font-weight: 700; color: var(--accent-strong);
    background: radial-gradient(circle at 30% 25%, var(--accent-tint), var(--surface-2));
    border: 1px solid var(--border);
  }
  .kartei-ai-badge {
    position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; border: 2px solid var(--bg);
  }
  .kartei-ai-badge[hidden] { display: none; }
  .kartei-ai-badge svg { width: 11px; height: 11px; }
  .kartei-name-input {
    display: block; width: 100%; font-size: var(--fs-xl); font-weight: 700; color: var(--text);
    border: 1px solid transparent; background: transparent; padding: 2px 4px; margin: -2px 0 0 -4px;
    border-radius: var(--radius-sm);
  }
  .kartei-name-input:hover { border-color: var(--border); }
  .kartei-name-input:focus { outline: none; border-color: var(--accent); background: var(--surface-hover); }
  .kartei-address-wrap { position: relative; }
  .kartei-address-row { display: flex; align-items: center; gap: 6px; color: var(--text-faint); cursor: text; margin-top: 3px; }
  .kartei-address-row svg { width: 13px; height: 13px; flex: none; }
  .kartei-address-input {
    width: 100%; font-size: var(--fs-sm); color: var(--text-muted);
    border: 1px solid transparent; background: transparent; padding: 1px 4px; margin-left: -4px; border-radius: var(--radius-sm);
  }
  .kartei-address-row:hover .kartei-address-input { border-color: var(--border); }
  .kartei-address-input:focus { outline: none; border-color: var(--accent); background: var(--surface-hover); color: var(--text); }

  /* Adressvorschläge: schwebt über dem Inhalt darunter statt ihn zu
     verschieben, damit die Kopfzeile beim Tippen nicht ständig hüpft. */
  .kartei-address-suggest {
    position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 4;
    margin: 0; padding: 4px; list-style: none;
    background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md); max-height: 220px; overflow-y: auto;
  }
  .kartei-address-suggest[hidden] { display: none; }
  .kartei-address-suggest li {
    padding: 7px 9px; border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--text);
    cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .kartei-address-suggest li.active,
  .kartei-address-suggest li:hover { background: var(--accent-tint); color: var(--accent-strong); }

  /* Kartenvorschau bleibt bewusst immer hell (Google-eigener Look, kein
     Theming über die iframe-Grenze hinweg möglich) - nur der Rahmen drumherum
     folgt dem App-Theme, damit sie nicht wie ein Fremdkörper wirkt. */
  .kartei-map-wrap { margin-top: var(--sp-2); }
  .kartei-map-wrap[hidden] { display: none; }
  .kartei-map-toggle {
    display: flex; align-items: center; gap: 6px; border: none; background: none; padding: 0 0 4px;
    font-size: var(--fs-xs); font-weight: 600; color: var(--text-faint);
  }
  .kartei-map-toggle:hover { color: var(--text-muted); }
  .kartei-map-toggle-label { display: flex; align-items: center; gap: 5px; }
  .kartei-map-toggle-label svg { width: 12px; height: 12px; flex: none; }
  .kartei-map-chevron { width: 13px; height: 13px; flex: none; transition: transform 0.18s ease; }
  .kartei-map-toggle[aria-expanded="true"] .kartei-map-chevron { transform: rotate(180deg); }
  .kartei-map {
    width: 100%; height: 110px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); overflow: hidden; background: var(--surface);
  }
  .kartei-map[hidden] { display: none; }
  .kartei-map iframe { width: 100%; height: 100%; border: none; display: block; }
  .kartei-cat-pill {
    display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 600;
    letter-spacing: 0.02em; padding: 3px 10px; border-radius: 999px;
    background: var(--accent-tint); color: var(--accent-strong); margin-top: var(--sp-2);
  }

  /* -- Detail-Körper: klar getrennte Karten statt einer langen Formularliste -- */
  .kartei-thread { gap: var(--sp-4); }
  .kartei-section { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); background: var(--surface); }
  .kartei-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-3); }
  .kartei-section-head svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
  .kartei-section-head h3 {
    font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted); margin: 0;
  }
  .kartei-plain-input {
    width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px;
    font-size: var(--fs-base); background: var(--bg); color: var(--text);
  }
  .kartei-plain-input:focus { border-color: var(--accent); outline: none; }

  /* -- "Neuer Kontakt"-Modal, angelehnt an die Kontakte-App auf dem iPhone:
     große Avatar-Initiale oben, Felder in klar getrennten, abgerundeten
     Gruppen mit Trennlinien statt einer langen Formularliste. Nichts wird
     gespeichert, bis auf "Speichern" getippt wird. -- */
  .modal-overlay {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(6, 12, 18, 0.5);
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-4);
  }
  .kartei-neu-card {
    width: 100%; max-width: 420px; max-height: 85vh;
    background: var(--bg); border-radius: 14px; box-shadow: var(--shadow-md);
    display: flex; flex-direction: column; overflow: hidden;
  }
  .kartei-neu-head {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); flex: none;
  }
  .kartei-neu-head h2 { grid-column: 2; font-size: var(--fs-base); font-weight: 700; margin: 0; white-space: nowrap; }
  .kartei-neu-cancel, .kartei-neu-save {
    background: none; border: none; font-size: var(--fs-base); padding: 4px 2px; cursor: pointer;
  }
  .kartei-neu-cancel { color: var(--text-muted); justify-self: start; }
  .kartei-neu-cancel:hover { color: var(--text); }
  .kartei-neu-save { color: var(--accent); font-weight: 700; justify-self: end; }
  .kartei-neu-save:hover { color: var(--accent-strong); }
  .kartei-neu-body {
    padding: var(--sp-5) var(--sp-4) var(--sp-6); overflow-y: auto;
    display: flex; flex-direction: column; gap: var(--sp-5);
  }
  .kartei-neu-avatar-wrap { display: flex; justify-content: center; }
  .kartei-neu-avatar { width: 84px; height: 84px; font-size: 30px; }
  .kartei-neu-group {
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden;
  }
  /* Die Adressgruppe darf ihre Vorschlagsliste nicht am eigenen Rand
     abschneiden - deshalb hier kein overflow:hidden wie bei den anderen
     Gruppen (die brauchen es, damit z. B. der Fokus-Hintergrund der
     Randzeilen nicht über die abgerundeten Ecken hinausragt). */
  .kartei-neu-group--address { overflow: visible; }
  .kartei-neu-row { position: relative; }
  .kartei-neu-row + .kartei-neu-row { border-top: 1px solid var(--border); }
  .kartei-neu-row input[type="text"] {
    display: block; width: 100%; border: none; background: none; color: var(--text);
    font-size: var(--fs-base); padding: 11px var(--sp-4);
  }
  .kartei-neu-row input[type="text"]:focus { outline: none; background: var(--surface-hover); }
  .kartei-neu-row input[type="text"]::placeholder { color: var(--text-faint); }
  .kartei-neu-kontakt-row { display: flex; align-items: center; gap: var(--sp-2); padding: 4px var(--sp-2) 4px var(--sp-4); }
  .kartei-neu-kontakt-row select {
    flex: none; max-width: 100px; border: none; background: none; color: var(--text-muted);
    font-size: var(--fs-sm); font-weight: 600; padding: 8px 2px;
  }
  .kartei-neu-kontakt-row input[type="text"] {
    flex: 1; min-width: 0; width: auto; border: none; background: none; color: var(--text);
    font-size: var(--fs-base); padding: 8px 4px;
  }
  .kartei-neu-kontakt-row input[type="text"]:focus { outline: none; background: none; }
  .kartei-neu-kontakt-row select:focus { outline: none; }
  .kartei-neu-kontakt-remove {
    flex: none; width: 24px; height: 24px; border: none; background: none; color: var(--text-faint);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
  }
  .kartei-neu-kontakt-remove:hover { background: var(--surface-hover); color: var(--danger); }
  .kartei-neu-kontakt-remove svg { width: 12px; height: 12px; }
  .kartei-neu-addrow {
    display: flex; align-items: center; gap: 8px; background: none; border: none; color: var(--accent);
    font-size: var(--fs-base); font-weight: 600; padding: 4px 2px; align-self: flex-start; cursor: pointer;
  }
  .kartei-neu-addrow:hover { color: var(--accent-strong); }
  .kartei-neu-addrow-icon {
    width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; flex: none;
  }

  /* -- Rand-Ausklapper: schmaler Griff am rechten Rand des Detailbereichs,
     rollt bei Hover/Fokus/Klick als Panel aus. Generisches Baumuster
     ("Dock/Handle/Panel"), bewusst nicht Feature-spezifisch benannt -
     aktuell zweifach genutzt (Kartei-Notizen, Bestellinfo im Posteingang),
     soll aber bei Bedarf für weitere Seitenpanels wiederverwendet werden.
     .detail-col bekommt overflow:hidden, damit das eingefahrene Panel nicht
     zu einem horizontalen Seiten-Scrollbalken führt; .detail-main reserviert
     46px, sonst überlappt der ruhende Griff den Löschen/Schließen-Knopf im
     Header bzw. Inhalte am rechten Rand - das Dock liegt als absolutes
     Overlay über .detail-main, nicht daneben. */
  .detail-col { overflow: hidden; }
  .detail-col .detail-main { padding-right: 46px; }
  .edge-dock { position: absolute; top: 0; right: 0; bottom: 0; width: 46px; z-index: 6; }
  .edge-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: 380px; max-width: calc(100vw - 72px);
    display: flex; flex-direction: row; background: var(--bg);
    border-left: 1px solid var(--border); box-shadow: var(--overlay-shadow);
    transform: translateX(calc(100% - 46px));
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .edge-dock:hover .edge-panel,
  .edge-dock:focus-within .edge-panel,
  .edge-dock.pinned .edge-panel { transform: translateX(0); }
  .edge-handle {
    flex: none; width: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; background: linear-gradient(180deg, var(--accent-tint), var(--surface));
    border: none; border-right: 1px solid var(--border); color: var(--accent-strong);
  }
  .edge-handle:hover { background: linear-gradient(180deg, var(--accent-tint), var(--surface-hover)); }
  .edge-handle svg { width: 16px; height: 16px; flex: none; }
  .edge-handle-label {
    writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  .edge-panel-inner { flex: 1; min-width: 0; padding: var(--sp-5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-5); }
  .edge-panel-section h3 {
    display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 700;
    margin: 0 0 var(--sp-2); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em;
  }
  .edge-panel-section h3 svg { width: 14px; height: 14px; color: var(--accent); }
  .edge-panel-section textarea {
    width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px;
    font-size: var(--fs-base); background: var(--surface); color: var(--text); resize: vertical;
    min-height: 130px; font-family: inherit;
  }
  .edge-panel-section textarea:focus { border-color: var(--accent); outline: none; background: var(--bg); }
  .edge-panel-section.accent { border: 1px solid var(--accent-tint); background: var(--accent-tint); border-radius: var(--radius); padding: var(--sp-3); }
  .edge-panel-section.accent .kartei-ai-body { font-size: var(--fs-base); line-height: 1.6; color: var(--text); margin-top: var(--sp-2); }
  .edge-panel-section.accent .kartei-ai-body p { margin: 0; }
  .edge-panel-section .order-field:last-child { margin-bottom: 0; }

  /* -- KI-Notizen: Disclosure-Kopfzeile (Icon + Label + Chevron), Inhalt
     startet eingeklappt und wird per [hidden] auf .kartei-ai-body umgeschaltet
     (siehe app.js kfAiToggle). Scoped auf diese eine .edge-panel-section. */
  .kartei-ai-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: none; padding: 0; margin: 0; cursor: pointer; font: inherit; text-align: left;
  }
  .kartei-ai-toggle-label {
    display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em;
  }
  .kartei-ai-toggle-label svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
  .kartei-ai-toggle:hover .kartei-ai-toggle-label { color: var(--text); }
  .kartei-ai-chevron { width: 14px; height: 14px; flex: none; color: var(--text-muted); transition: transform 0.18s ease; }
  .kartei-ai-toggle[aria-expanded="true"] .kartei-ai-chevron { transform: rotate(180deg); }

  /* ==========================================================================
     ZYAN — Kontakt-Notizen ("Post-it") Komponente
     Prefix: .postit-

     Referenz: Korkbrett-Zettel mit "Washi-Tape"-Streifen oben (::before),
     der die Notiz scheinbar am Brett festhält, plus leichter alternierender
     Rotation pro Karte für den Stapel-Look. Einlagig (kein Eselsohr-Clip
     wie eine frühere Fassung) — Papier, Textur und Schatten sitzen alle auf
     .postit-card selbst.

     WICHTIG: Das Papiergelb ist ein bewusst FIXES, physisches Objekt.
     Es referenziert NIE --bg / --surface / --border / --text und reagiert
     NICHT auf prefers-color-scheme oder [data-theme] — ein Post-it wird im
     dunklen Raum nicht grau, das Papier bleibt in beiden Themes exakt gleich
     gelb. Was sich mit dem Umgebungslicht ändern DARF, ist nur der Schatten
     (siehe Abschnitt 8) — genau wie bei einem echten Zettel im abgedunkelten
     Raum. Interaktive Chrome-Elemente (Composer, Lösch-Button-Hover) DÜRFEN
     die App-Tokens (--surface, --border, --text, --accent, --danger)
     benutzen — das Papier selbst nie.
     ========================================================================== */

  /* 0. Panel-Wrapper — Sizing für den schmalen Seiten-Panel-Slot */
  .postit-panel { width: 100%; max-width: 334px; box-sizing: border-box; }
  .postit-panel *,
  .postit-panel *::before,
  .postit-panel *::after { box-sizing: border-box; }

  /* 1. Composer — Eingabezeile über dem Feed */
  .postit-composer { display: flex; align-items: flex-end; gap: 8px; width: 100%; box-sizing: border-box; padding: 4px 2px 14px; }

  .postit-field { flex: 1 1 auto; min-width: 0; display: inline-grid; align-items: end; }
  .postit-field::after { content: attr(data-value) " "; white-space: pre-wrap; visibility: hidden; }
  .postit-field::after,
  .postit-input { grid-area: 1 / 1; font: inherit; font-size: 13px; line-height: 1.4; padding: 8px 11px; word-break: break-word; }

  .postit-input {
    width: 100%; box-sizing: border-box; margin: 0; resize: none; overflow-y: auto; max-height: 108px;
    font-family: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .postit-input::placeholder { color: var(--text); opacity: 0.45; }
  .postit-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(90, 150, 230, 0.18);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
  }

  .postit-send {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; border: none; border-radius: 9px; background: var(--accent);
    color: #fff; cursor: pointer; transition: filter 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
  }
  .postit-send svg { width: 15px; height: 15px; }
  .postit-send:hover { filter: brightness(1.08); }
  .postit-send:active { transform: scale(0.94); }
  .postit-send:disabled { opacity: 0.4; cursor: default; filter: none; }

  /* 2. Feed — vertikal gestapelt, neueste Notiz oben. Seitliches Luftpolster,
     damit die Rotation der Karten nicht am Panel-Rand beschnitten wird. */
  .postit-feed { display: flex; flex-direction: column; gap: 20px; list-style: none; margin: 0; padding: 10px 6px 24px; }
  .postit-empty { padding: var(--sp-2) 8px; font-size: var(--fs-base); color: var(--text-muted); font-style: italic; }

  /* 3. Post-it Karte — Papier, Textur und Schatten direkt auf der Karte,
     FIXE theme-unabhängige Farben (siehe Kommentar oben). */
  .postit-card {
    --postit-rot: -1.6deg;
    --paper-top: #fff6b0; --paper-bottom: #ffe97a; --ink: #4a3c14; --ink-soft: #6b5a24;
    --tape: rgba(255, 255, 255, 0.55); --tape-edge: rgba(255, 255, 255, 0.18);
    --shadow-soft: rgba(48, 38, 10, 0.16); --shadow-hard: rgba(48, 38, 10, 0.26);

    position: relative; box-sizing: border-box; padding: 16px 13px 11px; color: var(--ink);
    /* leicht "organische" statt perfekt runde Ecken — wirkt wie echtes,
       nicht maschinell gestanztes Papier */
    border-radius: 2px 9px 3px 10px / 8px 3px 9px 2px;
    background-image:
      repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.09) 0 2px, transparent 2px 6px),
      linear-gradient(165deg, var(--paper-top), var(--paper-bottom));
    /* dreifacher Schatten: Kontaktschatten (eng) + Ambient + weicher
       Wurfschatten — wirkt, als läge das Papier physisch auf der Fläche */
    box-shadow:
      0 1px 1px var(--shadow-soft),
      0 5px 9px -3px var(--shadow-soft),
      0 16px 22px -14px var(--shadow-hard);
    transform: rotate(var(--postit-rot));
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .postit-card:nth-child(even) { --postit-rot: 1.2deg; }

  /* "Washi-Tape" am oberen Rand — hält die Notiz scheinbar am Brett fest,
     rotiert leicht gegenläufig zur Karte für den Cork-Board-Look. */
  .postit-card::before {
    content: ""; position: absolute; top: -9px; left: 50%; width: 46px; height: 16px;
    background: linear-gradient(var(--tape-edge), var(--tape) 35%, var(--tape) 65%, var(--tape-edge));
    box-shadow: 0 1px 2px rgba(30, 22, 0, 0.18);
    transform: translateX(-50%) rotate(calc(var(--postit-rot) * -1.6));
    pointer-events: none;
  }

  .postit-card:hover,
  .postit-card:focus-within {
    transform: translateY(-3px) rotate(0deg) scale(1.015);
    box-shadow:
      0 2px 3px var(--shadow-soft),
      0 12px 16px -4px var(--shadow-hard),
      0 24px 30px -16px var(--shadow-hard);
    z-index: 2;
  }

  /* 4. Text + Zeitstempel */
  .postit-text {
    margin: 0; padding-right: 16px; font-size: 13.5px; line-height: 1.5; color: var(--ink);
    white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
  }
  .postit-meta { display: flex; justify-content: flex-end; margin-top: 8px; }
  .postit-time { font-size: 11px; color: var(--ink-soft); opacity: 0.85; letter-spacing: 0.01em; }

  /* 5. Lösch-Button — nutzt bewusst App-Chrome-Tokens (--danger), nicht das Papier */
  .postit-delete {
    position: absolute; top: 6px; right: 6px; width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%;
    background: rgba(0, 0, 0, 0.06); color: var(--ink-soft); cursor: pointer; opacity: 0; transform: scale(0.85);
    transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  }
  .postit-card:hover .postit-delete,
  .postit-card:focus-within .postit-delete,
  .postit-delete:focus-visible { opacity: 1; transform: scale(1); }
  .postit-delete:hover,
  .postit-delete:focus-visible { background: var(--danger); color: #fff; outline: none; }
  .postit-delete svg { width: 10px; height: 10px; }

  /* 6. Dark Theme — NUR der Schatten reagiert (Umgebungslicht), niemals das
     Papier selbst. Auf dunklem Grund braucht der Schatten mehr Deckkraft. */
  @media (prefers-color-scheme: dark) {
    .postit-card { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.45), 0 6px 14px rgba(0, 0, 0, 0.4), 0 18px 24px -14px rgba(0, 0, 0, 0.5); }
    .postit-card:hover, .postit-card:focus-within {
      box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5), 0 12px 18px -4px rgba(0, 0, 0, 0.5), 0 26px 32px -16px rgba(0, 0, 0, 0.55);
    }
  }
  :root[data-theme="dark"] .postit-card { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.45), 0 6px 14px rgba(0, 0, 0, 0.4), 0 18px 24px -14px rgba(0, 0, 0, 0.5); }
  :root[data-theme="dark"] .postit-card:hover,
  :root[data-theme="dark"] .postit-card:focus-within {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5), 0 12px 18px -4px rgba(0, 0, 0, 0.5), 0 26px 32px -16px rgba(0, 0, 0, 0.55);
  }

  /* 7. Optionaler Eintritts-Pop für eine frisch gesendete Notiz.
     app.js fügt beim Erzeugen kurz die Klasse .postit-card--enter hinzu. */
  @media (prefers-reduced-motion: no-preference) {
    .postit-card--enter { animation: postit-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
    @keyframes postit-pop {
      from { opacity: 0; transform: scale(0.85) translateY(6px) rotate(0deg); }
      to { opacity: 1; transform: scale(1) translateY(0) rotate(var(--postit-rot)); }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .postit-card,
    .postit-send,
    .postit-delete { transition: none; }
  }

/* ---------------------------------------------------------------
   Antwortfrist und Wartezeit
   Kaufland verlangt Antwort binnen 48 Stunden; die Farbe zeigt, wie
   dringend es ist - grün über 12 Stunden Rest, gelb darunter, rot
   nach Ablauf.
   --------------------------------------------------------------- */

.tw-wait {
  color: var(--text-faint, #6b7280);
  font-size: 0.85em;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.tw-frist {
  font-size: 0.85em;
  font-weight: 600;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  margin-left: 0.4rem;
}

.tw-ok   { color: #15803d; background: rgba(21, 128, 61, 0.12); }
.tw-warn { color: #b45309; background: rgba(180, 83, 9, 0.14); }
.tw-late { color: #b91c1c; background: rgba(185, 28, 28, 0.14); }

.ticket-preview {
  font-size: 0.9em;
  color: var(--text-muted, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0.15rem 0 0.3rem;
}

.ticket-preview-who { font-weight: 700; color: var(--text, #111827); }

/* ---------------------------------------------------------------
   Verbindungen: mehrere Konten, Bearbeiten
   --------------------------------------------------------------- */

.conn-h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 1.4rem 0 0.6rem;
  color: var(--text-faint, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.conn-h3:first-child { margin-top: 0; }

.conn-edit {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border, #d8dae0);
}

.conn-edit[hidden] { display: none; }

.tarif-hinweis {
  margin-top: 0.5rem;
  font-size: 0.88em;
  color: var(--danger);
  background: var(--danger-tint);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  display: inline-block;
}

/* Warnhinweis beim Anbinden - etwa dass Otto und Amazon nicht erkennen
   können, ob eine Anfrage im Portal schon beantwortet wurde. */
.conn-warnung {
  background: var(--danger-tint);
  border-left: 3px solid var(--danger);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.8rem;
  font-size: 0.9em;
  line-height: 1.45;
}

/* Ausgabe der Anbindungs-Diagnose. Feste Schriftbreite, damit die Spalten
   untereinander stehen; eigener Rollbereich, damit lange Betreffzeilen die
   Seite nicht in die Breite ziehen. */
.conn-diagnose {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
  max-height: 420px;
  overflow-y: auto;
}

/* --- Sammelauswahl im Posteingang ------------------------------------ */
/* Das Kaestchen erscheint erst beim Ueberfahren der Zeile - dauerhaft
   sichtbar wuerde es die Liste unruhig machen. Ausgewaehltes bleibt
   natuerlich stehen, sonst waere nicht erkennbar, was markiert ist. */
.ticket-check {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: transparent;
  display: inline-block;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, border-color .12s ease, background-color .12s ease;
}
.ticket:hover .ticket-check,
.ticket-check.an,
.ticket-check:focus-visible { opacity: 1; }
.ticket-check:hover { border-color: var(--accent, #3b82f6); }

.ticket-check.an,
.bulk-check.an,
.bulk-check.teil {
  background: var(--accent, #3b82f6);
  border-color: var(--accent, #3b82f6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}
/* Teilauswahl: Strich statt Haken, wie man es von Tabellen kennt. */
.bulk-check.teil {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E");
}

/* Die Leiste erscheint nur, wenn etwas ausgewaehlt ist, und bleibt beim
   Blaettern oben stehen - wer unten etwas auswaehlt, soll den Knopf nicht
   suchen muessen. */
.bulk-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .05);
}
.bulk-check {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  cursor: pointer;
}
.bulk-count { font-size: var(--fs-sm, 13px); font-weight: 600; }

/* Unterpunkte der Kanalleiste, etwa Ottos Anfragen und Klaerfaelle.
   Eingerueckt mit einem Zweigstrich, damit die Zugehoerigkeit ohne
   Beschriftung erkennbar ist. */
.rail-item.rail-sub {
  padding-left: 26px;
  font-size: var(--fs-sm, 13px);
  position: relative;
}
.rail-zweig {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 7px;
  height: 1px;
  background: var(--border-strong);
}
.rail-item.rail-sub::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 50%;
  width: 1px;
  background: var(--border);
}

/* ==========================================================================
   Mobile-Unterstützung (< 860px)
   Bewusst als letzter Block in der Datei: mehrere hier überschriebene
   Selektoren (.settings-layout, .coldreach-columns) haben ihre
   unbedingte Basis-Regel an anderer Stelle in dieser Datei - eine
   @media-Regel bekommt dadurch KEINE zusätzliche Spezifität, bei
   gleicher Spezifität gewinnt sonst schlicht die spätere Quellposition.
   Ohne diesen Block ganz am Ende würden diese zwei Basis-Regeln die
   Mobile-Overrides je nach ihrer eigenen Position wieder zunichtemachen
   (genau das ist beim ersten Versuch mitten in der Datei passiert und
   erst durch Nachprüfen der späteren Basis-Regeln aufgefallen).

   Die zwei-/dreispaltigen Grid-Layouts (Posteingang, Kartei - teilen sich
   .body, siehe Kommentar bei INBOX_SIZE_KEY in app.js -, Cold Reaching,
   Einstellungen) hatten bis hierhin keinen Fallback: feste Pixel-
   Spaltenbreiten (z. B. 200px + 340px + 1fr), die auf einem Telefon-
   Display (~375px) schon bei der zweiten Spalte überlaufen.
   Lösung: horizontales Scroll-Snap-Paging statt Nebeneinander - jede
   Spalte nimmt die volle Breite ein, man wischt zwischen ihnen statt sie
   gleichzeitig zu sehen (ähnlich wie native Mail-Apps). Bewusst reines
   CSS ohne neuen JS-Navigationszustand - kein Risiko für den
   bestehenden Desktop-Ablauf, nur unterhalb der Breite überhaupt aktiv.
   Noch nicht angefasst: Discord-Konfigurationsseite (hat oben ihren
   eigenen, kleineren Breakpoint), einzelne Formulare/Detailkarten - siehe
   LAUNCH-CHECKLIST.md für den aktuellen Stand.
   ========================================================================== */
@media (max-width: 860px) {
  /* Formular-Raster (.form-grid, z. B. Firma-Einstellungen) auf eine
     Spur zurück - bei vier echten Spalten würden PLZ/Stadt/Land & Co.
     auf schmalen Bildschirmen sonst auf ein paar Pixel zusammenschrumpfen.
     span-1/2/4 explizit auf "volle Breite" überschrieben statt es der
     impliziten Grid-Platzierung zu überlassen - ein einzelnes Feld mit
     z. B. span-2 in einem nur einspaltigen Raster würde sonst eine
     zusätzliche, leere zweite Spur erzeugen statt einfach voll zu sein. */
  .form-grid { grid-template-columns: 1fr; max-width: 100%; }
  .form-grid .span-1, .form-grid .span-2, .form-grid .span-4 { grid-column: 1 / -1; }
  .body, .inbox-body, .coldreach-columns {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .rail, .list-col, .detail-col, .coldreach-col {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100vw;
    scroll-snap-align: start;
  }
  /* Ziehgriffe zum Spaltenverstellen ergeben bei einer Spalte pro
     Bildschirm keinen Sinn und stören nur beim Wischen. */
  .resize-handle { display: none; }

  /* Topbar (Posteingang): Suche + Aktualisieren + Nutzer-Zeile passten
     nebeneinander nicht in eine schmale Spalte - erzwang bisher Umbruch
     auf ganzer Dokumentebene statt nur innerhalb der Topbar (sichtbar an
     einem 26px-Streifen der Icon-Leiste, der stehen blieb). `.search`
     fehlte `min-width: 0` (siehe oben, global behoben - Flexbox-
     Vorgabewert ist `auto`, nicht `0`); hier zusätzlich zwei Zeilen statt
     einer, damit nichts mehr eng wird.  */
  .topbar { flex-wrap: wrap; height: auto; min-height: 52px; padding: var(--sp-2) var(--sp-4); row-gap: var(--sp-2); }
  .topbar-right { margin-left: 0; flex-basis: 100%; }
  /* Nettes Extra, kein Kerninhalt - auf der schmalen Zeile lieber Platz
     für Suche und Aktualisieren-Knopf lassen. */
  .last-updated { display: none; }

  /* Einstellungen: Reiter-Leiste wird zu einer waagerecht scrollbaren
     Zeile über dem Inhalt statt einer Spalte daneben. */
  .settings-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .settings-layout .rail {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: var(--sp-2) var(--sp-3);
  }
  .settings-layout .rail-item { flex: none; }

  /* Feste 340px-Karte würde auf den schmalsten Displays (~320-360px)
     knapp überlaufen. */
  .auth-card { max-width: 92vw; }
}

/* =====================================================================
   Handy-Navigation (2026-09-10), nur unter 860px - Desktop unverändert.
   Entwurf: Claude-Design-Leinwand "ZYAN Mobile". Vier Entscheidungen:
   1) Tab-Leiste unten statt der 72px-Seitenleiste - volle Breite für den
      Inhalt, alles mit dem Daumen erreichbar.
   2) Kanal-/Kategorieleiste (.rail) als seitlich scrollbare Chips ÜBER der
      Liste statt als eigene Wisch-Spalte.
   3) Detail (Ticket/Kontakt) als eigene Seite, die sich über die Liste
      schiebt, mit Zurück-Knopf (.detail-mobilebar) - kein Wischen mehr.
      Bestellung/Notizen (.edge-dock) als aufklappbare Leiste oben statt
      als 46px-Randstreifen.
   4) Einstellungen: Reiter als Liste, Inhalt als eigene Seite mit Zurück.
   Überschreibt die älteren Mobile-Regeln oben (gleiche Media-Query, steht
   später in der Datei, gleiche oder höhere Spezifität).
   ===================================================================== */
@media (max-width: 860px) {
  /* --- 1) Tab-Leiste unten --- */
  .shell { grid-template-columns: 1fr; }
  .mainnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    flex-direction: row; align-items: stretch; justify-content: space-around;
    padding: 0 var(--sp-1) env(safe-area-inset-bottom, 0px); gap: 0;
    border-right: none; border-top: 1px solid var(--border);
  }
  .mainnav .mark, .mainnav .nav-spacer, .mainnav #themeToggle { display: none; }
  .navbtn {
    flex: 1 1 0; min-width: 0; width: auto; height: auto;
    flex-direction: column; gap: 3px; border-radius: 0;
    font-size: 10.5px; font-weight: 600; padding: 6px 2px;
  }
  .navbtn.active { background: none; }
  .navbtn svg { width: 22px; height: 22px; }
  .navbtn .soon-dot { top: 8px; right: calc(50% - 16px); }
  .navlabel { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100%; overflow: hidden; line-height: 1.15; text-align: center; }
  .mainnav .avatar { margin: 0; align-self: center; flex: none; }
  .page { height: calc(100vh - 64px - env(safe-area-inset-bottom, 0px)); }

  /* --- 2) Kanal-/Kategorie-Chips über der Liste --- */
  .body, .inbox-body, .inbox-body.rail-collapsed {
    display: flex; flex-direction: column; overflow: hidden;
    grid-template-columns: none; scroll-snap-type: none;
  }
  .body .rail {
    flex: none; width: 100%; max-width: 100%; scroll-snap-align: none;
    flex-direction: row; align-items: center; gap: 6px;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    padding: var(--sp-2) var(--sp-4) var(--sp-3);
    border-right: none; border-bottom: 1px solid var(--border);
    scrollbar-width: none;
  }
  .body .rail::-webkit-scrollbar { display: none; }
  .body .rail-section-row, .body .rail-toggle { display: none; }
  .body #filterNav, .body #karteiCatNav { display: flex; gap: 6px; flex: none; }
  .body .rail-item {
    flex: none; width: auto; height: 36px; padding: 0 12px; gap: 6px;
    border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
    font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  }
  .body .rail-item.active { border-color: transparent; }
  .body .rail-item .count { margin-left: 0; }
  .body .rail-item .rail-zweig { display: none; }
  .body .rail-add { flex: none; white-space: nowrap; }
  .body .list-col { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; border-right: none; scroll-snap-align: none; }

  /* --- 3) Detail als eigene Seite --- */
  .body .detail-col {
    position: fixed; left: 0; right: 0; top: 0;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 20;
    width: 100%; max-width: 100%; flex-direction: column; background: var(--bg);
    transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.22, 0.68, 0.24, 1);
    scroll-snap-align: none;
  }
  .body.detail-open .detail-col { transform: none; }
  .detail-mobilebar {
    display: flex; align-items: center; gap: var(--sp-2); order: 0; flex: none;
    min-height: 52px; padding: 0 var(--sp-3) 0 var(--sp-1);
    border-bottom: 1px solid var(--border); background: var(--bg);
  }
  .detail-back {
    width: 44px; height: 44px; border: none; background: none; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex: none;
  }
  .detail-back:hover { background: var(--surface-hover); color: var(--text); }
  .detail-back svg { width: 20px; height: 20px; }
  .detail-mobilebar .title { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .detail-main { order: 2; flex: 1 1 auto; min-height: 0; }
  .detail-col .detail-main { padding-right: 0; }
  .detail-header { padding: var(--sp-3) var(--sp-4); }
  .detail-header-main h2 { font-size: var(--fs-lg); }
  .thread { padding: var(--sp-4); gap: var(--sp-3); }
  .msg { max-width: 88%; }
  .composer { padding: var(--sp-3) var(--sp-4); }
  .composer textarea { min-height: 48px; }
  .composer-actions .btn { min-height: 44px; white-space: nowrap; }
  .kl-aktion-panel { margin: var(--sp-3) var(--sp-4) 0; }
  .kl-aktion-knoepfe .btn { min-height: 44px; }
  .detail-actions { flex-wrap: wrap; }
  /* Bestellung/Notizen: aufklappbare Leiste oben statt Randstreifen */
  .edge-dock { position: static; width: 100%; order: 1; flex: none; z-index: auto; }
  .edge-panel {
    position: static; width: 100%; max-width: 100%; flex-direction: column;
    transform: none; transition: none; box-shadow: none;
    border-left: none; border-bottom: 1px solid var(--border);
  }
  .edge-dock:hover .edge-panel, .edge-dock:focus-within .edge-panel { transform: none; }
  .edge-handle {
    width: 100%; min-height: 44px; flex-direction: row; justify-content: flex-start;
    gap: var(--sp-2); padding: 0 var(--sp-4); border-right: none;
  }
  .edge-handle-label { writing-mode: horizontal-tb; transform: none; }
  .edge-handle::after {
    content: ""; margin-left: auto; width: 8px; height: 8px; flex: none;
    border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
    transform: rotate(45deg); transition: transform 0.15s ease;
  }
  .edge-dock.pinned .edge-handle::after { transform: rotate(-135deg); }
  .edge-panel-inner { display: none; }
  .edge-dock.pinned .edge-panel-inner { display: flex; max-height: 40vh; overflow-y: auto; padding: var(--sp-4); }
  /* Die Leiste selbst trägt schon die Überschrift (Bestellung/Notizen). */
  .edge-dock.pinned .edge-panel-section > h3 { display: none; }

  /* --- 4) Einstellungen: Liste -> Inhalt als eigene Seite --- */
  .settings-layout { display: flex; flex-direction: column; grid-template-columns: none; grid-template-rows: none; }
  .settings-layout .rail {
    flex: 1 1 auto; min-height: 0; flex-direction: column; align-items: stretch; gap: 0;
    overflow-x: hidden; overflow-y: auto; padding: var(--sp-2) var(--sp-4); border-bottom: none;
  }
  .settings-layout .rail-item {
    flex: none; width: 100%; min-height: 52px; padding: 0 var(--sp-2);
    border: none; border-bottom: 1px solid var(--border); border-radius: 0; background: none;
    font-size: var(--fs-md); font-weight: 600; color: var(--text); text-align: left;
  }
  .settings-layout .rail-item.active { background: none; color: var(--text); }
  .settings-layout .rail-item::after {
    content: ""; margin-left: auto; width: 8px; height: 8px; flex: none;
    border-right: 1.8px solid var(--text-faint); border-bottom: 1.8px solid var(--text-faint);
    transform: rotate(-45deg);
  }
  .settings-layout .settings-body {
    position: fixed; left: 0; right: 0; top: 0;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 20;
    max-width: none; padding: 0; background: var(--bg); overflow-y: auto;
    transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.22, 0.68, 0.24, 1);
  }
  .settings-layout.tab-open .settings-body { transform: none; }
  .settings-layout #settingsContent { padding: var(--sp-4); }

  /* --- Kein Auto-Zoom auf iOS: Eingabefelder mindestens 16px --- */
  input, select, textarea { font-size: 16px; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .body .detail-col, .settings-layout .settings-body { transition: none; }
}