/* ═══════════════════════════════════════════════════════════════════════════
   FCP Inline Data Table · Redesign Override Layer
   Activated by adding .is-redesign to the component root.
   Original main.css is untouched — this file wins via higher specificity
   and CSS ordering.
   ═══════════════════════════════════════════════════════════════════════════ */

.is-redesign {
  /* ── Produktdefault: helle Claude-Variante ── */
  --rd-bg:           #f6f1e5;
  --rd-surface:      #fbf7ee;
  --rd-surface-2:    #efe8d7;
  --rd-surface-hi:   #ffffff;

  --rd-line:         rgba(108, 112, 91, 0.14);
  --rd-line-strong:  rgba(108, 112, 91, 0.22);
  --rd-line-focus:   rgba(183, 154, 99, 0.55);

  --rd-ink:          #2a2d24;
  --rd-ink-2:        #4a4e40;
  --rd-muted:        #7a7c68;
  --rd-muted-soft:   #9b9c88;

  --rd-gold:         #b79a63;
  --rd-gold-hi:      #c6ad67;
  --rd-gold-lo:      #9c8148;
  --rd-gold-soft:    rgba(183, 154, 99, 0.12);
  --rd-gold-softer:  rgba(183, 154, 99, 0.06);

  --rd-ok:           #6b8f4c;
  --rd-ok-soft:      #e4ecd6;
  --rd-warn:         #b88a2a;
  --rd-warn-soft:    #f5ebd0;
  --rd-off:          #8f8a7a;
  --rd-off-soft:     #e7e3d7;
  --rd-danger:       #a84a3e;
  --rd-danger-soft:  #f2dcd7;

  --rd-row-h:        40px;
  --rd-cell-px:      14px;
  --rd-font:         14px;
  --rd-radius:       10px;
  --rd-radius-sm:    6px;

  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  color: var(--rd-ink);
}

[data-rd-density="compact"] .is-redesign,
.is-redesign[data-rd-density="compact"] {
  --rd-row-h: 30px;
  --rd-cell-px: 10px;
  --rd-font: 13px;
}

[data-rd-density="comfortable"] .is-redesign,
.is-redesign[data-rd-density="comfortable"] {
  --rd-row-h: 52px;
  --rd-cell-px: 18px;
  --rd-font: 15px;
}

.is-redesign[data-rd-theme="dark"] {
  --rd-bg:          #1a1d18;
  --rd-surface:     #222620;
  --rd-surface-2:   #2a2f28;
  --rd-surface-hi:  #32382f;
  --rd-line:        rgba(232, 217, 181, 0.10);
  --rd-line-strong: rgba(232, 217, 181, 0.20);
  --rd-line-focus:  rgba(198, 173, 103, 0.55);
  --rd-ink:         #ecead9;
  --rd-ink-2:       #c4c2b0;
  --rd-muted:       #8a8976;
  --rd-muted-soft:  #686755;
  --rd-gold:        #c6ad67;
  --rd-gold-hi:     #d9c07a;
  --rd-gold-lo:     #a88b4f;
  --rd-gold-soft:   rgba(198, 173, 103, 0.16);
  --rd-gold-softer: rgba(198, 173, 103, 0.08);
  --rd-ok-soft:     #2d3a26;
  --rd-warn-soft:   #3a3122;
  --rd-off-soft:    #2e2f2a;
  --rd-danger-soft: #3a2622;
}

[style*="--rd-gold-override"] .is-redesign,
.is-redesign[style*="--rd-gold-override"] {
  --rd-gold: var(--rd-gold-override);
}

/* ═══ 1 · SHELL & RAHMEN ═══════════════════════════════════════════════════ */
.is-redesign .data-table-shell {
  background: var(--rd-surface);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 8px 24px -12px rgba(42, 45, 36, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* ═══ 2 · TITEL-REIHE (Mitglieder H1 + Beschreibung + View-Toggle) ══════════ */
.is-redesign .title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  background: transparent;
  border: 0;
}
.is-redesign .title-row h1 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--rd-ink);
  margin: 0 0 2px;
}
.is-redesign .title-row p {
  font-size: 13px;
  color: var(--rd-muted);
  margin: 0;
  line-height: 1.4;
}
.is-redesign .title-row__controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}

