/* ─────────────────────────────────────────────────────────
   SG Tabellen – Frontend CSS  v2.1
   Wittermag Child Theme · Seiten-BG: var(--dark-ui,#262626)

   ARCHITEKTUR-ENTSCHEIDUNGEN v2.1:

   Problem 1: Weißer Rand oben
   → Ursache: thead th hat opaken BG + sticky → überlagert
     scroll-container border nicht, ABER: scroll-container
     border-top wird vom ersten th-Element (sticky, z-index:2)
     überdeckt wenn th den gleichen BG wie der Seiten-BG hat.
     Eigentlich sollte das okay sein... aber der scroll-container
     hat border-radius:12px + overflow:auto, und der thead th
     hat position:sticky top:0. Beim initialen Render liegt
     th ÜBER dem border des scroll-containers.
     Fix: scroll-container bekommt keinen border mehr.
     Stattdessen: wrapper bekommt outline (liegt außerhalb)
     NEIN — outline liegt außerhalb des border-radius.
     Einzige saubere Lösung: wrapper bekommt border UND
     overflow:hidden NUR für den wrapper selbst, der
     scroll-container ist ein separates Element OHNE overflow.
     ABER: overflow:hidden am Wrapper bricht sticky der Kinder.
     
     WIRKLICHE LÖSUNG: Tabelle selbst hat keinen border.
     Border kommt via ::before Pseudo auf .rtb-wrapper,
     das pointer-events:none + position:absolute + inset:0
     + border-radius + border hat. Liegt immer ÜBER dem Inhalt.
     
   Problem 2: Doppelte Linie sticky-Spalte
   → ::after auf td + border-right auf td = zwei Linien.
     Fix: border-right:none auf sticky td, nur ::after.
     
   Problem 3: Teal-Linie thead verschwindet beim Scrollen
   → border-bottom auf th liegt HINTER tbody tr.
     Fix: thead tr::after mit position:sticky + bottom:0
     statt auf tr (tr ist nicht sticky). Besser:
     ::after auf dem letzten th oder auf thead selbst.
     Eigentlich: th hat bereits z-index:2 und ist sticky.
     Das border-bottom SOLLTE sichtbar sein. Problem ist
     dass tbody tr z-index:0 hat aber visually über den
     border-bottom gerendert wird wegen border-collapse.
     Fix: border-collapse:separate statt collapse für thead,
     oder: border-bottom:none auf th, stattdessen
     box-shadow: 0 2px 0 rgba(teal) auf th (scrollt mit sticky).
   ───────────────────────────────────────────────────────── */

/* ══ 1. WRAPPER ════════════════════════════════════════════
   Wrapper hat overflow:visible (sticky braucht das).
   Sichtbarer Rahmen via ::before Pseudo → liegt ÜBER Inhalt,
   damit sticky-BG ihn nicht überdecken kann.               */
.rtb-wrapper {
  margin: 1.2em 0 0.4em;
  border-radius: 12px;
  border: none !important;
  box-shadow: none;
  background: transparent !important;
  background-color: transparent !important;
  overflow: visible;
  font-family: inherit;
  isolation: isolate;
  position: relative; /* für ::before */
}

/* Rahmen als Pseudo-Element über dem gesamten Inhalt */
.rtb-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  /* z-index hoch genug um über sticky-Inhalten zu liegen */
  z-index: 10;
}

/* ══ 2. SCROLL-CONTAINER ═══════════════════════════════════
   Kein border hier (liegt am wrapper::before).
   overflow:auto clippt Inhalte an border-radius.           */
