/* === DataTable-Komponente v1 === */
:root { --dt-gold:#b89d6c; --dt-border:#dee2e6; --dt-muted:#6c757d; --dt-bg-hover:#f8f9fa; }

.dt-wrap { background:#fff; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.06); overflow:hidden; }

/* Toolbar oben */
.dt-toolbar { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--dt-border); flex-wrap:wrap; }
.dt-toolbar .dt-info { color:var(--dt-muted); font-size:12px; }
.dt-toolbar .dt-spacer { flex:1; }
.dt-pager { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--dt-muted); }
.dt-pager input { width:54px; border:1px solid var(--dt-border); border-radius:6px; padding:3px 6px; text-align:center; font-size:12px; }
.dt-pager select { border:1px solid var(--dt-border); border-radius:6px; padding:3px 6px; font-size:12px; }
.dt-pager button { border:1px solid var(--dt-border); background:#fff; border-radius:6px; padding:3px 8px; cursor:pointer; font-size:12px; line-height:1; }
.dt-pager button:disabled { opacity:.4; cursor:default; }

/* Buttons rechts */
.dt-btn { border:1px solid var(--dt-border); background:#fff; border-radius:8px; padding:5px 10px; font-size:12px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; color:#333; }
.dt-btn:hover { background:var(--dt-bg-hover); }
.dt-btn.gold { background:var(--dt-gold); border-color:var(--dt-gold); color:#fff; }
.dt-btn.gold:hover { background:#9c855b; }

/* Gruppenaktion-Leiste */
.dt-bulk { display:none; align-items:center; gap:10px; padding:8px 12px; background:#fff8e1; border-bottom:1px solid #e6d68a; font-size:12px; color:#5c4a00; }
.dt-bulk.visible { display:flex; }
.dt-bulk .dt-bulk-count { font-weight:700; }

/* Tabelle */
.dt-scroll { overflow-x:auto; }
.dt-table { width:100%; border-collapse:collapse; font-size:13px; }
.dt-table thead th { background:#f4f5f7; color:#555; font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.3px;
  padding:8px 10px; border-bottom:2px solid var(--dt-border); white-space:nowrap; position:sticky; top:0; z-index:2; }
.dt-table thead th.sortable { cursor:pointer; user-select:none; }
.dt-table thead th.sortable:hover { background:#e9ecef; }
.dt-table thead th .dt-sort { display:inline-flex; flex-direction:column; margin-left:4px; opacity:.35; vertical-align:middle; line-height:.55; font-size:10px; }
.dt-table thead th .dt-sort i { font-size:9px; }
.dt-table thead th.sorted-asc .dt-sort .up { opacity:1; color:var(--dt-gold); }
.dt-table thead th.sorted-desc .dt-sort .down { opacity:1; color:var(--dt-gold); }

.dt-table thead tr.dt-filter-row th { background:#fafbfc; padding:4px 6px; position:sticky; top:32px; z-index:1; }
.dt-table thead tr.dt-filter-row input, .dt-table thead tr.dt-filter-row select {
  width:100%; border:1px solid var(--dt-border); border-radius:5px; padding:3px 6px; font-size:12px; background:#fff; font-weight:normal; text-transform:none; letter-spacing:0; }
.dt-table thead tr.dt-filter-row .dt-daterange { display:flex; flex-direction:column; gap:2px; }
.dt-table thead tr.dt-filter-row .dt-daterange input { font-size:11px; padding:2px 5px; }

.dt-table tbody td { padding:9px 10px; border-bottom:1px solid #eef0f3; vertical-align:middle; }
.dt-table tbody tr:hover td { background:var(--dt-bg-hover); }
.dt-table tbody tr.selected td { background:#fff8e1; }
.dt-table tbody tr.clickable { cursor:pointer; }
.dt-table tbody td.dt-num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.dt-table tbody td.dt-center { text-align:center; }

.dt-checkbox-col { width:30px; text-align:center; }
.dt-checkbox-col input { cursor:pointer; }

.dt-actions-col { width:1px; white-space:nowrap; text-align:right; }
.dt-actions-col .dt-ra { border:none; background:transparent; padding:4px 6px; cursor:pointer; color:var(--dt-muted); border-radius:5px; }
.dt-actions-col .dt-ra:hover { background:#e9ecef; color:#333; }

.dt-empty { padding:40px; text-align:center; color:var(--dt-muted); font-size:14px; }

/* Spalten-Menü (Ein/Ausblenden) */
.dt-colmenu-wrap { position:relative; }
.dt-colmenu { display:none; position:absolute; top:100%; right:0; margin-top:4px; background:#fff; border:1px solid var(--dt-border); border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.12); z-index:50; min-width:220px; max-height:380px; overflow-y:auto; }
.dt-colmenu.open { display:block; }
.dt-colmenu button.dt-reset { width:100%; border:none; background:#f4f5f7; border-bottom:1px solid var(--dt-border); padding:8px 12px; cursor:pointer; font-size:12px; color:#333; text-align:left; }
.dt-colmenu button.dt-reset:hover { background:#e9ecef; }
.dt-colmenu label { display:flex; align-items:center; gap:8px; padding:6px 12px; cursor:pointer; font-size:13px; }
.dt-colmenu label:hover { background:var(--dt-bg-hover); }
.dt-colmenu label input { cursor:pointer; }

/* Export-Menü */
.dt-export-wrap { position:relative; }
.dt-export-menu { display:none; position:absolute; top:100%; right:0; margin-top:4px; background:#fff; border:1px solid var(--dt-border); border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.12); z-index:50; min-width:140px; }
.dt-export-menu.open { display:block; }
.dt-export-menu button { display:block; width:100%; border:none; background:transparent; padding:8px 14px; cursor:pointer; font-size:13px; text-align:left; }
.dt-export-menu button:hover { background:var(--dt-bg-hover); }

/* Umschalter Kanban/Tabelle */
.dt-viewswitch { display:inline-flex; border:1px solid var(--dt-border); border-radius:8px; overflow:hidden; }
.dt-viewswitch button { border:none; background:#fff; padding:5px 11px; cursor:pointer; font-size:12px; color:#333; display:inline-flex; align-items:center; gap:5px; }
.dt-viewswitch button:hover { background:var(--dt-bg-hover); }
.dt-viewswitch button.active { background:var(--dt-gold); color:#fff; }

/* === kontakte-mobile-table-fix-v1 === Datatable Mobile */
@media (max-width: 820px) {
  /* Toolbar: kleinere Gaps, kein Pager-Text */
  .dt-toolbar { padding:7px 10px; gap:6px; }
  .dt-toolbar .dt-info { font-size:11px; }
  .dt-pager { gap:4px; }
  .dt-pager span.dt-pg-txt { display:none; }

  /* Filter-Row auf Mobile standardmäßig ausblenden */
  .dt-table thead tr.dt-filter-row { display:none; }
  .dt-table thead tr.dt-filter-row.mob-visible { display:table-row; }

  /* iOS-Zoom verhindern: alle Inputs mindestens 16px */
  .dt-table thead tr.dt-filter-row input,
  .dt-table thead tr.dt-filter-row select { font-size:16px; }

  /* Spalten-Menü nach links öffnen auf Handy */
  .dt-colmenu { right:auto; left:0; }
  .dt-export-menu { right:auto; left:0; }

  /* Kompaktere Tabellen-Zeilen */
  .dt-table tbody td { padding:8px 8px; font-size:12px; }
  .dt-table thead th { font-size:10px; padding:6px 8px; }

  /* Filter-Toggle-Button einblenden */
  .dt-filter-toggle { display:inline-flex !important; }
}
/* Filter-Toggle-Button (im Desktop unsichtbar) */
.dt-filter-toggle { display:none; align-items:center; gap:4px; }
.dt-filter-toggle.mob-filter-on { background:var(--dt-gold); border-color:var(--dt-gold); color:#fff; }