: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; }

  /* ---------- Top bar (inbox page) ----------
     Eine einzige, kompakte Zeile - Kennzahlen (früher ein eigenes
     ausziehbares Panel darüber, siehe Git-Historie) und Suche (früher
     dauerhaft auf 420px Breite ausgezogen) wurden bewusst verschlankt,
     damit der Posteingang darunter mehr Höhe bekommt. */
  /* overflow-x: clip - falls doch einmal etwas nicht passt (sehr lange
     E-Mail, andere Sprache), wird das Dokument nicht seitlich scrollbar.
     Alle Bedienelemente 32px hoch, damit Lupe, Streifen und Knopf auf
     derselben Ober-/Unterkante sitzen. */
  .topbar { display: flex; align-items: center; gap: var(--sp-5); padding: 0 var(--sp-6); height: 56px; border-bottom: 1px solid var(--border); flex: none; overflow-x: clip; }
  .topbar-divider { width: 1px; height: 22px; background: var(--border); flex: none; }
  .topbar-right-group { display: flex; align-items: center; gap: var(--sp-4); margin-left: auto; min-width: 0; }

  /* Generisches Suchfeld mit Lupe links im Feld - Kartei-Popover,
     Kaltakquise, Add-ons. Die Topbar-Suche (unten, .topbar-search) ist
     eine andere Bauart: nur die Lupe, Feld klappt auf. */
  .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; }

  /* Suche: nur die Lupe ist ständig da. Das Feld klappt seitlich auf,
     sobald die Maus über der Lupe steht (:hover), beim Klick/Tab (:focus-
     within) oder per Taste "/" - und bleibt offen, solange ein Suchbegriff
     aktiv ist (.search-open, siehe app.js::wireSearchToggle()). Vorher
     stand es dauerhaft mit ~420px in der Leiste. */
  .topbar-search { display: flex; align-items: center; flex: none; }
  .search-toggle {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--radius);
    background: none; color: var(--text-muted); cursor: pointer;
  }
  .topbar-search:hover .search-toggle,
  .topbar-search:focus-within .search-toggle { background: var(--surface); color: var(--text); }
  .search-toggle svg { width: 16px; height: 16px; }
  .topbar-search input {
    width: 0; min-width: 0; padding: 6px 0; margin-left: 0;
    border: 1px solid transparent; border-radius: var(--radius);
    background: var(--surface); color: var(--text); font-size: var(--fs-base);
    opacity: 0;
    /* Zuklappen leicht verzögert - ein kurzes Überstreichen der Lupe
       soll nicht flackern. Aufklappen (unten) dagegen sofort. */
    transition: width 180ms ease 160ms, opacity 120ms ease 160ms, padding 180ms ease 160ms, margin-left 180ms ease 160ms;
  }
  .topbar-search:hover input,
  .topbar-search:focus-within input,
  .topbar-search.search-open input {
    width: 220px; padding: 6px var(--sp-3); margin-left: 4px; opacity: 1; border-color: var(--border);
    /* Hover-Absicht: erst öffnen, wenn der Zeiger kurz auf der Lupe
       verweilt - ein bloßes Vorbeifahren schiebt den Streifen nicht. */
    transition-delay: 150ms;
  }
  .topbar-search:focus-within input,
  .topbar-search.search-open input { transition-delay: 0s; }
  /* Ohne Bewegung (prefers-reduced-motion) sollen die Verzögerungen
     trotzdem gelten - sonst springt das Feld beim Vorbeifahren auf und zu.
     Die globale Regel oben (`* { transition: none !important }`) würde
     auch die Verzögerung löschen. */
  @media (prefers-reduced-motion: reduce) {
    .topbar-search input { transition: width 0s 160ms, opacity 0s 160ms, padding 0s 160ms, margin-left 0s 160ms !important; }
    .topbar-search:hover input { transition-delay: 150ms !important; }
    .topbar-search:focus-within input,
    .topbar-search.search-open input { transition-delay: 0s !important; }
  }
  .topbar-search input::placeholder { color: var(--text-faint); }
  .topbar-search input:focus { border-color: var(--accent); background: var(--bg); }

  /* Kennzahlen - vormals eigenes, eigenzeiliges "Greet-Panel" zum
     Herunterziehen, jetzt direkt in der Topbar als ein zusammenhängender
     Streifen: die offene Zahl vorn als gefülltes Segment (das Einzige in
     der Leiste, das Farbe trägt), die Aufschlüsselung als ruhige Segmente
     daneben. Zahlen fett und tabular, damit sie beim Aktualisieren nicht
     springen. */
  /* Rahmen als Innenschatten statt border: das gefüllte Segment deckt ihn
     dann ab (kein heller Saum ums Blau), bei den übrigen bleibt er sichtbar. */
  .topbar-stats {
    display: inline-flex; align-items: stretch; flex: none; height: 32px;
    box-shadow: inset 0 0 0 1px var(--border); border-radius: var(--radius); overflow: hidden;
    font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap;
    background: var(--bg);
  }
  .topbar-stat {
    display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--sp-4);
    border-right: 1px solid var(--border); font-variant-numeric: tabular-nums;
  }
  .topbar-stat:last-child { border-right: none; }
  .topbar-stat strong { color: var(--text); font-weight: 700; font-size: var(--fs-md); }
  /* --accent-strong als Füllung: im hellen Schema das dunklere Blau (weiß
     darauf 6,7:1 - das normale --accent läge mit 4,3:1 unter AA), im
     dunklen das helle Blau mit dunkler Schrift (var(--bg)) - beides ohne
     eigene Dark-Regel. */
  .topbar-stat-primary { background: var(--accent-strong); color: var(--bg); font-weight: 600; font-size: var(--fs-base); border-right-color: transparent; }
  .topbar-stat-primary strong { color: var(--bg); font-size: var(--fs-lg); }
  /* Nachrangig durch die letzte Position, nicht durch Blässe - --text-faint
     lag im hellen Schema unter 3:1. */
  .topbar-stat-muted { color: var(--text-muted); }
  .topbar-stat-muted strong { color: var(--text); font-size: var(--fs-base); }
  .topbar-stats-empty { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; color: var(--good); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
  .topbar-stats-empty svg { width: 15px; height: 15px; flex: none; }

  /* Zwischen Tablet-Umbruch (860px, unten) und ~1270px passt nicht alles
     nebeneinander - erst der Zeitstempel weicht (nettes Extra), dann das
     schwächste Kennzahlen-Segment, zuletzt die Nutzerzeile (der Nutzer
     steht ohnehin unten in der Icon-Leiste). Nie umbrechen, nie
     abschneiden. */
  @media (max-width: 1270px) { .last-updated { display: none; } }
  @media (max-width: 1100px) { .topbar-stat-muted { display: none; } .topbar-stat:nth-last-child(2) { border-right: none; } }
  @media (max-width: 1000px) { .topbar-right { display: none; } }
  /* Die aufgeklappte Suche braucht 222px mehr. Gemessen ohne diese Regeln:
     1440px -> 46px Überhang, 1366 -> 120px, 1280 -> 206px, und die ganze
     Seite wurde seitlich scrollbar. Deshalb weicht bei offener Suche auf
     Notebook-Breiten der Zeitstempel (159px), darunter auch das schwächste
     Segment. Der ~-Selektor überlebt aktualisiereGruszPanel() (outerHTML
     erhält die Geschwisterreihenfolge). */
  @media (max-width: 1480px) {
    .topbar-search:hover ~ .topbar-right-group .last-updated,
    .topbar-search:focus-within ~ .topbar-right-group .last-updated,
    .topbar-search.search-open ~ .topbar-right-group .last-updated { display: none; }
  }
  @media (max-width: 1330px) {
    .topbar-search:hover ~ .topbar-stats .topbar-stat-muted,
    .topbar-search:focus-within ~ .topbar-stats .topbar-stat-muted,
    .topbar-search.search-open ~ .topbar-stats .topbar-stat-muted { display: none; }
    .topbar-search:hover ~ .topbar-stats .topbar-stat:nth-last-child(2),
    .topbar-search:focus-within ~ .topbar-stats .topbar-stat:nth-last-child(2),
    .topbar-search.search-open ~ .topbar-stats .topbar-stat:nth-last-child(2) { border-right: none; }
  }
  @media (max-width: 1100px) {
    .topbar-search:hover ~ .topbar-right-group .topbar-right,
    .topbar-search:focus-within ~ .topbar-right-group .topbar-right,
    .topbar-search.search-open ~ .topbar-right-group .topbar-right { display: none; }
  }

  /* Rechts ruhiges Chrome: die Kennzahlen bleiben das einzige starke
     Element der Zeile. min-width/ellipsis als Sicherheitsnetz - im
     Notfall endet der Nutzertext mit "…" statt hart am Bildrand. */
  .topbar-right { font-size: var(--fs-sm); color: var(--text-faint); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .topbar-right strong { color: var(--text-muted); font-weight: 500; }
  .last-updated { flex: none; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  #refreshBtn { flex: none; min-height: 32px; padding-top: 0; padding-bottom: 0; }
  #refreshBtn svg { width: 13px; height: 13px; }

  /* Kopfzeile der Nebenseiten (Einstellungen, Kartei, Profil, Addons):
     dieselbe Höhe und Anmutung wie die Posteingang-Topbar - Titel links,
     Aktionen rechts (.simple-header-actions). Vorher eine 64px-Zeile mit
     nur dem Titel. */
  .simple-header { display: flex; align-items: center; gap: var(--sp-4); min-height: 56px; padding: var(--sp-2) var(--sp-6); border-bottom: 1px solid var(--border); flex: none; }
  .simple-header h1 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); font-weight: 600; margin: 0; }
  .simple-header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }

  /* ---------- 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; }
  /* Titel, Zähler und Sortierung in EINER Zeile - vorher stand die
     Sortier-/Kategorie-Leiste als eigene Zeile darunter (und brach in der
     schmalen Spalte auf zwei Zeilen um), zusammen ~110px vor dem ersten
     Ticket. */
  .list-header { padding: var(--sp-3) var(--sp-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-height: 48px; }
  .list-header h1 { font-size: var(--fs-lg); font-weight: 600; margin: 0; white-space: nowrap; }
  .list-header .sub { font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
  /* Reicht die Spaltenbreite nicht, rutschen beide Dropdowns zusammen als
     Block in eine zweite Zeile - nie einzeln. */
  .list-header .triage-toolbar { margin-left: auto; display: flex; flex: none; align-items: center; gap: 6px; }
  .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; }
  /* Kategorie + Sortierung als zwei kompakte <select>s rechts im
     Listenkopf (siehe .list-header .triage-toolbar oben). */
  .triage-toolbar-field { display: flex; align-items: center; 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; }
  .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: 9px 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: 2px; }
  .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: 4px; }
  .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-3) 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; }
  /* Zwei Zeilen statt vier: Name + E-Mail + Kartei-Verknüpfung, darunter
     Betreff + Marktplatz/Anbindung/Bestellstatus. */
  .detail-header-main h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--sp-2); font-size: var(--fs-xl); font-weight: 600; margin: 0 0 2px; }
  .detail-header-main .detail-email { color: var(--text-faint); font-weight: 400; font-size: var(--fs-base); }
  .detail-header-main .subject { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--sp-3); font-size: var(--fs-base); color: var(--text-muted); margin: 0; }
  .detail-header-main .meta-row { display: inline-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); }
  .thread-hinweis { font-size: var(--fs-xs); color: var(--text-faint); text-align: center; }
  /* Fehler beim Nachladen: eine Karte mit Symbol, Text und "Erneut
     versuchen" statt einer roten Textzeile. Die bekannte letzte Nachricht
     steht weiterhin darüber. */
  .thread-fehler {
    display: flex; align-items: center; gap: var(--sp-3); max-width: 640px;
    padding: var(--sp-3) var(--sp-4); border: 1px solid var(--danger-tint); border-radius: var(--radius);
    background: var(--danger-tint); color: var(--text); font-size: var(--fs-sm); text-align: left;
  }
  .thread-fehler > svg { width: 16px; height: 16px; flex: none; color: var(--danger); }
  .thread-fehler-text { flex: 1; min-width: 0; }
  .thread-fehler .btn { flex: none; background: var(--bg); }
  /* Platzhalter-Verlauf beim Nachladen (app.js::threadSkeletonHtml()) */
  .skeleton-msg { max-width: 640px; width: 78%; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); display: flex; flex-direction: column; gap: 9px; }
  .skeleton-msg.from-agent { margin-left: auto; width: 62%; background: var(--accent-tint); border-color: transparent; }
  .skeleton-line {
    height: 10px; border-radius: 5px;
    background: linear-gradient(90deg, var(--border) 0%, var(--surface-2) 40%, var(--border) 80%);
    background-size: 220% 100%; animation: skeleton-schimmer 1.4s ease-in-out infinite;
  }
  .skeleton-msg.from-agent .skeleton-line { background: linear-gradient(90deg, rgba(127, 127, 127, 0.18) 0%, rgba(127, 127, 127, 0.08) 40%, rgba(127, 127, 127, 0.18) 80%); background-size: 220% 100%; }
  .skeleton-line.w-25 { width: 25%; } .skeleton-line.w-30 { width: 30%; } .skeleton-line.w-45 { width: 45%; }
  .skeleton-line.w-60 { width: 60%; } .skeleton-line.w-80 { width: 80%; } .skeleton-line.w-90 { width: 90%; } .skeleton-line.w-95 { width: 95%; }
  @keyframes skeleton-schimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
  .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; }

  /* ---------- Seitenfeld Anliegen / Bestellung / Kunde (.edge-panel) ----------
     Schlüssel-Wert-Raster statt gestapelter Felder mit 16px Abstand - dicht,
     aber lesbar; nur Zeilen mit Inhalt (siehe app.js::kv()). */
  .kv { display: grid; grid-template-columns: minmax(96px, max-content) 1fr; column-gap: var(--sp-4); row-gap: var(--sp-3); align-items: start; }
  .kv-k { font-size: var(--fs-xs); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; padding-top: 3px; line-height: 1.4; }
  .kv-v { font-size: var(--fs-sm); color: var(--text); line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
  .kv-v.mono { font-variant-numeric: tabular-nums; }
  .sb-sub { color: var(--text-faint); font-size: var(--fs-xs); }
  .sb-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .sb-qty { color: var(--accent-strong); font-weight: 600; font-size: var(--fs-xs); }
  .sb-links { display: flex; flex-direction: column; gap: 8px; margin-top: var(--sp-4); }
  .sb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-4); }
  .sb-actions .btn[disabled] { opacity: 0.55; cursor: not-allowed; }
  .sb-actions a.btn { text-decoration: none; }
  .sb-link-btn { background: none; border: none; padding: 0; text-align: left; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--accent-strong); cursor: pointer; }
  .sb-link-btn:hover { text-decoration: underline; }
  .urgency-pill { display: inline-block; font-size: var(--fs-xs); font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
  .urgency-pill.hoch { background: var(--danger-tint); color: var(--danger); }
  .urgency-pill.niedrig { background: var(--surface); color: var(--text-faint); }
  .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; }
  /* Antwortkasten (inbox-detail.js::renderDetail()): Textfeld und
     Werkzeugleiste teilen sich einen Rahmen; Fokus hebt den ganzen Kasten
     hervor, nicht nur das Textfeld. */
  .composer-box { border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg); overflow: hidden; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
  .composer-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
  .composer textarea { display: block; width: 100%; min-height: 96px; resize: vertical; border: none; border-radius: 0; background: transparent; color: var(--text); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-md); line-height: 1.5; outline: none; }
  .composer textarea:disabled { color: var(--text-faint); }
  .composer-bar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-2); border-top: 1px solid var(--border); background: var(--surface); }
  .ai-row { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; }
  .composer-bar .tool-btn { border-color: transparent; background: transparent; color: var(--text-muted); padding: 5px 9px; font-weight: 500; }
  .composer-bar .tool-btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); border-color: transparent; }
  .composer-bar .tool-btn.accent { color: var(--accent-strong); font-weight: 600; }
  .composer-bar .tool-btn.accent:hover:not(:disabled) { background: var(--accent-tint); }
  .composer-bar .tool-btn:disabled { opacity: 0.45; cursor: default; }
  .composer-bar .composer-actions { margin-left: auto; }
  .composer-bar .composer-actions .btn { padding: 6px 16px; }
  .composer-row { display: flex; align-items: center; margin-top: var(--sp-2); gap: var(--sp-2); }
  .composer-kbd { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; }
  .composer-kbd .kbd { min-width: 0; padding: 0 5px; font-size: 10px; line-height: 1.5; }
  .composer-bar .composer-actions .btn { white-space: nowrap; }
  /* Schmaler: erst verlieren die Nebenwerkzeuge (Übersetzen, Bankverbindung)
     ihre Beschriftung, darunter alle - der Tooltip bleibt. */
  @media (max-width: 1500px) { .composer-bar .tool-btn-neben span { display: none; } .composer-bar .tool-btn-neben { padding: 6px; } .composer-bar .tool-btn-neben svg { width: 16px; height: 16px; } }
  @media (max-width: 1100px) { .composer-bar .tool-btn span { display: none; } .composer-bar .tool-btn { padding: 6px; } .composer-bar .tool-btn svg { width: 16px; height: 16px; } }
  .otto-kontakt { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
  .otto-kontakt select, .otto-kontakt textarea { width: 100%; font: inherit; padding: 6px 8px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
  .otto-kontakt textarea { min-height: 96px; resize: vertical; }
  .reply-count.over { color: var(--danger, #c62828); font-weight: 600; }
  .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); }
  /* Gemeinsamer Leerzustand (app-core.js::leerHtml()) - Listen und
     Spalten sehen ohne Inhalt überall gleich aus: Symbol im Kreis, Titel,
     ein Satz, optional ein Knopf. .leer-spalte zentriert in einer ganzen
     Spalte, .leer-gut färbt das Symbol grün (alles erledigt). */
  .list-empty.leer { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sp-8) var(--sp-5); color: var(--text-muted); }
  .list-empty.leer-spalte { flex: 1; justify-content: center; height: 100%; }
  .leer-icon { width: 40px; height: 40px; border-radius: 999px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--text-muted); margin-bottom: var(--sp-3); }
  .leer-icon svg { width: 18px; height: 18px; }
  .leer-gut .leer-icon { background: var(--good-tint); color: var(--good); }
  .leer-titel { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
  .leer-text { font-size: var(--fs-sm); color: var(--text-muted); margin: 4px 0 0; max-width: 300px; line-height: 1.5; }
  .leer-aktion { margin-top: var(--sp-4); }
  /* Leerzustand rechts + Tastenkürzel (app.js::detailEmptyHtml()/zeigeTastenkuerzel()) */
  .detail-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sp-8); color: var(--text-muted); }
  .detail-empty-icon { width: 44px; height: 44px; border-radius: 999px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: var(--sp-4); }
  .detail-empty-icon svg { width: 20px; height: 20px; }
  .detail-empty h2 { font-size: var(--fs-lg); font-weight: 600; color: var(--text); margin: 0 0 4px; }
  .detail-empty p { font-size: var(--fs-sm); margin: 0 0 var(--sp-5); }
  .kbd-list { display: flex; flex-direction: column; gap: 8px; text-align: left; }
  .kbd-row { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); }
  .kbd-keys { display: inline-flex; gap: 4px; min-width: 64px; justify-content: flex-end; }
  .kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); color: var(--text); font: 600 var(--fs-xs) ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; line-height: 1.6; }
  .modal-shortcuts .kbd-list { margin-top: var(--sp-4); }
  /* Erledigt-Haken in der Zeile: nur bei Hover/Fokus sichtbar, wie das Auswahl-Kästchen */
  .ticket-done { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text-muted); opacity: 0; transition: opacity 0.12s ease, background 0.12s ease; cursor: pointer; }
  .ticket:hover .ticket-done, .ticket-done:focus-visible, .ticket-done.laeuft { opacity: 1; }
  .ticket-done:hover { background: var(--good-tint); color: var(--good); border-color: transparent; }
  .ticket-done.laeuft { opacity: 0.5; pointer-events: none; }
  .ticket-done svg { width: 12px; height: 12px; }

  /* ---------- 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); }
  .sb-status { font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--good-tint); color: var(--good); }
  .sb-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: 900px; }
  .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.status-hinweis { color: #b26a00; }
  .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); max-width: 560px; }
  .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-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
  .add-row-hint { font-size: var(--fs-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .add-row-typ { flex: none; font-size: var(--fs-xs); font-weight: 600; color: var(--text-faint); padding: 2px 7px; border-radius: 999px; background: var(--surface-2); white-space: nowrap; }
  .add-row-header .chevron { margin-left: var(--sp-1); }
  .add-row.locked .add-row-header { gap: var(--sp-2); }
  .add-row.locked .add-row-static { padding-top: 0; }
  .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; }
  /* ZYAN-Adresse: der Weg ohne Zugriff aufs Kundenpostfach, deshalb zuoberst
     und abgesetzt. Die Adresse als markierbarer Code neben dem Kopier-Knopf. */
  .eingang-box { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); margin-bottom: var(--sp-3); border: 1px solid var(--accent-tint, var(--border)); border-radius: 10px; background: var(--accent-tint, transparent); }
  .eingang-box .field-hint { margin-top: 0; }
  .eingang-box .form-row { margin-top: var(--sp-1); }
  .eingang-box .btn-row { margin-top: var(--sp-1); flex-wrap: wrap; }
  .eingang-titel { font-weight: 600; font-size: var(--fs-sm); }
  .eingang-adresse { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
  .eingang-adresse code { font-size: var(--fs-sm); padding: 4px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; user-select: all; word-break: break-all; }
  /* Google-Zustimmung als empfohlener Weg über dem Feldformular. */
  .google-connect { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
  .google-connect .field-hint { margin-top: 0; }
  .google-oder {
    display: flex; align-items: center; gap: var(--sp-3);
    font-size: var(--fs-xs); color: var(--text-faint); margin-bottom: var(--sp-3);
  }
  .google-oder::before, .google-oder::after { content: ""; flex: 1; height: 1px; background: var(--border); }

  .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) 360px; 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; }
  .coldreach-filter-tabs select { flex: 1; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; font-size: var(--fs-sm); background: var(--surface); color: var(--text); font-family: inherit; }
  .coldreach-filter-tabs select:focus { border-color: var(--accent); background: var(--bg); outline: none; }
  /* Editor über die volle Spaltenbreite (globales .form-row hat 420px) */
  .coldreach-col-message .form-row { max-width: none; }
  .coldreach-col-message .form-row textarea.coldreach-message-textarea { min-height: 200px; }
  .coldreach-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
  .coldreach-vars .field-hint { margin: 0; }
  .coldreach-var-chip { font: 600 var(--fs-xs) ui-monospace, SFMono-Regular, Menlo, monospace; padding: 2px 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--accent-strong); cursor: pointer; }
  .coldreach-var-chip:hover { background: var(--accent-tint); border-color: transparent; }
  .coldreach-live-preview { margin-top: var(--sp-2); }
  .coldreach-live-preview-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
  .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); }

  /* Sende-Zeile bleibt beim Scrollen der Spalte unten sichtbar */
  .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); position: sticky; bottom: 0; background: var(--bg); }
  .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; display: inline-flex; align-items: center; gap: 6px; }
  .kartei-link-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text-muted); cursor: pointer;
  }
  .kartei-link-btn:hover { background: var(--accent-tint); color: var(--accent-strong); border-color: transparent; }
  .kartei-link-btn svg { width: 13px; height: 13px; }
  .kartei-link-row .related-ticket-link { margin-top: 0; }
  .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; }
  /* Inhalt bis 900px statt 620px - die Formulare klebten links an der
     Reiterspalte, zwei Drittel der Seite blieben leer. */
  .settings-body { padding: var(--sp-6) var(--sp-8); max-width: 900px; 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: 760px; }
  .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-5); }
  .form-grid .conn-h3 { margin-top: var(--sp-3); }
  /* Speichern-Zeile unter einem Formular: Knopf, Fehler und ein Hinweis, wo
     die Daten liegen - sichtbar statt eines nackten Knopfs am Ende. */
  .settings-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); max-width: 760px; }
  .settings-actions .field-hint { margin: 0; }
  .settings-actions .conn-form-error { flex-basis: 100%; }

  /* 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; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); background: var(--surface); }
  .auth-card { width: 360px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: var(--sp-8) var(--sp-6) var(--sp-6); box-shadow: var(--shadow-md); }
  .auth-tagline { font-size: var(--fs-sm); color: var(--text-muted); }
  .auth-card .form-row { max-width: none; }
  .auth-card .form-row input { padding: 9px 11px; font-size: var(--fs-md); }
  .auth-card .btn[type="submit"] { padding: 9px 14px; font-size: var(--fs-md); }
  .auth-foot { font-size: var(--fs-xs); color: var(--text-faint); }
  .auth-foot a { color: inherit; text-decoration: none; }
  .auth-foot a:hover { color: var(--text-muted); text-decoration: underline; }
  .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: 92%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.95em;
}

.msg.system .who { font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); }
/* Kein Kursiv, kein Grau: Kauflands Systemnachricht trägt das Formular des
   Kunden und die 48-Stunden-Frist - das ist der wichtigste Text im Ticket,
   nicht Beiwerk. Feldzeilen ("Grund:", "Beschreibung:") bekommen ein
   fettes Label, siehe systemTextHtml() in app-core.js. */