.rtb-scroll-container {
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(60, 255, 208, 0.35) transparent;
  min-height: 0;
  display: block;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.rtb-scroll-container::-webkit-scrollbar        { height: 5px; width: 5px; }
.rtb-scroll-container::-webkit-scrollbar-track  { background: transparent; }
.rtb-scroll-container::-webkit-scrollbar-thumb  { background: rgba(60,255,208,.30); border-radius: 3px; }
.rtb-scroll-container::-webkit-scrollbar-thumb:hover { background: rgba(60,255,208,.55); }

/* ══ 3. TABELLE ════════════════════════════════════════════ */
.rtb-wrapper .rtb-table {
  width: 100% !important;
  min-width: max-content;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  font-size: 0.9rem !important;
  line-height: 1.5;
  table-layout: auto;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* ══ 4. THEAD ══════════════════════════════════════════════ */
.rtb-wrapper .rtb-table thead,
.rtb-wrapper .rtb-table thead tr {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* ══ 5. TH (Header-Zeile, sticky-top) ══════════════════════
   box-shadow statt border-bottom für die Teal-Linie:
   box-shadow scrollt MIT dem sticky-Element und liegt
   immer sichtbar über dem tbody-Inhalt.
   border-collapse:collapse + border-bottom würde hinter
   dem nächsten tr verschwinden.                            */
.rtb-wrapper .rtb-table thead th {
  padding: 11px 16px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--accent-color, #3CFFD0) !important;
  border-top: none !important;
  border-left: none !important;
  border-bottom: none !important;
  /* Spaltentrennlinie rechts */
  border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
  /* Teal-Linie UNTEN via box-shadow (bleibt beim Scrollen sichtbar) */
  box-shadow: 0 2px 0 rgba(60, 255, 208, 0.60) !important;
  /* Opaker BG = Seiten-BG */
  background: var(--rtb-sticky-bg, var(--dark-ui, #262626)) !important;
  background-color: var(--rtb-sticky-bg, var(--dark-ui, #262626)) !important;
  text-align: left !important;
  vertical-align: bottom !important;
  position: sticky;
  top: 0;
  z-index: 2;
}
.rtb-wrapper .rtb-table thead th:last-child {
  border-right: none !important;
}

/* ══ 6. TBODY ══════════════════════════════════════════════ */
.rtb-wrapper .rtb-table tbody,
.rtb-wrapper .rtb-table tbody tr {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* ══ 7. BODY-ZELLEN ════════════════════════════════════════ */
.rtb-wrapper .rtb-table tbody td,
.rtb-wrapper .rtb-table tbody th {
  padding: 13px 16px !important;
  color: var(--text-main, #e0e0e0) !important;
  border-top: none !important;
  border-left: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
  text-align: left !important;
  vertical-align: top !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  font-weight: normal !important;
  font-size: 0.9rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: background-color 0.15s ease !important;
}
.rtb-wrapper .rtb-table tbody td:last-child,
.rtb-wrapper .rtb-table tbody th:last-child {
  border-right: none !important;
}

/* ══ 7b. HOVER ══════════════════════════════════════════════ */
.rtb-wrapper .rtb-table tbody tr:hover > td,
.rtb-wrapper .rtb-table tbody tr:hover > th {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

/* ══ 8. LETZTE ZEILE ═══════════════════════════════════════ */
.rtb-wrapper .rtb-table tbody tr:last-child td,
.rtb-wrapper .rtb-table tbody tr:last-child th {
  border-bottom: none !important;
}

/* ══ 9. ERSTE DATENSPALTE (Standard) ══════════════════════ */
.rtb-wrapper .rtb-table tbody td:first-child {
  color: var(--text-main, #e0e0e0) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ══ 10. HEADER-SPALTE (rtb-has-header-col) ════════════════ */
.rtb-has-header-col .rtb-table tbody td:first-child,
.rtb-has-header-col .rtb-table tbody th[scope="row"] {
  color: var(--accent-color, #3CFFD0) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  padding-right: 20px !important;
  /* Teal-Trennlinie via border-right (kein sticky hier) */
  border-right: 2px solid rgba(60, 255, 208, 0.45) !important;
}
.rtb-has-header-col .rtb-table thead th:first-child {
  border-right: 2px solid rgba(60, 255, 208, 0.45) !important;
}

/* ══ 11. STICKY ERSTE SPALTE ═══════════════════════════════
   Teal-Linie rechts via box-shadow (scrollt mit sticky).
   KEIN border-right zusätzlich → keine Doppellinie.        */
.rtb-sticky-first .rtb-table tbody td:first-child,
.rtb-sticky-first .rtb-table tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--rtb-sticky-bg, var(--dark-ui, #262626)) !important;
  background-color: var(--rtb-sticky-bg, var(--dark-ui, #262626)) !important;
  transition: background-color 0.15s ease !important;
  /* Teal-Linie rechts via box-shadow, bleibt beim Scrollen sichtbar */
  box-shadow: 2px 0 0 rgba(60, 255, 208, 0.45) !important;
  /* border-right überschreiben: nur der box-shadow soll die Linie machen */
  border-right: none !important;
}

/* Hover auf sticky-Spalte */
.rtb-sticky-first .rtb-table tbody tr:hover > td:first-child,
.rtb-sticky-first .rtb-table tbody tr:hover > th[scope="row"] {
  background-color: color-mix(
    in srgb,
    var(--rtb-sticky-bg, var(--dark-ui, #262626)) 96%,
    white 4%
  ) !important;
}

/* Header-Ecke oben-links: sticky in beide Richtungen.
   box-shadow kombiniert: Teal rechts + Teal unten.         */
.rtb-sticky-first .rtb-table thead th:first-child {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 4;
  background: var(--rtb-sticky-bg, var(--dark-ui, #262626)) !important;
  background-color: var(--rtb-sticky-bg, var(--dark-ui, #262626)) !important;
  border-right: none !important;
  /* Teal unten (von th-Regel geerbt) + Teal rechts kombiniert */
  box-shadow:
    2px 0 0 rgba(60, 255, 208, 0.45),
    0 2px 0 rgba(60, 255, 208, 0.60) !important;
}

/* ══ 12. ZEBRA-STREIFEN ════════════════════════════════════ */
.rtb-striped .rtb-table tbody tr:nth-child(even) td,
.rtb-striped .rtb-table tbody tr:nth-child(even) th {
  background: rgba(255, 255, 255, 0.03) !important;
  background-color: rgba(255, 255, 255, 0.03) !important;
}
.rtb-striped .rtb-table tbody tr:nth-child(even):hover > td,
.rtb-striped .rtb-table tbody tr:nth-child(even):hover > th {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Zebra + Sticky: opake BG pro Zeilen-Typ */
.rtb-striped.rtb-sticky-first .rtb-table tbody tr:nth-child(odd) td:first-child,
.rtb-striped.rtb-sticky-first .rtb-table tbody tr:nth-child(odd) th[scope="row"] {
  background: var(--rtb-sticky-bg, var(--dark-ui, #262626)) !important;
  background-color: var(--rtb-sticky-bg, var(--dark-ui, #262626)) !important;
}
.rtb-striped.rtb-sticky-first .rtb-table tbody tr:nth-child(even) td:first-child,
.rtb-striped.rtb-sticky-first .rtb-table tbody tr:nth-child(even) th[scope="row"] {
  background: color-mix(in srgb, var(--rtb-sticky-bg, #262626) 97%, white 3%) !important;
  background-color: color-mix(in srgb, var(--rtb-sticky-bg, #262626) 97%, white 3%) !important;
}
.rtb-striped.rtb-sticky-first .rtb-table tbody tr:hover > td:first-child,
.rtb-striped.rtb-sticky-first .rtb-table tbody tr:hover > th[scope="row"] {
  background-color: color-mix(
    in srgb, var(--rtb-sticky-bg, #262626) 93%, white 7%
  ) !important;
}

/* ══ 13. MEHRZEILIGE ZELLINHALTE / BULLET-LISTS ════════════ */
.rtb-wrapper .rtb-table td .rtb-list,
.rtb-wrapper .rtb-table th .rtb-list {
  display: block !important;
  margin: 0 !important;
  padding: 0 0 0 1.2em !important;
  list-style: disc outside !important;
}
.rtb-wrapper .rtb-table td .rtb-list li,
.rtb-wrapper .rtb-table th .rtb-list li {
  display: list-item !important;
  list-style: disc !important;
  line-height: 1.55 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
}
.rtb-wrapper .rtb-table td .rtb-list li::marker,
.rtb-wrapper .rtb-table th .rtb-list li::marker {
  color: var(--accent-color, #3CFFD0) !important;
}
.rtb-wrapper .rtb-table td .rtb-list:not(:first-child),
.rtb-wrapper .rtb-table th .rtb-list:not(:first-child) {
  margin-top: 0.3em !important;
}

/* ══ 14. LINKS ═════════════════════════════════════════════ */
.rtb-wrapper .rtb-table a,
.rtb-wrapper .rtb-table a:visited {
  color: var(--accent-color, #3CFFD0) !important;
  text-decoration: underline;
  text-decoration-color: rgba(60, 255, 208, 0.35);
  text-underline-offset: 2px;
  background: none !important;
  padding: 0 !important;
}
.rtb-wrapper .rtb-table a:hover {
  text-decoration-color: rgba(60, 255, 208, 0.80);
}

/* ══ 15. CAPTION ═══════════════════════════════════════════ */
.rtb-wrapper .rtb-caption {
  font-size: 0.75rem !important;
  color: rgba(255, 255, 255, 0.35) !important;
  text-align: center;
  padding: 6px 14px 8px;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: transparent !important;
}