/* DIVI Inline-Styles neutralisieren */
.custom-role-table th,
.custom-role-table td {
  width: auto !important;
}

/* Tabellen-Wrapper */
.custom-role-table-wrap {
  margin: 24px 0;
  overflow-x: visible;
  max-width: 100%;
}

/* Tabelle */
.custom-role-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border: none;
  table-layout: fixed;
}

/* Spalte 1 */
.custom-role-table th:nth-child(1),
.custom-role-table td:nth-child(1) {
  width: var(--col-1, 20%) !important;
}

/* Spalte 2 */
.custom-role-table th:nth-child(2),
.custom-role-table td:nth-child(2) {
  width: var(--col-2, 40%) !important;
}

/* Spalte 3 */
.custom-role-table th:nth-child(3),
.custom-role-table td:nth-child(3) {
  width: var(--col-3, 40%) !important;
}

/* Header */
.custom-role-table th {
  background: #0056a2;
  color: #ffffff !important;
  text-align: left;
  padding: 14px 16px;
  border: none;
  vertical-align: top;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: auto;
}

/* Zellen */
.custom-role-table td {
  padding: 14px 16px;
  border: none;
  vertical-align: top;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: auto;
}

/* Zebra */
.custom-role-table tbody tr:nth-child(even) {
  background: #eaeaea;
}

/* Erste Spalte */
.custom-role-table td:first-child {
  font-weight: 600;
  color: #0056a2;
}

/* Desktop: erste Spalte sauber trennen */
@media only screen and (min-width: 981px) {
  .custom-role-table th:first-child,
  .custom-role-table td:first-child {
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: auto;
  }
}

/* Mobile / schmale Inhaltsbereiche: Kartenansicht */
@media only screen and (max-width: 980px) {

  /* Wrapper ohne horizontalen Scroll */
  .custom-role-table-wrap {
    overflow-x: visible;
    max-width: 100%;
  }

  /* Tabelle auf volle Containerbreite zwingen */
  .custom-role-table {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
  }

  /* Tabellenkopf ausblenden */
  .custom-role-table thead {
    display: none;
  }

  /* Tabellenkörper */
  .custom-role-table tbody {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Jede Zeile wird zur Karte */
  .custom-role-table tr {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px;
    border: none !important;
    border-radius: 0;
    background: #ffffff;
    overflow: hidden;
  }

  /* Zebra auf Mobile neutralisieren */
  .custom-role-table tbody tr:nth-child(even) {
    background: #ffffff;
  }

  /* Prozentwerte auf Mobile neutralisieren */
  .custom-role-table th,
  .custom-role-table td,
  .custom-role-table th:nth-child(1),
  .custom-role-table td:nth-child(1),
  .custom-role-table th:nth-child(2),
  .custom-role-table td:nth-child(2),
  .custom-role-table th:nth-child(3),
  .custom-role-table td:nth-child(3) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Zellen innerhalb der Karte */
  .custom-role-table td {
    display: block;
    box-sizing: border-box;
    padding: 0 16px 12px;
    border: none !important;
    background: #ffffff;
    text-align: left !important;
    color: inherit;
    font-weight: normal;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Keine Linien zwischen Kartenfeldern */
  .custom-role-table td + td {
    border-top: none !important;
  }

  /* Mobile Labels aus data-label anzeigen */
  .custom-role-table td::before {
    content: attr(data-label);
    display: block;
    padding: 12px 0 4px;
    font-weight: 700;
    color: #0056a2;
    background: transparent;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
  }

  /* Erste Zelle als blauer Kartentitel */
  .custom-role-table td:first-child {
    background: #0056a2;
    color: #ffffff;
    font-weight: 700;
    padding-bottom: 14px;
  }

  /* Label der ersten Zelle */
  .custom-role-table td:first-child::before {
    color: #ffffff;
  }
}