.msg.system .msg-body { font-style: normal; line-height: 1.55; }
.msg.system .msg-body b { font-weight: 600; color: var(--text-muted); }

.msg-files {
  margin: 0.4rem 0 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

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

/* Anhang = Knopf, der die Datei im Datei-Viewer öffnet (siehe
   dateiViewerOeffnen() in app-core.js), kein Link in einen neuen Tab. */
.msg-files .att {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.4rem 0.7rem 0.4rem 0.4rem;
  max-width: 22rem;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.msg-files .att:hover { background: var(--surface-hover); border-color: var(--accent); }
.msg-files .att:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.msg-files .att img,
.msg-files .att .att-icon {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 6px;
  display: block;
}

.msg-files .att img { object-fit: cover; }

.msg-files .att .att-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--accent-tint);
  color: var(--accent-strong);
}

.msg-files .att .att-icon.att-pdf { background: var(--danger-tint); color: var(--danger); }

.msg-files .att .att-name {
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Datei-Viewer: Anhang bildschirmfüllend in ZYAN, mit Herunterladen und
   Schließen (X, Esc, Klick neben die Datei). */
.datei-viewer {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(10, 16, 22, 0.8);
  display: flex;
  flex-direction: column;
}

.datei-viewer-kopf {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.datei-viewer-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text);
}