/* View-Toggle (Tabelle / Cards) — Segment-Control */
.is-redesign .view-toggle {
  display: inline-flex;
  padding: 3px;
  background: var(--rd-surface-2);
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  gap: 0;
  flex-shrink: 0;
}
.is-redesign .view-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--rd-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s ease;
}
.is-redesign .view-toggle button:hover {
  color: var(--rd-ink);
}
.is-redesign .view-toggle button.is-active {
  background: var(--rd-surface-hi);
  color: var(--rd-ink);
  box-shadow: 0 1px 2px rgba(42,45,36,.08), 0 0 0 1px var(--rd-line);
}

.is-redesign .theme-toggle {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  background: color-mix(in srgb, var(--rd-surface-2) 88%, transparent);
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  gap: 0;
  flex-shrink: 0;
}
.is-redesign .theme-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--rd-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s ease;
}
.is-redesign .theme-toggle button:hover {
  color: var(--rd-ink);
}
.is-redesign .theme-toggle button.is-active {
  background: var(--rd-surface-hi);
  color: var(--rd-ink);
  box-shadow: 0 1px 2px rgba(42,45,36,.08), 0 0 0 1px var(--rd-line);
}

/* ═══ 3 · TOOLBAR ═══════════════════════════════════════════════════════════ */
.is-redesign .data-table-shell__toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 14px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rd-line);
  border-bottom: 1px solid var(--rd-line);
}

/* Such-Feld */
.is-redesign .toolbar-left { min-width: 0; max-width: 420px; }
.is-redesign .toolbar-left .ui-field { display: block; position: relative; margin: 0; }
.is-redesign .toolbar-left .ui-field span.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.is-redesign .toolbar-left input[type="search"] {
  width: 100%;
  height: 34px;
  border: 1px solid var(--rd-line);
  background: var(--rd-surface-hi);
  border-radius: 8px;
  padding: 0 12px 0 34px;
  font: inherit;
  font-size: 13px;
  color: var(--rd-ink);
  transition: border-color .15s, box-shadow .15s;
}
.is-redesign .toolbar-left input[type="search"]::placeholder { color: var(--rd-muted-soft); }
.is-redesign .toolbar-left input[type="search"]:focus {
  outline: none;
  border-color: var(--rd-gold);
  box-shadow: 0 0 0 3px var(--rd-gold-soft);
}
.is-redesign .toolbar-left .ui-field::before {
  content: "";
  position: absolute;
  left: 11px; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7c68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .8;
  pointer-events: none;
}

/* Toolbar-Right: einheitliche Button-Sprache */
.is-redesign .toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Primary-Button — Gold */
.is-redesign .feed-btn[data-inline-create-toggle="true"] {
  appearance: none;
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--rd-gold-lo);
  background: linear-gradient(180deg, var(--rd-gold-hi), var(--rd-gold));
  color: #2a2416;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(122, 95, 43, .18);
  transition: transform .08s ease, box-shadow .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}
.is-redesign .feed-btn[data-inline-create-toggle="true"]::before {
  content: "+";
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  margin-top: -1px;
}
.is-redesign .feed-btn[data-inline-create-toggle="true"]:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 4px rgba(122, 95, 43, .26);
}
.is-redesign .feed-btn[data-inline-create-toggle="true"]:active {
  transform: translateY(1px);
}

/* Ghost- und Icon-Buttons — alle gleich hoch, gleiche Sprache */
.is-redesign .feed-btn--ghost,
.is-redesign .icon-utility,
.is-redesign [data-inline-filter-toggle],
.is-redesign [data-inline-reset],
.is-redesign [data-inline-column-toggle],
.is-redesign [data-utility-action] {
  appearance: none;
  height: 34px;
  min-width: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--rd-line);
  background: var(--rd-surface-hi);
  color: var(--rd-ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .12s ease;
  box-shadow: none;
}
.is-redesign .feed-btn--ghost:hover,
.is-redesign .icon-utility:hover,
.is-redesign [data-utility-action]:hover {
  background: var(--rd-surface-2);
  border-color: var(--rd-line-strong);
  color: var(--rd-ink);
}

