/* ══════════════════════════════════════════════════════════════════════
   Modul "tickets" — Styling (Admin-Modul-Seite)
   Wird zusätzlich von ticket-widget.js für das Popup wiederverwendet
   (Form-Klassen mit Prefix .tw-).
   ══════════════════════════════════════════════════════════════════ */

.tickets-root {
  display: flex;
  flex-direction: column;
  /* Früher `height: calc(100vh - 100px)` — doppelt falsch:
     (1) Die 100px waren eine geratene Header-Höhe. Die echte steht in
         --topnav-h; sobald unten die Bottom-Navigation dazukam, stimmte sie
         erst recht nicht mehr.
     (2) `vh` zählt auf iOS/Android die eingeklappte URL-Leiste mit — das
         Panel ragte also um deren Höhe aus dem Sichtbaren heraus.
     Beides erübrigt sich: `[data-module-view].active` (core/shell.css) ist
     bereits ein Flex-Spalten-Container mit exakt der verfügbaren Resthöhe.
     `flex:1` + `min-height:0` erben sie, statt sie nachzurechnen. */
  flex: 1;
  min-height: 0;
  padding: 16px;
  gap: 12px;
  font-family: 'Open Sans', system-ui, sans-serif;
}

/* Toolbar */
.tickets-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tickets-toolbar-left, .tickets-toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tickets-filter { display: flex; flex-direction: column; font-size: 11px; color: var(--text-muted); gap: 2px; }
.tickets-filter select {
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 4px 8px;
  background: var(--surface);
  font-size: 13px;
  min-width: 160px;
}
.tickets-btn-primary, .tickets-btn-secondary {
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.tickets-btn-primary { background: #2563eb; color: #fff; }
.tickets-btn-primary:hover { background: #1d4ed8; }
.tickets-btn-primary:disabled { background: #93c5fd; cursor: not-allowed; }
.tickets-btn-secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.tickets-btn-secondary:hover:not(:disabled) { background: var(--surface-3); }
.tickets-btn-secondary:disabled { color: var(--text-muted); cursor: not-allowed; }
.tickets-btn-danger {
  background: #dc2626;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
}
.tickets-btn-danger:hover { background: #b91c1c; }

/* Layout — 3 Spalten: Ordner-Sidebar · Liste · Detail.
   Die schmaleren Varianten stehen gesammelt im RESPONSIVE-Block am Dateiende;
   die früheren Ad-hoc-Breakpoints 1100/900 sind dort durch die Projekt-
   Staffel 1023/767 ersetzt. */
.tickets-layout {
  display: grid;
  grid-template-columns: 230px 360px 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

/* Ordner-Sidebar (E-Mail-Postfach-Stil) */
.tickets-folders-pane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.tickets-folders-head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.tickets-folder-new-btn {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tickets-folder-new-btn:hover { background: var(--surface-3); border-color: #94a3b8; }

/* Ansichten-Liste (virtuelle Smart-Ordner, oben in der Sidebar).
   Eigener Abschnitt mit „Ansichten"-Header darüber; die Abgrenzung nach unten
   übernimmt der „Ordner"-Header (border-top), daher hier KEIN eigener Trenner. */
/* Höhere Spezifität (ul.…) nötig, da `.tickets-folders-list { flex:1 }` sonst
   gewinnt und die Ansichten-Liste die halbe Sidebar mit Leerraum füllt. */
ul.tickets-smart-list {
  flex: 0 0 auto;     /* nur so hoch wie nötig (3 feste Einträge), kein Leerraum */
  overflow: visible;  /* kein eigener Scrollbalken */
}
/* „Ordner"-Header sitzt zwischen Ansichten und echten Ordnern → oben abgrenzen. */
.tickets-folders-head--ordner {
  border-top: 1px solid var(--border);
}
.tickets-folder.tickets-smart .tickets-folder-icon { font-size: 13px; }
.tickets-folder.tickets-smart.is-active { background: #ede9fe; border-color: #c4b5fd; }
.tickets-folders-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tickets-folder {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background 0.1s, border-color 0.1s;
  border: 1px solid transparent;
  user-select: none;
}
.tickets-folder:hover { background: var(--surface-3); }
.tickets-folder.is-active { background: var(--info-soft); border-color: var(--info-line); font-weight: 600; }
.tickets-folder.is-drop-target {
  background: var(--success-soft);
  border-color: var(--success-line);
  box-shadow: inset 0 0 0 1px #86efac;
}
.tickets-folder-icon { flex: 0 0 auto; font-size: 14px; line-height: 1; }
.tickets-folder-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tickets-folder-badge {
  flex: 0 0 auto;
  background: #64748b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 16px;
  border-radius: 9px;
  padding: 0 5px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.tickets-folder-badge.is-empty { background: var(--info-soft); color: var(--text); }
.tickets-folder-del {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.1s, color 0.1s;
}
.tickets-folder:hover .tickets-folder-del { opacity: 1; }
.tickets-folder-del:hover { color: var(--danger-ink); background: var(--danger-soft); }
/* Drag-Handle für Ordner-Reihenfolge (bindPointerSort) */
.tickets-folder.cb-dragging { opacity: 0.5; }
.tickets-folder.cb-drag-over { border-color: #93c5fd; }

/* Ticket-Zeile während Drag (Pointer-Drag in einen Ordner) */
.tickets-row.is-dragging { opacity: 0.45; }
.tickets-drag-ghost {
  position: fixed;
  z-index: 9500;
  pointer-events: none;
  background: #2563eb;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Liste */
.tickets-list-pane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tickets-list-head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 12px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tickets-select-all { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.tickets-sort-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.tickets-sort-label select {
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 12px;
  background: var(--surface);
  flex: 1;
}
.tickets-list { overflow-y: auto; flex: 1; }
.tickets-list-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }
.tickets-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  align-items: start;
  transition: background-color 0.1s;
}
.tickets-row:hover { background: var(--surface-2); }
.tickets-row.is-selected { background: var(--info-soft); }
.tickets-row.is-unread { font-weight: 600; }
.tickets-row-title {
  font-size: 13px;
  color: var(--info-ink);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tickets-row-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.tickets-pill {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 99px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.tickets-pill.prio-critical { background: var(--danger-soft); color: var(--danger-ink); }
.tickets-pill.prio-normal   { background: var(--warning-soft); color: var(--warning-ink); }
.tickets-pill.prio-low      { background: var(--info-soft); color: #3730a3; }
.tickets-pill.status-offen              { background: var(--info-soft); color: var(--info-ink); }
.tickets-pill.status-in_bearbeitung     { background: var(--warning-soft); color: var(--warning-ink); }
.tickets-pill.status-warte_auf_antwort  { background: #fbcfe8; color: #9d174d; }
.tickets-pill.status-review             { background: #ede9fe; color: #5b21b6; }
.tickets-pill.status-abgeschlossen      { background: var(--success-soft); color: var(--success-ink); }

/* Deploy-Status-Badge (Deploy: Offen/Test/Live) — dezent, klein, in der
   Listen-Meta-Zeile und im Detail-Header. */
.tickets-deploy-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  line-height: 1.4;
}
.tickets-deploy-badge.deploy-offen { background: var(--surface-3); color: var(--text); border-color: var(--info-line); }
.tickets-deploy-badge.deploy-test  { background: var(--warning-soft); color: var(--warning-ink); border-color: var(--warning-line); }
.tickets-deploy-badge.deploy-live  { background: var(--success-soft); color: var(--success-ink); border-color: var(--success-line); }
.tickets-deploy-badge.tickets-test-passed-badge {
  background: var(--success-soft); color: var(--success-ink); border-color: var(--success-line);
}

/* Migration-Ausschluss: Badge an der Zeile + ausgegraute Zeile + Inline-Button */
.tickets-migexcl-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #ddd6fe;
  line-height: 1.4;
}
.tickets-row.is-mig-excluded { opacity: 0.62; }
.tickets-row.is-mig-excluded .tickets-row-title { text-decoration: none; }
.tickets-migincl-btn {
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #c4b5fd;
  background: #f5f3ff;
  color: #5b21b6;
  cursor: pointer;
  margin-left: 4px;
}
.tickets-migincl-btn:hover { background: #ede9fe; }

/* „Test bestanden"-Button im Detail-Header */
.tickets-btn-test-passed {
  background: #059669;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.tickets-btn-test-passed:hover { background: #047857; }

/* Status-Button-Reihe (Listenzeile + Detail-Header)
   Buttons sind kompakt nebeneinander; aktiver Status farblich hervorgehoben
   in der jeweiligen Status-Farbe. */
.tickets-status-row {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.tickets-status-btn {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.2px;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  white-space: nowrap;
}
.tickets-status-btn:hover {
  background: var(--surface-3);
  border-color: #94a3b8;
}
/* Aktiver Status: Hintergrund in Status-Farbe + dunklerer Border */
.tickets-status-btn.status-offen.is-active              { background: var(--info-soft); color: var(--info-ink); border-color: #93c5fd; }
.tickets-status-btn.status-in_bearbeitung.is-active     { background: var(--warning-soft); color: var(--warning-ink); border-color: var(--warning-line); }
.tickets-status-btn.status-warte_auf_antwort.is-active  { background: #fbcfe8; color: #9d174d; border-color: #f472b6; }
.tickets-status-btn.status-review.is-active             { background: #ede9fe; color: #5b21b6; border-color: #a78bfa; }
.tickets-status-btn.status-abgeschlossen.is-active      { background: var(--success-soft); color: var(--success-ink); border-color: var(--success-line); }
.tickets-status-btn.is-recheck {
  background: var(--warning-soft);
  border-color: var(--warning-line);
  color: var(--warning-ink);
}
.tickets-status-btn.is-recheck:hover {
  background: var(--warning-soft);
  border-color: #eab308;
}

/* Im Detail-Header sind die Status-Buttons etwas größer und lesbarer */
.tickets-detail-head .tickets-status-row { margin-top: 8px; gap: 6px; }
.tickets-detail-head .tickets-status-btn { font-size: 11.5px; padding: 5px 11px; }

/* Lock-Badge (Schloss-Symbol bei review_locked=1) */
.tickets-lock-badge {
  font-size: 0.85em;
  margin-left: 4px;
  opacity: 0.85;
  cursor: help;
}
.tickets-row.is-review-locked {
  border-left: 3px solid var(--warning-line);
}

/* Massen-Status-Wrapper in der Toolbar: Label nicht umbrechen, Select breit genug */
.tickets-bulk-status-wrap { min-width: 200px; }
.tickets-bulk-status-label { white-space: nowrap; }
#tickets-bulk-status { min-width: 200px; }

/* URL-Link im Detail-Meta-Block */
.tickets-meta-link {
  color: var(--info-ink);
  text-decoration: underline;
  word-break: break-all;
}
.tickets-meta-link:hover { color: var(--info-ink); }
.tickets-pill.kat-bug             { background: var(--danger-soft); color: var(--danger-ink); }
.tickets-pill.kat-funktionswunsch { background: #ede9fe; color: #5b21b6; }
.tickets-pill.source-testinstanz  { background: var(--success-soft); color: var(--success-ink); }

/* Detail */
.tickets-detail-pane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tickets-empty { padding: 60px 20px; text-align: center; color: var(--text-muted); font-size: 14px; }
.tickets-detail { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tickets-detail[hidden], .tickets-empty[hidden] { display: none !important; }

.tickets-detail-close {
  background: none;
  border: none;
  border-left: 1px solid var(--info-line);
  font-size: 20px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 10px;
  margin-left: 4px;
  border-radius: 0 4px 4px 0;
  transition: background 0.1s, color 0.1s;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.tickets-detail-close:hover { background: var(--surface-3); color: var(--danger-ink); }

.tickets-detail-head {
  position: relative;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
/* Titelzeile: Zurück-Button (nur schmal sichtbar) + Überschrift.
   Eigene Zeile, damit der Button nicht neben Meta-Pills und Status-Reihe
   landet, sondern sauber vor dem Titel steht. */
.tickets-detail-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tickets-detail-head-main { min-width: 0; }
.tickets-detail-head h2 { font-size: 16px; margin: 0 0 4px; color: var(--info-ink); }
.tickets-detail-head-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tickets-detail-controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tickets-detail-controls select { padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); font-size: 12px; }

.tickets-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tickets-msg {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  max-width: 80%;
  align-self: flex-start;
}
.tickets-msg.is-admin {
  background: var(--info-soft);
  border-color: var(--info-line);
  align-self: flex-end;
}
/* KI-Replies (is_ai_response=1): klar erkennbar gegenüber menschlichen
   Admin-Replies — gleicher rechter Bubble-Slot, aber lila statt blau. */
.tickets-msg.is-ai {
  background: #f5f3ff;
  border-color: #c4b5fd;
}
.tickets-msg.is-ai .tickets-msg-head strong { color: #5b21b6; }
.tickets-msg-head {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.tickets-msg-body { font-size: 13px; color: var(--info-ink); white-space: pre-wrap; word-break: break-word; }

.tickets-detail-meta-block {
  background: var(--surface-3);
  border: 1px solid var(--info-line);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text);
}
.tickets-detail-meta-block dt { font-weight: 600; color: var(--text); display: inline; }
.tickets-detail-meta-block dd { display: inline; margin: 0 12px 0 4px; }
.tickets-detail-meta-block dl { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.tickets-detail-meta-block dl > div { width: 100%; }

.tickets-admin-note {
  background: var(--warning-soft);
  border: 1px solid var(--warning-line);
  border-radius: 6px;
  padding: 10px;
  margin-top: 4px;
}
.tickets-admin-note label { font-size: 12px; font-weight: 600; color: var(--warning-ink); display: block; margin-bottom: 4px; }
.tickets-admin-note textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--warning-line);
  border-radius: 4px;
  font-size: 12px;
  padding: 6px;
  min-height: 50px;
  background: var(--warning-soft);
  resize: vertical;
  font-family: inherit;
}

.tickets-reply-block {
  border-top: 1px solid var(--border);
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface-2);
}
.tickets-reply-block textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 8px;
  min-height: 80px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}
.tickets-reply-actions { display: flex; gap: 8px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.tickets-reply-actions-left { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Modal (Neues Ticket) */
.tickets-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  /* War hart 9000 — derselbe Wert, jetzt aus der Ebenen-Staffel in
     core/shell.css, damit neue Overlays sich einordnen statt zu überbieten. */
  z-index: var(--z-modal-hi);
  padding: 16px;
}
/* hidden-Attribut MUSS gewinnen, sonst zeigt sich das Modal automatisch beim
   Modul-Load (display:flex hat höhere Spezifität als das UA-[hidden] und
   überschreibt es sonst). */
.tickets-modal-backdrop[hidden] { display: none; }
.tickets-modal {
  background: var(--surface);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.25);
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  max-height: 90dvh;   /* vh ignoriert die iOS-URL-Leiste, dvh nicht */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tickets-modal-head {
  padding: 14px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tickets-modal-close {
  background: none; border: none; font-size: 22px;
  line-height: 1; cursor: pointer; color: var(--text-muted); padding: 0 6px;
}
.tickets-modal-body { padding: 18px; overflow-y: auto; }

/* Form-Klassen (geteilt mit ticket-widget.js Popup) */
.tw-form { display: flex; flex-direction: column; gap: 12px; }
.tw-row { display: flex; gap: 12px; flex-wrap: wrap; }
.tw-row > .tw-field { flex: 1 1 0; min-width: 140px; }
.tw-field { display: flex; flex-direction: column; gap: 4px; }
.tw-field label { font-size: 12px; font-weight: 500; color: var(--text); }
.tw-field input[type=text],
.tw-field select,
.tw-field textarea {
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  background: var(--surface);
}
.tw-field textarea { min-height: 80px; resize: vertical; }
.tw-field .tw-hint { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.tw-error-preview {
  background: var(--danger-soft);
  border: 1px solid var(--danger-line);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--danger-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 100px;
  overflow-y: auto;
}
.tw-segmented {
  display: flex;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  overflow: hidden;
}
.tw-segmented button {
  flex: 1;
  background: var(--surface);
  border: none;
  padding: 8px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text);
  border-right: 1px solid var(--border-strong);
}
.tw-segmented button:last-child { border-right: none; }
.tw-segmented button.is-active { background: #2563eb; color: #fff; font-weight: 600; }

.tw-actions { display: flex; gap: 8px; justify-content: flex-end; }
.tw-actions button { padding: 8px 14px; }

/* =========================================================================
   Globale UI-Komponenten (werden in core/ticket-widget.js + index.html
   verwendet — Top-Right-Icon + Footer)
   ========================================================================= */

/* Top-Right Ticket-Button (in <nav id="topnav">) — visuell an .nav-tab-icon
   (Settings/Help) angeglichen: gleiche Farbe, gleiches Padding, gleiche
   Border-Radius, gleiche SVG-Opacity. Explizite weiße Farbe statt
   color:inherit, weil Body-Text-Farbe (var(--brand)) = Brand-Hintergrund. */
#ticket-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.65);
  padding: 6px 10px;
  border-radius: 6px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
#ticket-btn svg { opacity: 0.85; }
#ticket-btn:hover { background: rgba(255,255,255,0.10); color: #fff; }
#ticket-btn:hover svg { opacity: 1; }

.ticket-badge {
  position: absolute;
  top: 0; right: 0;
  background: #64748b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 9px;
  padding: 0 4px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}
.ticket-badge.is-critical {
  background: #dc2626;
  animation: ticket-badge-pulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6);
}
.ticket-badge.is-waiting {
  background: #d97706;
  animation: ticket-badge-pulse 1.6s ease-in-out infinite;
}
@keyframes ticket-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

/* Footer — keine vollbreite fixe Leiste mehr (überdeckte Inhalte).
   Stattdessen kompaktes Floating-Badge unten rechts. */
#app-footer {
  position: fixed;
  bottom: 6px;
  right: 8px;
  left: auto;
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
  z-index: 9200; /* über allen Modals (modal-overlay: 1000, tickets-modal: 9000) */
  pointer-events: none;
}
#app-footer > * { pointer-events: auto; }
#app-version-btn {
  background: color-mix(in srgb, var(--surface-2) 85%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
}
#app-version-btn:hover { color: var(--text); background: var(--surface); }
#footer-ticket-btn {
  /* Gold statt Blau: Das Blau stammte aus keiner Palette dieses Projekts und
     stach als einziger Fremdton aus einer sonst durchgehend goldenen
     Oberfläche heraus. `--accent` ist derselbe Ton, den Kopfzeilen, aktive
     Reiter und die Hauptknöpfe tragen. Die dunkle Schrift darauf ist kein
     Geschmack, sondern Lesbarkeit: Weiß auf diesem hellen Gold hat zu wenig
     Kontrast. */
  background: var(--accent, #c8a96e);
  color: #3a2f1c;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
}
#footer-ticket-btn:hover { background: var(--accent2, #b9985a); color: #2b2213; }
#footer-ticket-btn:focus-visible {
  outline: 2px solid var(--accent, #c8a96e);
  outline-offset: 2px;
}

/* ── In der Seitenleiste, unter dem Profil ────────────────────────────────
   Der Fuß schwebte über dem Inhalt (fixed, unten rechts, z-index 9200) und
   verdeckte dort die untere rechte Ecke jeder Tabelle. In der Leiste braucht
   er keinen z-index und keine Zeigerdurchlässigkeit — er steht einfach da,
   wo er hingehört, und nimmt niemandem etwas weg. */
#app-footer.app-footer-in-leiste {
  position: static;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px 10px calc(10px + var(--safe-b, 0px));
  z-index: auto;
  pointer-events: auto;
}
#app-footer.app-footer-in-leiste #app-version-btn,
#app-footer.app-footer-in-leiste #footer-ticket-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}
/* Bei eingeklappter Leiste bleibt kein Platz für Text — dann zählt nur, dass
   der Knopf noch zu treffen ist. */
/* Eingeklappte Leiste: `body.d-rail` (gesetzt in core/app.js). Auf 60px
   Breite ist für „v5.36.11" kein Platz — die Versionsnummer tritt zurück, der
   Ticket-Knopf schrumpft auf sein Pluszeichen und bleibt damit als Handlung
   erhalten. Die Trefferfläche bleibt voll. */
body.d-rail:not(.d-side-schwebt) #app-footer.app-footer-in-leiste { padding: 8px 6px calc(10px + var(--safe-b, 0px)); }
body.d-rail:not(.d-side-schwebt) #app-footer.app-footer-in-leiste #app-version-btn { display: none; }
body.d-rail:not(.d-side-schwebt) #app-footer.app-footer-in-leiste #footer-ticket-btn {
  padding: 8px 0;
  font-size: 0;
}
body.d-rail:not(.d-side-schwebt) #app-footer.app-footer-in-leiste #footer-ticket-btn::before {
  content: '+';
  font-size: 16px;
  font-weight: 700;
}

/* Changelog-Modal (globaler Footer-Version-Klick) */
#changelog-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 9100; padding: 16px;
}
#changelog-modal {
  background: var(--surface);
  border-radius: 10px;
  width: 100%; max-width: 800px;
  max-height: 86vh;
  max-height: 86dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.3);
}
#changelog-modal .cl-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  display: flex; justify-content: space-between; align-items: center;
}
#changelog-modal .cl-body {
  padding: 16px 20px;
  overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
  color: var(--text);
}

/* User-Popup vom Top-Right Icon (im Widget gerendert) */
#tw-user-popup {
  position: fixed;
  top: 56px; right: 12px;
  width: 380px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
  z-index: 9050;
  display: flex; flex-direction: column;
  overflow: hidden;
}
#tw-user-popup .tw-popup-head {
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600;
}
#tw-user-popup .tw-popup-body {
  padding: 12px 16px;
  overflow-y: auto;
  flex: 1;
}
#tw-user-popup .tw-popup-toolbar {
  display: flex; justify-content: flex-end; margin-bottom: 8px;
}
#tw-user-popup .tw-toggle-closed {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
}
#tw-user-popup .tw-toggle-closed:hover { background: var(--surface-3); border-color: #94a3b8; }
#tw-user-popup .tw-toggle-closed.is-active {
  background: #1e293b; color: #fff; border-color: #1e293b;
}
/* Eigener Scroll-Container für die Liste — Toggle bleibt oben, "Neues Ticket"-Button
   bleibt unten sichtbar, nur die Liste scrollt wenn sie zu lang wird. */
#tw-user-popup .tw-popup-list-scroll {
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 12px;
  border-radius: 6px;
}
#tw-user-popup .tw-popup-list { display: flex; flex-direction: column; gap: 6px; }
#tw-user-popup .tw-popup-list-empty { color: var(--text-muted); font-size: 12px; text-align: center; padding: 12px; }
.tw-user-row {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  background: var(--surface);
}
.tw-user-row:hover { background: var(--surface-3); }
.tw-user-row.is-waiting { border-color: #fbcfe8; background: var(--surface-2); }
.tw-user-row.is-closed  { opacity: 0.65; background: var(--surface-2); }
.tw-user-row.is-closed:hover { opacity: 1; }
.tw-user-row .tw-user-title { font-size: 13px; color: var(--info-ink); font-weight: 500; }
.tw-user-row .tw-user-meta  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* User-Detail (gleicher Popup, anderer Inhalt) */
.tw-user-detail-back {
  background: none; border: none;
  color: var(--info-ink); cursor: pointer;
  font-size: 12px; padding: 0;
  margin-bottom: 8px;
}
.tw-user-detail-msg {
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 12px;
}
.tw-user-detail-msg.is-admin { background: var(--info-soft); border: 1px solid var(--info-line); }
.tw-user-detail-msg.is-user  { background: var(--surface-2); border: 1px solid var(--border); }
.tw-user-detail-msg-head { font-size: 10px; color: var(--text-muted); margin-bottom: 3px; }
.tw-user-detail-msg-body { color: var(--info-ink); white-space: pre-wrap; word-break: break-word; }

/* =========================================================================
   Testinstanz — Schnell-Bug-Report-Button + Popover
   ========================================================================= */

/* Testinstanz-Button — sieht aus wie Settings/Hilfe-Icon (nav-tab nav-tab-icon) */
#testinstanz-btn[hidden] { display: none; }

#testinstanz-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  outline: none;
  position: relative;
}
#testinstanz-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}
/* Kleiner gelber Punkt wenn Draft vorhanden */
#testinstanz-btn.has-draft::after {
  content: '';
  position: absolute;
  top: 3px; right: 3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Popover */
#ti-popover {
  position: fixed;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  max-width: calc(100vw - 24px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 44px rgba(15, 23, 42, 0.22);
  z-index: 9060;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ti-head {
  padding: 11px 16px;
  background: var(--success-soft);
  border-bottom: 1px solid var(--success-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 13px;
  color: var(--success-ink);
}
.ti-close {
  background: none; border: none;
  font-size: 20px; line-height: 1;
  cursor: pointer; color: var(--text-muted); padding: 0 4px;
}
.ti-close:hover { color: var(--danger-ink); }
.ti-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#ti-text {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 110px;
  line-height: 1.55;
  color: var(--info-ink);
}
#ti-text:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}
.ti-meta-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.ti-prio-label {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 3px;
  white-space: nowrap;
}
.ti-prio-label select {
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 12px;
  background: var(--surface);
}
.ti-ctx {
  flex: 1;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
}
.ti-ctx-row strong { color: var(--info-ink); }
.ti-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* =========================================================================
   MOBILE-BEDIENELEMENTE
   ------------------------------------------------------------------------
   Zwei Schalter, die es am Desktop nicht braucht und die deshalb dort
   `display:none` sind. Sichtbar werden sie in den Media-Queries darunter.
   ========================================================================= */

/* „← " im Detail-Kopf: führt aus der Detail-Ebene zurück zur Liste.
   Vorbild ist `.komm-zurueck` in modules/kommunikation. */
.tickets-detail-back {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--tap);
  height: var(--tap);
  margin-right: 2px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.tickets-detail-back:hover { background: var(--surface-3); }

/* „📁 Ordner" in der Toolbar: blendet die Ordner-/Ansichten-Ebene ein.
   Am Handy ist für eine dauerhafte Sidebar kein Platz, die Ordnerwahl ist
   aber ein seltener Vorgang — ein Schalter reicht dafür. */
.tickets-folders-toggle { display: none; }

/* =========================================================================
   RESPONSIVE — Staffel 1023 / 767 / 479 aus core/shell.css
   ------------------------------------------------------------------------
   Ausgangslage: das 3-Spalten-Grid fiel bei 900px auf eine Spalte, die feste
   Container-Höhe blieb aber bestehen. Drei gestapelte Panes mit je
   `overflow:hidden` teilten sich damit auf einem 812px-Display rund 180px
   Höhe pro Pane — bedienbar war davon nichts.

   Neu ist ein Ebenen-Modell statt eines Stapels: sichtbar ist immer genau
   EINE Ebene, umgeschaltet über zwei Klassen an `.tickets-layout`, die
   view.js setzt (`is-ordner-offen`, `is-detail-offen`).

       ≤1023px   Ordner | Liste  →  Ordner | Detail        (2 Spalten)
       ≤ 767px   Liste  →  Detail,  Ordner per Schalter    (1 Spalte)

   Genauso ist es in modules/kommunikation gelöst.
   ========================================================================= */

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* Ordner bleiben stehen, Liste und Detail teilen sich die zweite Spalte. */
  .tickets-layout { grid-template-columns: 200px minmax(0, 1fr); }

  .tickets-detail-pane { display: none; }
  .tickets-layout.is-detail-offen .tickets-list-pane { display: none; }
  .tickets-layout.is-detail-offen .tickets-detail-pane { display: flex; }

  /* Ohne Zurück-Button gäbe es keinen Weg aus der Detail-Ebene: das „×"
     daneben schließt zwar auch, liest sich aber wie „verwerfen". */
  .tickets-detail-back { display: inline-flex; }

  .tickets-filter select { min-width: 130px; }
}

/* ── Handy ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .tickets-root { padding: var(--panel-pad); gap: var(--space-2); }
  .tickets-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }

  /* Ebene 0 (Ordner) ist ausgeblendet, bis der Toolbar-Schalter sie holt. */
  .tickets-folders-pane { display: none; }
  .tickets-layout.is-ordner-offen .tickets-folders-pane { display: flex; }
  .tickets-layout.is-ordner-offen .tickets-list-pane { display: none; }
  .tickets-folders-toggle { display: inline-flex; align-items: center; }

  /* Toolbar: die beiden Gruppen untereinander, Felder über die volle Breite.
     `min-width:160px` bzw. 200px am Massen-Status sprengten sonst jedes
     375px-Display und erzeugten horizontales Scrollen der ganzen Seite. */
  .tickets-toolbar { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .tickets-toolbar-left,
  .tickets-toolbar-right { width: 100%; }
  .tickets-filter { flex: 1 1 140px; min-width: 0; }
  .tickets-filter select,
  .tickets-bulk-status-wrap,
  #tickets-bulk-status { min-width: 0; width: 100%; }
  /* iOS zoomt beim Fokus in Felder < 16px hinein. Das Fundament setzt das
     für `body select`, hier gewinnt aber die spezifischere Modul-Regel
     (`.tickets-filter select`) — deshalb noch einmal explizit. */
  .tickets-filter select,
  .tickets-sort-label select,
  #tickets-bulk-status { font-size: 16px; min-height: var(--tap); }
  .tickets-btn-primary,
  .tickets-btn-secondary,
  .tickets-btn-danger { min-height: var(--tap); }

  /* Ordner- und Listenzeilen sind die Haupt-Tippziele des Moduls. */
  .tickets-folder { min-height: var(--tap); }
  /* Etwas mehr Raum für die (jetzt größere) Markier-Checkbox. */
  .tickets-row { padding: var(--space-3); grid-template-columns: 28px minmax(0, 1fr); }
  .tickets-row-title { font-size: 14px; -webkit-line-clamp: 3; }
  /* Die Checkbox der Massenauswahl ist mit 13px kaum zu treffen. */
  .tickets-row-check,
  .tickets-select-all input[type=checkbox] { width: 20px; height: 20px; }
  .tickets-select-all { min-height: var(--tap); }

  /* Detail-Kopf: Titel oben, Steuerelemente darunter über die volle Breite —
     nebeneinander bleiben von beidem nur Fetzen übrig. */
  .tickets-detail-head { flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
  .tickets-detail-head-main { width: 100%; }
  .tickets-detail-controls { width: 100%; }
  .tickets-detail-controls select { font-size: 16px; min-height: var(--tap); }
  .tickets-detail-close { align-self: flex-start; border-left: 0; }
  .tickets-detail-body { padding: var(--space-3); }
  /* Sprechblasen dürfen fast die volle Breite nutzen; 80% ließen auf 375px
     nur rund 260px Textbreite übrig. */
  .tickets-msg { max-width: 92%; }
  /* Meta-Block: dt/dd nebeneinander bricht bei langen URLs unschön um. */
  .tickets-detail-meta-block dl > div { display: flex; flex-wrap: wrap; gap: 4px; }

  /* Antwort-Feld: 13px/12px → iOS-Zoom beim Antippen. */
  .tickets-reply-block { padding: var(--space-3); }
  .tickets-reply-block textarea,
  .tickets-admin-note textarea { font-size: 16px; }
  .tickets-reply-actions,
  .tickets-reply-actions-left { width: 100%; }
  .tickets-reply-actions .tickets-btn-primary { width: 100%; justify-content: center; }
  .tickets-reply-block select { font-size: 16px; min-height: var(--tap); }

  /* Formular des Neu-Ticket-Modals (wird auch vom Widget verwendet). */
  .tw-field input[type=text],
  .tw-field select,
  .tw-field textarea { font-size: 16px; }
  .tw-row { flex-direction: column; gap: var(--space-2); }
  .tw-row > .tw-field { min-width: 0; }
  .tw-actions { flex-direction: column-reverse; }
  .tw-actions button { width: 100%; min-height: var(--tap); }
  .tw-segmented button { min-height: var(--tap); font-size: 13px; }

  /* Der Bug-Report-Popover und das User-Popup hängen beide an fixen
     Desktop-Koordinaten und Breiten (520px / 380px). Am Handy werden sie
     zu Vollbreiten-Blättern unter der Topnav. */
  #ti-popover,
  #tw-user-popup {
    top: calc(var(--topnav-h) + var(--space-1));
    right: var(--space-2);
    left: var(--space-2);
    width: auto;
    max-width: none;
    transform: none;
    max-height: calc(100dvh - var(--topnav-h) - var(--bottomnav-h) - var(--space-4));
  }
  #ti-text { font-size: 16px; }
  .ti-prio-label select { font-size: 16px; min-height: var(--tap); }
  .ti-foot { flex-direction: column-reverse; }
  .ti-foot button { width: 100%; min-height: var(--tap); }

  /* Changelog-Popup (Footer-Versionsklick) — am Handy nahezu Vollbild. */
  #changelog-modal-backdrop { padding: var(--space-2); }
  #changelog-modal { max-height: calc(100dvh - var(--bottomnav-h) - var(--space-5)); }

  /* Das Floating-Badge unten rechts säße sonst auf der Bottom-Navigation.
     Die Leiste ist ein reguläres Flex-Kind, das Badge aber position:fixed —
     also muss es deren Höhe selbst einrechnen. */
  #app-footer { bottom: calc(6px + var(--bottomnav-h) + var(--safe-b)); }
  #footer-ticket-btn { min-height: var(--tap); }
}

/* ── Kleines Handy ──────────────────────────────────────────────────────── */
@media (max-width: 479px) {
  /* Zwei Filter nebeneinander gehen noch, drei nicht mehr. */
  .tickets-filter { flex: 1 1 100%; }
  .tickets-detail-head h2 { font-size: 15px; }
}

/* ── Neu-Ticket-Modal als Vollbild ──────────────────────────────────────────
   Die 600px sind kein neuer Ad-hoc-Breakpoint, sondern derselbe, an dem
   core/shell.css `.modal` / `.modal-fullscreen-mobile` auf Vollbild schaltet.
   `.tickets-modal` trägt die Opt-in-Klasse (siehe view.html); hier wird nur
   das Innen-Padding zurückgenommen, weil Kopf und Body ihr eigenes mitbringen
   und sich sonst verdoppeln würde. Der `body`-Präfix hebt die Spezifität auf
   das Niveau der Fundament-Regel — ohne `!important`. */
@media (max-width: 600px) {
  body .tickets-modal { padding: 0; }
  body .tickets-modal-body {
    padding: var(--space-4);
    /* Das `padding: 0` oben nimmt auch die Safe-Area-Reserve der Fundament-
       Regel zurück — hier wieder dran, sonst liegt der „Absenden"-Button
       unter dem Home-Indicator. */
    padding-bottom: calc(var(--space-4) + var(--safe-b));
  }
  body .tickets-modal-head { padding: var(--space-3) var(--space-4); }
}

/* =========================================================================
   ORDNERLEISTE MIT ANKER (v5.59.0) — nur Desktop ≥1024px
   ------------------------------------------------------------------------
   Gleiches Prinzip wie die Hauptleiste links (core/shell.css,
   `body.d-side-schwebt`): Verankert steht die Ordnerleiste fest mit 230px.
   Gelöst (`.tk-ordner-geloest`, view.js) schrumpft ihre Spalte auf 52px —
   nur Symbole + Zähler. Beim Darüberfahren (`.tk-ordner-schwebt`) wird die
   Leiste wieder 230px breit, ragt dabei aber nur ÜBER die Ticketliste: die
   Grid-Spalte bleibt 52px, die Liste bewegt sich nicht.
   Unter 1024px gilt das Ebenen-Modell aus dem RESPONSIVE-Block; dort ist
   der Anker ausgeblendet und die Klassen sind wirkungslos.
   ========================================================================= */
.tickets-ordner-anker { display: none; }

@media (min-width: 1024px) {
  .tickets-ordner-anker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    margin: -4px -4px -4px auto;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
  }
  .tickets-ordner-anker svg { width: 14px; height: 14px; }
  .tickets-ordner-anker:hover { background: var(--surface-3); }
  .tickets-ordner-anker:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .tk-ordner-geloest .tickets-ordner-anker { color: var(--text-muted); }

  .tickets-layout.tk-ordner-geloest { grid-template-columns: 52px 360px 1fr; }

  .tk-ordner-geloest .tickets-folders-pane {
    position: relative;
    z-index: 30;
    width: 52px;
    /* Schliessen kurz, Öffnen etwas weicher (Regel darunter). */
    transition: width 0.14s ease-in, box-shadow 0.14s ease-in;
  }
  .tk-ordner-geloest.tk-ordner-schwebt .tickets-folders-pane {
    width: 230px;
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.32);
    transition: width 0.18s ease-out, box-shadow 0.18s ease-out;
  }
  @media (prefers-reduced-motion: reduce) {
    .tk-ordner-geloest .tickets-folders-pane,
    .tk-ordner-geloest.tk-ordner-schwebt .tickets-folders-pane { transition: none; }
  }

  /* ── Symbolleiste (gelöst, nicht schwebend) ─────────────────────────── */
  .tk-ordner-geloest:not(.tk-ordner-schwebt) .tickets-folders-head {
    justify-content: center;
    padding: 8px 0;
  }
  .tk-ordner-geloest:not(.tk-ordner-schwebt) .tickets-folders-head > span,
  .tk-ordner-geloest:not(.tk-ordner-schwebt) .tickets-folder-new-btn,
  .tk-ordner-geloest:not(.tk-ordner-schwebt) .tickets-folder-name,
  .tk-ordner-geloest:not(.tk-ordner-schwebt) .tickets-folder-del { display: none; }
  .tk-ordner-geloest:not(.tk-ordner-schwebt) .tickets-ordner-anker { margin: -4px 0; }
  /* Der „Ordner"-Kopf hat ohne Text und Knopf keinen Inhalt mehr — als
     schmaler Trenner bleibt er stehen. */
  .tk-ordner-geloest:not(.tk-ordner-schwebt) .tickets-folders-head--ordner { padding: 3px 0; }
  .tk-ordner-geloest:not(.tk-ordner-schwebt) .tickets-folders-list { padding: 6px 4px; }
  .tk-ordner-geloest:not(.tk-ordner-schwebt) .tickets-folder {
    position: relative;
    justify-content: center;
    padding: 9px 0;
  }
  .tk-ordner-geloest:not(.tk-ordner-schwebt) .tickets-folder-icon { font-size: 16px; }
  /* Zähler wandert an das Symbol, verkleinert. */
  .tk-ordner-geloest:not(.tk-ordner-schwebt) .tickets-folder-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 14px;
    height: 13px;
    padding: 0 3px;
    font-size: 8.5px;
  }
  .tk-ordner-geloest:not(.tk-ordner-schwebt) .tickets-folder-badge.is-empty { display: none; }
}