.datei-viewer-kopf .btn { text-decoration: none; }
/* .btn setzt display:inline-flex und ueberstimmt damit das hidden-Attribut -
   der Download-Knopf soll aber erst erscheinen, wenn die Datei da ist. */
.datei-viewer-kopf .btn[hidden] { display: none; }

.datei-viewer-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.datei-viewer-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.datei-viewer-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius);
  background: #fff;
}

.datei-viewer-hinweis {
  color: #fff;
  font-size: var(--fs-md);
  text-align: center;
  padding: var(--sp-4);
}

  /* ---------- 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-6) var(--sp-6); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-8); }
  .edge-panel-section h3 {
    display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 700;
    margin: 0 0 var(--sp-4); 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.1rem 0 0.2rem;
}

.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; }

/* Telegram: automatischer Gesprächseinstieg (siehe TELEGRAM-AUTOFLOW.md) -
   eigener Unterbereich in einer Verbindungskarte, gleiches Muster wie
   .conn-edit oben. */
.conn-autoflow {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border, #d8dae0);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.conn-autoflow[hidden] { display: none; }
.autoflow-toggle-row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text); }
.autoflow-schritte { display: flex; flex-direction: column; gap: var(--sp-2); }
.autoflow-schritt-zeile { margin-bottom: 0; }
.autoflow-schritt-eingabe { display: flex; align-items: center; gap: var(--sp-2); }
.autoflow-schritt-eingabe input { flex: 1; }
.autoflow-schritt-eingabe button { flex-shrink: 0; padding: 6px; }
.autoflow-schritt-eingabe svg { width: 16px; height: 16px; }