/* aktive Zustände (Filter offen, etc.) */
.is-redesign [data-inline-filter-toggle].is-active,
.is-redesign [data-inline-column-toggle].is-active {
  background: var(--rd-gold-soft);
  border-color: var(--rd-gold);
  color: var(--rd-gold-lo);
}

/* Export-Menü Container */
.is-redesign .data-table-utility-menu { position: relative; }
.is-redesign .data-table-utility-menu__panel {
  background: var(--rd-surface-hi);
  border: 1px solid var(--rd-line-strong);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 32px -8px rgba(42,45,36,.18), 0 4px 8px -2px rgba(42,45,36,.08);
  min-width: 160px;
  top: calc(100% + 6px);
}
.is-redesign .data-table-utility-menu__item {
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--rd-ink);
  border-radius: 6px;
  cursor: pointer;
}
.is-redesign .data-table-utility-menu__item:hover {
  background: var(--rd-gold-softer);
  color: var(--rd-gold-lo);
}

/* Utility-Button mit Label — wir verstecken das Text-Label standardmäßig, nur Icon */
.is-redesign [data-utility-action] > span:last-child:not([aria-hidden]) {
  display: none;
}

/* ═══ 4 · META-BAR (Anzahl + Hinweis) ══════════════════════════════════════ */
.is-redesign .table-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rd-line);
  font-size: 12px;
  color: var(--rd-muted);
}
.is-redesign .table-meta-bar span:first-child {
  font-weight: 500;
  color: var(--rd-ink-2);
}

.is-redesign .column-toggle-panel {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rd-line);
  background: color-mix(in srgb, var(--rd-surface-2) 70%, var(--rd-surface) 30%);
}

.is-redesign .column-toggle-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-size: 13px;
  color: var(--rd-ink);
}

.is-redesign .column-toggle-item span {
  min-width: 0;
}

.is-redesign .column-toggle-item input[type="checkbox"] {
  margin: 0;
  inline-size: 16px;
  block-size: 16px;
}

/* ═══ 5 · FILTER-PANEL — standardmäßig weg; Werte stehen inline ════════════ */
.is-redesign .filter-panel {
  display: none !important;
}
/* der „Filter"-Toggle blendet stattdessen Inline-Filter unter Spaltenköpfen ein —
   das passiert über JS (redesign.js) mit [data-rd-filters-open="true"] */

/* ═══ 6 · TABELLE ══════════════════════════════════════════════════════════ */
.is-redesign .data-table-wrap,
.is-redesign .fangliste-table-wrap,
.is-redesign .inline-table-wrap {
  background: var(--rd-surface);
  padding: 0;
  border: 0;
  /* sole horizontal scroll container — shell clips, this scrolls */
  overflow-x: auto;
  overflow-y: visible;
  min-width: 0;
}

.is-redesign .data-table {
  font-size: var(--rd-font);
  background: var(--rd-surface);
  border: 0;
  /* fills wrap when columns fit; expands for overflow when gridTemplate uses raw px */
  min-width: 100%;
  width: max-content;
}

/* ═══ 6a · SPALTEN-KOPF ════════════════════════════════════════════════════ */
.is-redesign .data-table__head {
  background: var(--rd-surface-2);
  border-bottom: 1px solid var(--rd-line-strong);
  position: sticky;
  top: 0;
  z-index: 3;
}

.is-redesign .data-table__headcell {
  position: relative;
  background: transparent;
  border-inline-end: 1px solid var(--rd-line);
  padding: 0;
  min-height: 38px;
  display: flex;
  align-items: stretch;
}
.is-redesign .data-table__headcell:last-child { border-inline-end: 0; }
.is-redesign .data-table__headcell.rd-hovered { background: var(--rd-gold-softer); }

.is-redesign .data-table__headcell .headcell-left {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--rd-cell-px);
  flex: 1;
  min-width: 0;
}