.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-group { margin-left: 0; flex-basis: 100%; }
  .topbar-divider { display: none; }
  /* 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; }
}
  .modal-foot { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); }
  .modal-foot a { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-strong); font-weight: 600; text-decoration: none; }
  .modal-foot a:hover { text-decoration: underline; }
  .modal-foot a svg { width: 12px; height: 12px; }

/* Sendungsstatus im Bestell-Seitenfeld (inbox-detail.js, heute GLS):
   Pille wie der Bestellstatus, "unterwegs" in Akzentfarbe, Handlungsbedarf
   (PaketShop, Depot, nicht zugestellt) in Warnfarbe. */
.sb-versand { margin-top: 4px; font-variant-numeric: normal; }
.sb-status.unterwegs { background: var(--accent-tint); color: var(--accent); }
.sb-status.problem { background: var(--danger-tint); color: var(--danger); }
.sb-versand-hint { color: var(--danger); }
.sb-versand-events { margin: 4px 0 0; padding-left: 1.2em; font-size: var(--fs-xs); color: var(--text); font-variant-numeric: normal; }
.sb-versand-events li { margin: 2px 0; }
.sb-versand-events .ev-zeit { color: var(--text-faint); white-space: nowrap; }
.sb-versand-hint.ruhig { color: var(--text-muted); }