/* Drag-Handle — normalerweise unsichtbar, bei Hover einblenden */
.is-redesign .drag-handle,
.is-redesign .drag-handle--placeholder {
  width: 10px;
  min-width: 0;
  opacity: 0;
  color: var(--rd-muted-soft);
  font-size: 13px;
  line-height: 1;
  cursor: grab;
  transition: opacity .15s;
  background: transparent;
  border: 0;
  padding: 0;
  margin-left: -4px;
  align-self: center;
}
.is-redesign .data-table__headcell:hover .drag-handle {
  opacity: 1;
}
.is-redesign .drag-handle {
  /* ersetze ⋮⋮ mit einem ruhigeren Doppel-Punkt-Grid */
  font-size: 0;
  position: relative;
  height: 16px;
}
.is-redesign .drag-handle::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
  background-size: 3px 4px;
  background-position: center;
}

/* Sort-Button — typo ruhiger, Sentence Case bleibt erhalten (kommt so aus Daten) */
.is-redesign .data-table__sort {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rd-ink-2);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  padding: 8px 0;
}
.is-redesign .data-table__sort-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.is-redesign .data-table__sort-icon {
  font-size: 11px;
  color: var(--rd-muted-soft);
  opacity: 0;
  transition: opacity .12s;
}
.is-redesign .data-table__headcell:hover .data-table__sort-icon,
.is-redesign .data-table__sort.is-active .data-table__sort-icon {
  opacity: 1;
}
.is-redesign .data-table__sort.is-active {
  color: var(--rd-gold-lo);
}
.is-redesign .data-table__sort.is-active .data-table__sort-icon {
  color: var(--rd-gold);
}

/* Eye/Hide-Button UND Resizer — standardmäßig weg; nur bei Hover der Spalte sichtbar */
.is-redesign .data-table__headcell .headcell-right {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 4px;
}
.is-redesign .col-hide-btn {
  all: unset;
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--rd-muted-soft);
  font-size: 0;
  opacity: 0;
  cursor: pointer;
  position: relative;
  transition: opacity .12s, background .12s, color .12s;
}
.is-redesign .col-hide-btn::after {
  /* Augen-Off Icon, inline SVG */
  content: "";
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.88 9.88a3 3 0 1 0 4.24 4.24'/><path d='M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68'/><path d='M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61'/><line x1='2' y1='2' x2='22' y2='22'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
.is-redesign .data-table__headcell:hover .col-hide-btn {
  opacity: .7;
}
.is-redesign .col-hide-btn:hover {
  background: var(--rd-gold-soft);
  color: var(--rd-gold-lo);
  opacity: 1 !important;
}

/* ⋯-Menü-Button pro Spalte (wird von redesign.js injiziert) */
.is-redesign .rd-col-menu-btn {
  all: unset;
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--rd-muted);
  font-size: 14px;
  line-height: 1;
  opacity: .5;
  cursor: pointer;
  transition: opacity .12s, background .12s, color .12s, box-shadow .12s;
}
.is-redesign .data-table__headcell:hover .rd-col-menu-btn {
  opacity: .88;
}
.is-redesign .rd-col-menu-btn:hover {
  background: color-mix(in srgb, var(--rd-surface-hi) 75%, var(--rd-gold-softer) 25%);
  color: var(--rd-gold-lo);
  box-shadow: inset 0 0 0 1px var(--rd-line);
  opacity: 1 !important;
}

/* Aktive Filter-Markierung auf Spalte */
.is-redesign .data-table__headcell.rd-has-filter::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--rd-gold);
}

/* Resizer */
.is-redesign .column-resizer {
  width: 4px;
  height: 60%;
  align-self: center;
  background: transparent;
  cursor: col-resize;
  opacity: 0;
  border-radius: 2px;
  transition: opacity .15s, background .15s;
}
.is-redesign .data-table__headcell:hover .column-resizer {
  opacity: 1;
  background: var(--rd-line-strong);
}
.is-redesign .column-resizer:hover {
  background: var(--rd-gold);
}

/* ═══ 6b · INLINE-FILTER-ZEILE (unter Header, nur wenn Filter aktiv) ═══════ */
.is-redesign .rd-filter-row {
  display: grid;
  background: var(--rd-surface);
  border-bottom: 1px solid var(--rd-line-strong);
  position: sticky;
  top: 38px;
  z-index: 2;
}
.is-redesign .rd-filter-cell {
  padding: 6px 10px;
  border-inline-end: 1px solid var(--rd-line);
  min-width: 0;
}
.is-redesign .rd-filter-cell:last-child { border-inline-end: 0; }
.is-redesign .rd-filter-cell input,
.is-redesign .rd-filter-cell select {
  width: 100%;
  height: 28px;
  border: 1px solid var(--rd-line);
  background: var(--rd-surface-hi);
  border-radius: 6px;
  padding: 0 8px;
  font: inherit;
  font-size: 12px;
  color: var(--rd-ink);
  transition: border-color .12s, box-shadow .12s;
}
.is-redesign .rd-filter-cell input::placeholder { color: var(--rd-muted-soft); }
.is-redesign .rd-filter-cell input:focus,
.is-redesign .rd-filter-cell select:focus {
  outline: none;
  border-color: var(--rd-gold);
  box-shadow: 0 0 0 2px var(--rd-gold-soft);
}

/* ═══ 6c · DATEN-ZEILEN ════════════════════════════════════════════════════ */
.is-redesign .data-table__row {
  background: var(--rd-surface);
  border: 0;
  min-height: var(--rd-row-h);
  align-items: center;
  position: relative;
  isolation: isolate;
  transition: background .1s ease;
}
.is-redesign .data-table__row:hover {
  background: var(--rd-gold-softer);
}
.is-redesign[data-rd-theme="dark"] .data-table__row:hover {
  background: color-mix(in srgb, var(--rd-surface-hi) 82%, var(--rd-gold-softer) 18%);
}

/* Zeilen-Trenner (Tweakbar) */
[data-rd-dividers="on"] .is-redesign .data-table__row {
  border-bottom: 1px solid var(--rd-line);
}
[data-rd-dividers="on"] .is-redesign .data-table__row:last-child {
  border-bottom: 0;
}

/* Zebra (Tweakbar) */
[data-rd-zebra="on"] .is-redesign .data-table__row:nth-child(even) {
  background: var(--rd-bg);
}
[data-rd-zebra="on"] .is-redesign .data-table__row:nth-child(even):hover {
  background: var(--rd-gold-softer);
}

/* Selektierte Zeile */
.is-redesign .data-table__row.is-selected {
  background: var(--rd-gold-soft);
}
.is-redesign .data-table__row.is-selected::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--rd-gold);
}