/* ---------- UPS-Retourenlabel im Ticket (inbox-detail.js upsLabelPanel) ---------- */
.ups-label-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-3); }
.ups-label-grid .form-row { margin-bottom: 0; }
.ups-label-grid[hidden] { display: none; }
.ups-label-grid .form-row.breit { grid-column: 1 / -1; }
.ups-label-liste { display: flex; flex-direction: column; gap: var(--sp-1); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border); }
.ups-label-eintrag { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: baseline; font-size: var(--fs-sm); }
.ups-onboarding { margin-bottom: var(--sp-2); font-weight: 600; color: var(--accent-strong); }
@media (max-width: 860px) { .ups-label-grid { grid-template-columns: 1fr; } }

/* ---------- UPS: Access Points + Abholung im Label-Panel ---------- */
.ups-panel-extra { border-top: 1px solid var(--border); padding-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.ups-panel-extra-knoepfe { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ups-ap-liste { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); }
.ups-ap { line-height: 1.4; }
.ups-abholung-form { display: flex; flex-direction: column; gap: var(--sp-2); }
.ups-label-panel [hidden] { display: none !important; }

  /* ---------- Abläufe (ablaeufe.js) ---------- */
  .ablauf-intro { max-width: 760px; margin: 0 0 var(--sp-5); }
  .ablauf-gruppe { margin-bottom: var(--sp-4); }
  .ablauf-gruppe-titel { font-size: var(--fs-xs); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 6px; }
  .ablauf-karte { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); margin-bottom: 8px; max-width: 760px; box-shadow: var(--shadow); }
  .ablauf-karte-main { flex: 1; min-width: 200px; }
  .ablauf-karte-name { font-weight: 600; }
  .ablauf-karte-sub { font-size: var(--fs-sm); color: var(--text-muted); }
  .ablauf-karte select, .ablauf-vorlage select { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 8px; font-size: var(--fs-sm); background: var(--surface); color: var(--text); font-family: inherit; }
  .ablauf-modus { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-faint); }
  .ablauf-aktiv { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer; }
  .ablauf-vorlagen-titel { margin-top: var(--sp-6); }
  .ablauf-editor-kopf { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
  .ablauf-editor-kopf .settings-h2 { margin: 0; }
  .ablauf-stammdaten { margin-bottom: var(--sp-5); }
  /* Die Kette: Start-Knoten, dann ein Schritt unter dem anderen, verbunden
     durch eine Linie mit Pfeil - das Diagramm, nur senkrecht. */
  .ablauf-kette { display: flex; flex-direction: column; max-width: 760px; }
  .ablauf-start { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-strong); font-size: var(--fs-sm); font-weight: 600; }
  .ablauf-start svg { width: 14px; height: 14px; }
  .ablauf-schritt { position: relative; margin-top: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow); }
  .ablauf-schritt::before { content: ""; position: absolute; left: 28px; top: -28px; height: 22px; width: 2px; background: var(--border-strong); }
  .ablauf-schritt::after { content: ""; position: absolute; left: 24px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--border-strong); }
  .ablauf-schritt-kopf { display: flex; align-items: center; gap: var(--sp-2); padding: 8px var(--sp-3); border-bottom: 1px solid var(--border); background: var(--surface); border-radius: var(--radius) var(--radius) 0 0; }
  .ablauf-nr { width: 22px; height: 22px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: var(--fs-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .ablauf-typ { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 4px; background: var(--surface-2); color: var(--text-muted); flex: none; }
  .ablauf-typ-nachricht { background: var(--accent-tint); color: var(--accent-strong); }
  .ablauf-typ-bedingung { background: #fff3d6; color: #8a5a00; }
  .ablauf-typ-freigabe { background: var(--good-tint); color: var(--good); }
  .ablauf-typ-aktion { background: var(--danger-tint); color: var(--danger); }
  :root[data-theme="dark"] .ablauf-typ-bedingung { background: #3d2f12; color: #f2c266; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ablauf-typ-bedingung { background: #3d2f12; color: #f2c266; } }
  .ablauf-schritt-kurz { font-size: var(--fs-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .ablauf-schritt-kopf .icon-btn { width: 26px; height: 26px; }
  .ablauf-schritt-kopf .icon-btn[disabled] { opacity: 0.35; cursor: default; }
  .ablauf-schritt-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-4); }
  .ablauf-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .ablauf-feld > span { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
  .ablauf-feld input, .ablauf-feld select, .ablauf-feld textarea { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 9px; font-size: var(--fs-sm); background: var(--surface); color: var(--text); font-family: inherit; min-width: 0; }
  .ablauf-feld textarea { line-height: 1.5; resize: vertical; }
  .ablauf-feld input:focus, .ablauf-feld select:focus, .ablauf-feld textarea:focus { border-color: var(--accent); background: var(--bg); outline: none; }
  .ablauf-schritt-body > .ablauf-feld:has(textarea), .ablauf-schritt-body > .field-hint { grid-column: 1 / -1; }
  .ablauf-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--sp-4); max-width: 760px; }
  .ablauf-add .field-hint { margin: 0 4px 0 0; }
  .ablauf-loeschen { margin-left: auto; color: var(--danger); }
  /* Im Ticket */
  .ablauf-block { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: var(--sp-2); }
  .ablauf-fortschritt-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--fs-sm); }
  .ablauf-fortschritt-kopf span:first-child { display: inline-flex; align-items: center; gap: 5px; }
  .ablauf-fortschritt-kopf svg { width: 13px; height: 13px; color: var(--accent); }
  .ablauf-balken { height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; margin-top: 6px; }
  .ablauf-balken > div { height: 100%; background: var(--accent); transition: width 0.25s ease; }
  .ablauf-status-fertig .ablauf-balken > div { background: var(--good); }
  .ablauf-status-abgebrochen .ablauf-balken > div { background: var(--text-faint); }
  /* Kennzahlen je Ablauf in der Liste und Vorschau im Editor (3dh) */
  .ablauf-kz { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 3px; }
  .ablauf-kz b { color: var(--accent-strong); font-weight: 600; }
  .ablauf-kz-leer { color: var(--text-faint); }
  .ablauf-hint-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
  .ablauf-vorschau { grid-column: 1 / -1; border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: var(--sp-3); background: var(--bg); display: flex; flex-direction: column; gap: 6px; }
  .ablauf-vorschau[hidden] { display: none; }
  .ablauf-vorschau-betreff { font-size: var(--fs-sm); font-weight: 600; }
  .ablauf-vorschau-betreff[hidden] { display: none; }
  .ablauf-vorschau-text { font-size: var(--fs-sm); line-height: 1.55; white-space: pre-wrap; }
  .ablauf-entwurf-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
  .ablauf-entwurf { white-space: pre-wrap; font-size: var(--fs-sm); line-height: 1.5; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); max-height: 220px; overflow-y: auto; }
  .ablauf-hinweis:empty { display: none; }
  .ablauf-hinweis { font-size: var(--fs-sm); color: var(--text-muted); }
  .ablauf-protokoll { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); color: var(--text-muted); }
  .ablauf-block .sb-actions { margin-top: 0; }
  .ablauf-abbrechen { align-self: flex-start; color: var(--text-faint); font-weight: 500; }
  .ablauf-pill { font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--good-tint); color: var(--good); }

  /* Anmelde-Screen: Passwort vergessen, Bestätigung, Passwort setzen (auth.js) */
  .auth-link { background: none; border: 0; padding: 0; color: var(--accent, #1a5bd7); cursor: pointer; font-size: var(--fs-sm); text-decoration: underline; }
  .auth-row-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: var(--fs-sm); }
  .auth-check { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
  .auth-info { background: var(--surface-2, #f1f5f9); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; font-size: var(--fs-sm); }
  .auth-h1 { font-size: 1.1rem; margin: 0 0 6px; }

  .team-rechte-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; margin-top: 6px; }
  .team-rechte .auth-check { color: var(--text); }

  /* Ticket ohne Antwortrecht (inbox-detail.js, Rechte) */
  .thread-hinweis[data-nur-lesen] { display: flex; align-items: center; gap: 10px; margin: 12px 16px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-sm); }
  .thread-hinweis[data-nur-lesen] svg { width: 18px; height: 18px; flex: none; }
  /* Team-Seite: Status-Tag in der Statuszeile, Raster einspaltig auf dem Handy */
  .status-line .tag { margin-right: 6px; }
  @media (max-width: 860px) {
    .team-rechte-grid { grid-template-columns: 1fr; }
    .team-rechte .auth-check { align-items: flex-start; }
    .team-rechte .auth-check input { margin-top: 3px; }
  }
  /* Team-Karten: E-Mail und Rechte duerfen umbrechen, Knoepfe auf dem Handy in eigener Zeile */
  [data-team-member] .conn-name-text { white-space: normal; word-break: break-all; }
  [data-team-member] .status-line { flex-wrap: wrap; row-gap: 2px; }
  @media (max-width: 860px) {
    [data-team-member] .conn-summary-row { flex-wrap: wrap; }
    [data-team-member] .conn-summary { flex: 1 1 100%; }
    [data-team-member] .conn-summary-row > .btn { margin: 0 0 10px 14px; }
  }

/* =====================================================================
   Mobil-Durchgang (2026-09-13, 3df) - Feinschliff unter 860px nach dem
   Desktop-Redesign. Steht am Ende, damit es die älteren Handy-Regeln
   oben bei gleicher Spezifität überschreibt.
   ===================================================================== */
@media (max-width: 860px) {
  /* Topbar in EINER Zeile: Lupe, "n offen", Aktualisieren als Symbol. Die
     Nebenzahlen (davon Tickets / E-Mails / heute) sind auf 375px nur
     Ballast - sie stehen im Profil. Öffnet sich die Suche, weicht die
     Kennzahl, damit das Feld Platz hat. */
  .topbar { flex-wrap: nowrap; height: 52px; min-height: 0; gap: var(--sp-2); padding: 0 var(--sp-3); }
  .topbar-right-group { flex-basis: auto; margin-left: auto; gap: var(--sp-2); }
  .topbar-stat:not(.topbar-stat-primary) { display: none; }
  .topbar-stat-primary { border-radius: var(--radius); }
  .topbar-search:focus-within input, .topbar-search.search-open input { width: min(52vw, 220px); }
  .topbar:has(.topbar-search:focus-within) .topbar-stats,
  .topbar:has(.topbar-search.search-open) .topbar-stats,
  .topbar:has(.topbar-search:focus-within) .topbar-stats-empty,
  .topbar:has(.topbar-search.search-open) .topbar-stats-empty { display: none; }
  #refreshBtn { font-size: 0; gap: 0; padding: 7px; min-height: 36px; }
  #refreshBtn svg { width: 16px; height: 16px; }

  /* Ticket-Karte: die Meta-Zeile darf umbrechen, aber jedes Kennzeichen
     bleibt ein Stück; "Kunde wartet …" fällt weg, die Frist-Pille trägt
     dieselbe Aussage. */
  .ticket-meta { flex-wrap: wrap; row-gap: 4px; }
  .ticket-meta .tw-wait { display: none; }
  .ticket-meta .status-pill { margin-left: 0; }
  .ticket-meta .badge, .ticket-meta .status-pill, .ticket-meta .tw-frist, .ticket-meta .ablauf-pill { white-space: nowrap; }
  .ticket-meta .tw-frist { margin-left: 0; }

  /* Antwortkasten: flacher, ohne Tastenhinweis (keine Tastatur-Kürzel
     auf dem Handy), Absender-Hinweis einzeilig. */
  .composer textarea { min-height: 56px; }
  .composer-kbd { display: none; }
  .composer-row { margin-top: 4px; }
  .composer-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

  /* Verbindungen: die Fehlerkarte stellt "Beheben" unter den Text statt
     ihn in eine schmale Spalte zu quetschen. */
  .conn-card.zustand-danger .conn-summary-row { flex-wrap: wrap; }
  .conn-card.zustand-danger .conn-summary { flex: 1 1 100%; }
  .conn-card.zustand-danger .fix-btn { margin: 0 0 var(--sp-3) var(--sp-4); }
  .conn-card.zustand-danger .chevron-btn { margin-left: auto; margin-bottom: var(--sp-3); }
}

/* Zum Aktualisieren herunterziehen (inbox-list.js::wirePullToRefresh()):
   ein Kreis mit dem Aktualisieren-Symbol wächst über der Liste, dreht sich
   mit dem Zug (--ptr 0..1) und kreist beim Laden. Auf dem Desktop bleibt
   das Element 0px hoch und unsichtbar. */
.ptr { height: 0; overflow: hidden; flex: none; display: flex; align-items: flex-end; justify-content: center; transition: height 0.18s ease; }
.ptr.zieht { transition: none; }
.ptr-kreis {
  width: 32px; height: 32px; margin-bottom: 8px; border-radius: 50%;
  background: var(--bg); box-shadow: var(--shadow-md); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  transform: rotate(calc(var(--ptr, 0) * 270deg)) scale(calc(0.6 + var(--ptr, 0) * 0.4));
  opacity: calc(0.3 + var(--ptr, 0) * 0.7);
}
.ptr-kreis svg { width: 16px; height: 16px; }
.ptr.bereit .ptr-kreis { color: var(--accent-strong); }
.ptr.laedt .ptr-kreis { animation: spin 0.7s linear infinite; transform: none; }
@media (max-width: 860px) {
  /* Kein Browser-Gummiband am oberen Rand, sonst konkurriert es mit dem Ziehen. */
  .list-col .list { overscroll-behavior-y: contain; }
}