.is-redesign .data-table__cell {
  padding: 0 var(--rd-cell-px);
  border: 0;
  font-size: var(--rd-font);
  color: var(--rd-ink);
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--rd-row-h);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.is-redesign .data-table__row:hover .data-table__cell,
.is-redesign .data-table__row.is-selected .data-table__cell {
  color: #2a2d24;
}
.is-redesign[data-rd-theme="dark"] .data-table__row:hover .data-table__cell,
.is-redesign[data-rd-theme="dark"] .data-table__row.is-selected .data-table__cell {
  color: var(--rd-ink);
}
.is-redesign .data-table__cell[data-label="E-Mail"],
.is-redesign .data-table__cell--meta {
  font-family: "JetBrains Mono", "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(var(--rd-font) - 1px);
  color: var(--rd-ink-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.is-redesign .data-table__cell--primary {
  font-weight: 600;
  color: var(--rd-ink);
}
.is-redesign .data-table__cell--numeric {
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: calc(var(--rd-font) - 1px);
}

/* ═══ 7 · STATUS-PILLS & TAG-CHIPS ═════════════════════════════════════════ */
/* Die Komponente rendert Status als inline Span mit Punkt + Label. 
   Wir entfernen den Punkt und machen einen Pastell-Pill draus. */
.is-redesign .data-table__cell[data-label="Status"] > span {
  display: inline-flex !important;
  align-items: center;
  gap: 0 !important;
  padding: 3px 9px 3px 9px;
  border-radius: 999px;
  font-size: calc(var(--rd-font) - 2px);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.4;
  background: var(--rd-off-soft);
  color: var(--rd-ink);
  border: 1px solid transparent;
}
.is-redesign .data-table__cell[data-label="Status"] > span > span:first-child { 
  display: none !important; /* punkt weg */
}
/* Zustände per Text-Matching via Data-Attribute, die wir in JS setzen */
.is-redesign .data-table__row[data-rd-status="active"] [data-label="Status"] > span {
  background: var(--rd-ok-soft);
  color: var(--rd-ok);
}
.is-redesign .data-table__row[data-rd-status="pending"] [data-label="Status"] > span {
  background: var(--rd-warn-soft);
  color: var(--rd-warn);
}
.is-redesign .data-table__row[data-rd-status="inactive"] [data-label="Status"] > span {
  background: var(--rd-off-soft);
  color: var(--rd-muted);
}

/* Tag-Chips — inline-token ist die Komponente */
.is-redesign .inline-token {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-right: 4px;
  border-radius: 4px;
  background: var(--rd-surface-2);
  color: var(--rd-ink-2);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--rd-line);
  letter-spacing: -0.005em;
}
.is-redesign .data-table__cell[data-label="Tags"] {
  gap: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Kartentyp-Pill — kleine Typ-Chip mit erkennbarer Farbe */
.is-redesign .data-table__cell[data-label="Karte"] {
  font-size: calc(var(--rd-font) - 1px);
  color: var(--rd-ink-2);
  text-transform: capitalize;
}

/* ═══ 8 · ACTIONS-SPALTE / HOVER-ACTIONS ═══════════════════════════════════
   In der Original-Komponente ist eine eigene Aktions-Spalte vorgesehen.
   Wir verstecken diese und injizieren ein schwebendes ⋯-Menü bei Hover. */
.is-redesign .data-table__headcell[data-head-key="_actions"],
.is-redesign .data-table__cell[data-label=""] {
  /* Die Komponente rendert derzeit gar keine Actions-Spalte (config hat _actions, 
     aber der Schema-Render hat sie wohl ausgelassen). Zur Sicherheit verstecken. */
  display: none;
}

/* Schwebender Row-⋯-Button */
.is-redesign .data-table__row .rd-row-actions {
  position: sticky;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  gap: 2px;
  background: var(--rd-surface-hi);
  border: 1px solid var(--rd-line-strong);
  border-radius: 6px;
  padding: 2px;
  box-shadow: 0 2px 6px rgba(42,45,36,.08);
  z-index: 4;
  grid-column: 1 / -1;
  justify-self: end;
  margin-right: 8px;
}
.is-redesign .data-table__row:hover .rd-row-actions {
  display: inline-flex;
}
.is-redesign .data-table__row.is-selected .rd-row-actions,
.is-redesign .data-table__row:focus-within .rd-row-actions {
  display: inline-flex;
}
.is-redesign .rd-row-actions button {
  all: unset;
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--rd-muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.is-redesign .rd-row-actions button:hover {
  background: var(--rd-gold-soft);
  color: var(--rd-gold-lo);
}

.is-redesign .cards-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
  padding: 14px;
  background: transparent;
}

.is-redesign .inline-card {
  border: 1px solid var(--rd-line);
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rd-surface-hi) 90%, transparent), color-mix(in srgb, var(--rd-surface) 88%, transparent));
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, .28);
  display: flex;
  flex-direction: column;
}

.is-redesign .inline-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--rd-line);
}

.is-redesign .inline-card__head > strong {
  color: var(--rd-ink);
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.is-redesign .inline-card__body {
  padding: 8px 14px 12px;
  display: grid;
  gap: 2px;
}

.is-redesign .inline-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--rd-line);
  font-size: 13px;
  color: var(--rd-muted);
}

.is-redesign .inline-card__meta:last-child {
  border-bottom: 0;
}

.is-redesign .inline-card__meta > span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rd-muted-soft);
  flex-shrink: 0;
}

.is-redesign .inline-card__meta strong {
  color: var(--rd-ink);
  text-align: right;
  word-break: break-word;
  font-weight: 500;
}

/* ═══ 8b · ADM FORM PANEL (Vereinsdaten) ═══════════════════════════════════ */
.fcp-adm-shell .qfp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.fcp-adm-shell .qfp-form-field {
  display: grid;
  gap: 5px;
}

.fcp-adm-shell .qfp-form-field.is-full {
  grid-column: 1 / -1;
}

.fcp-adm-shell .qfp-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--rd-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fcp-adm-shell .qfp-form-field :where(input, select, textarea) {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--rd-line-strong);
  border-radius: var(--rd-radius-sm);
  background: var(--rd-surface-hi);
  color: var(--rd-ink);
  font: inherit;
  font-size: 14px;
  padding: 0 12px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fcp-adm-shell .qfp-form-field textarea {
  min-height: 88px;
  padding: 10px 12px;
  resize: vertical;
}

.fcp-adm-shell .qfp-form-field :where(input, select, textarea):focus {
  outline: none;
  border-color: var(--rd-gold);
  box-shadow: 0 0 0 2px var(--rd-gold-soft);
}

.fcp-adm-shell .qfp-action-bar {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  padding-top: 6px;
}

.fcp-adm-shell .qfp-btn--primary {
  min-height: 40px;
  padding: 0 22px;
  border-radius: var(--rd-radius-sm);
  border: 1px solid color-mix(in srgb, var(--rd-gold-lo) 70%, transparent);
  background: var(--rd-gold);
  color: #1f1a10;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.fcp-adm-shell .qfp-btn--primary:hover {
  background: var(--rd-gold-hi);
  border-color: var(--rd-gold);
}

@media (max-width: 680px) {
  .fcp-adm-shell .qfp-form-grid {
    grid-template-columns: 1fr;
  }
  .fcp-adm-shell .qfp-form-field.is-full {
    grid-column: 1;
  }
  .is-redesign .cards-view {
    grid-template-columns: 1fr;
  }
}

/* ═══ 9 · INLINE-EDIT-ZEILE ════════════════════════════════════════════════ */
.is-redesign .data-table__row--editor,
.is-redesign .data-table__row--inline-edit,
.is-redesign .data-table__inline-edit {
  display: grid !important;
  align-items: start;
  background: color-mix(in srgb, var(--rd-gold-softer) 72%, var(--rd-surface) 28%);
  border: 0;
  border-bottom: 1px solid var(--rd-gold-soft);
  border-top: 1px solid var(--rd-gold-soft);
  padding: 0;
  min-height: auto;
}
.is-redesign .data-table__editor-cell {
  min-width: 0;
  padding: 10px 12px;
  border-inline-end: 1px solid var(--rd-line);
  background: transparent;
}
.is-redesign .data-table__editor-cell:last-child {
  border-inline-end: 0;
}
.is-redesign .data-table__editor-cell label {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.is-redesign .data-table__editor-cell label > span:first-child,
.is-redesign .data-table__editor-cell .qfp-field-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--rd-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.is-redesign .data-table__editor-cell input,
.is-redesign .data-table__editor-cell select,
.is-redesign .data-table__editor-cell textarea,
.is-redesign .data-table__editor-cell .data-table__editor-control {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--rd-line);
  background: var(--rd-surface-hi);
  border-radius: 7px;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--rd-ink);
  box-sizing: border-box;
}
.is-redesign .data-table__editor-cell textarea {
  min-height: 72px;
  resize: vertical;
}
.is-redesign .data-table__editor-cell input:focus,
.is-redesign .data-table__editor-cell select:focus,
.is-redesign .data-table__editor-cell textarea:focus,
.is-redesign .data-table__editor-cell .data-table__editor-control:focus {
  outline: none;
  border-color: var(--rd-gold);
  box-shadow: 0 0 0 2px var(--rd-gold-soft);
}
.is-redesign .data-table__editor-readonly {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  color: var(--rd-ink-2);
  font-size: 12px;
}
.is-redesign .data-table__multi-select {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.is-redesign .data-table__editor-cell .inline-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
}
.is-redesign .data-table__editor-cell--actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  padding: 8px 12px 10px;
  border-inline-end: 0;
  border-top: 1px dashed var(--rd-line);
  background: color-mix(in srgb, var(--rd-surface) 84%, transparent);
}
.is-redesign .data-table__inline-edit__grid,
.is-redesign .rd-inline-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 16px;
  margin-bottom: 12px;
}
.is-redesign .data-table__inline-edit label,
.is-redesign .rd-inline-edit-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--rd-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.is-redesign .data-table__inline-edit input,
.is-redesign .data-table__inline-edit select,
.is-redesign .rd-inline-edit-field input,
.is-redesign .rd-inline-edit-field select {
  width: 100%;
  height: 32px;
  border: 1px solid var(--rd-line);
  background: var(--rd-surface-hi);
  border-radius: 6px;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  color: var(--rd-ink);
}
.is-redesign .data-table__inline-edit input:focus,
.is-redesign .data-table__inline-edit select:focus {
  outline: none;
  border-color: var(--rd-gold);
  box-shadow: 0 0 0 2px var(--rd-gold-soft);
}
.is-redesign .data-table__inline-edit__footer,
.is-redesign .rd-inline-edit-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}
.is-redesign .editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ═══ 10 · KARTEN-ANSICHT ══════════════════════════════════════════════════ */
.is-redesign .data-table--cards,
.is-redesign .card-grid,
.is-redesign [data-view-mode-container="cards"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  padding: 16px;
  background: transparent;
}
.is-redesign .card-grid .data-table__row,
.is-redesign .data-table--cards .data-table__row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
  background: var(--rd-surface-hi);
  border: 1px solid var(--rd-line);
  border-radius: 10px;
  padding: 14px;
  min-height: auto;
  gap: 4px 0;
  position: relative;
}
.is-redesign .card-grid .data-table__cell,
.is-redesign .data-table--cards .data-table__cell {
  min-height: 0;
  padding: 0;
  white-space: normal;
}
.is-redesign .card-grid .data-table__cell--primary {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}
.is-redesign .card-grid .data-table__cell[data-label]::before {
  content: attr(data-label) " · ";
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--rd-muted-soft);
  margin-right: 4px;
}
.is-redesign .card-grid .data-table__cell--primary[data-label]::before,
.is-redesign .card-grid .data-table__cell--meta[data-label]::before {
  display: none;
}

/* ═══ 11 · SPALTEN-⋯-MENÜ POPOVER ══════════════════════════════════════════ */
.rd-popover--redesign {
  position: fixed;
  min-width: 208px;
  max-width: min(320px, calc(100vw - 24px));
  background: color-mix(in srgb, var(--rd-surface-hi) 88%, var(--rd-bg) 12%);
  border: 1px solid color-mix(in srgb, var(--rd-line-strong) 72%, #e5e0d8 28%);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 120;
  font-size: 13px;
  backdrop-filter: blur(6px);
  animation: rdPopoverIn .12s ease-out;
}
.rd-popover--redesign hr {
  border: 0;
  border-top: 1px solid var(--rd-line);
  margin: 4px 4px;
}
.rd-popover--redesign button {
  all: unset;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--rd-ink);
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 500;
}
.rd-popover--redesign button:hover {
  background: color-mix(in srgb, var(--rd-gold-softer) 70%, #f3ede4 30%);
  color: var(--rd-ink);
}
.rd-popover--redesign button:disabled {
  opacity: .45;
  cursor: default;
}
.rd-popover--redesign button.is-danger {
  color: var(--rd-danger);
}
.rd-popover--redesign button.is-danger:hover {
  background: var(--rd-danger-soft);
  color: var(--rd-danger);
}
.rd-popover--redesign .rd-popover-hint {
  padding: 6px 12px 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rd-muted);
}

@keyframes rdPopoverIn {
  from {
    opacity: 0;
    transform: scale(.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ═══ 12 · CHROME-ONLY-AT-HOVER Toggle (Tweak) ═════════════════════════════ */
[data-rd-chrome="always"] .is-redesign .drag-handle,
[data-rd-chrome="always"] .is-redesign .col-hide-btn,
[data-rd-chrome="always"] .is-redesign .rd-col-menu-btn,
[data-rd-chrome="always"] .is-redesign .column-resizer,
[data-rd-chrome="always"] .is-redesign .data-table__sort-icon {
  opacity: .6 !important;
}