/* Korova Tabelle (Inline) — wiederverwendbares Elementor-Widget, Port des
   Bricks-Elements table-inline (rbz.korova.co). Klassennamen bewusst
   identisch zum Original gehalten (korova-table / korova-table--inline /
   kti-*) für Konsistenz zwischen den Agentur-Projekten.

   Portabilität: Fallback-Farben nutzen NUR die vier Standard-Elementor-
   Globalfarben, deren CSS-Variablennamen auf JEDER Elementor-Seite identisch
   sind (--e-global-color-primary/secondary/text/accent) — nicht die
   zufällig generierten IDs eigener/zusätzlicher Kit-Farben einer einzelnen
   Seite. Dadurch zieht die Tabelle auf jeder neuen Elementor-Site automatisch
   deren tatsächliche Primär-/Akzentfarbe, ohne Code-Anpassung. Die
   Hex-Werte ganz am Ende der var()-Ketten sind nur der allerletzte
   Rückfallwert, falls eine Seite diese Variable ausnahmsweise gar nicht
   setzt. Pro Installation lassen sich alle Farben zusätzlich frei über die
   Widget-eigenen Color-Controls überschreiben (zeigen automatisch die
   globale Farbpalette der jeweiligen Seite). */

.korova-table--inline table {
  border-collapse: collapse;
  width: 100%;
}

.korova-table--inline table > thead > tr {
  background-color: var(--kti-header-bg, var(--e-global-color-primary, #22252A));
}
.korova-table--inline table > thead > tr > th {
  color: var(--kti-header-color, #FFFFFF);
  font-weight: 500;
  border: none;
  padding: 0.2em 0.5em;
}

.korova-table--inline table > tbody > tr {
  background-color: #FFFFFF;
}
/* !important hier bewusst: manche Theme-/Framework-Resets (live gefunden:
   eine ungezielte "reset.css"-Regel `table tbody > tr:nth-child(2n+1) > td`,
   greift auf JEDER Tabelle der Website, nicht nur unserer) setzen einen
   eigenen Hintergrund direkt auf td/th -- der überdeckt sonst den
   tr-Hintergrund oben, selbst wenn "Zebra-Streifen" ausgeschaltet ist. Ohne
   diese Zurücksetzung sah es so aus, als sei Zebra permanent an, und beim
   tatsächlichen Aktivieren (Regel unten, gezielt auf gerade Zeilen) waren
   dann ungerade UND gerade Zeilen gleichzeitig eingefärbt. */
.korova-table--inline table > tbody > tr > td,
.korova-table--inline table > tbody > tr > th {
  background-color: transparent !important;
  border: none;
  padding: 0.2em 0.5em;
}

.korova-table--inline table > tbody a {
  color: var(--kti-link-color, var(--e-global-color-accent, #0d6efd));
  text-decoration: underline;
}
.korova-table--inline table > tbody a:hover {
  color: var(--kti-link-hover-color, var(--e-global-color-primary, #0a58ca));
  filter: brightness(0.85);
}

.korova-table--inline.korova-table--striped table > tbody > tr:nth-child(even) > td,
.korova-table--inline.korova-table--striped table > tbody > tr:nth-child(even) > th {
  background-color: rgba(0, 0, 0, 0.035) !important;
}

.korova-table--inline.korova-table--separator table > tbody > tr + tr > td {
  border-top: 1px solid var(--kti-sep-color, #D8D8D8);
}

.korova-table--inline table > tfoot > tr {
  background-color: var(--kti-footer-bg, #F2F2F2);
}
.korova-table--inline table > tfoot > tr > td {
  color: var(--kti-footer-color, var(--e-global-color-text, #1A1A1A));
  font-weight: 600;
  border: none;
  padding: 0.2em 0.5em;
}

/* Responsive: "Als Karten stapeln" -- Kopfzeile ausblenden, jede Zeile wird zur
   Karte, data-label (server-seitig injiziert) zeigt den Spaltennamen vor dem Wert. */
@media (max-width: 640px) {
  .korova-table--inline.korova-table--responsive-stack table > thead {
    display: none;
  }
  .korova-table--inline.korova-table--responsive-stack table,
  .korova-table--inline.korova-table--responsive-stack table > tbody,
  .korova-table--inline.korova-table--responsive-stack table > tbody > tr,
  .korova-table--inline.korova-table--responsive-stack table > tbody > tr > td,
  .korova-table--inline.korova-table--responsive-stack table > tfoot,
  .korova-table--inline.korova-table--responsive-stack table > tfoot > tr,
  .korova-table--inline.korova-table--responsive-stack table > tfoot > tr > td {
    display: block;
    width: 100%;
  }
  .korova-table--inline.korova-table--responsive-stack table > tbody > tr {
    margin-bottom: 0.75em;
  }
  .korova-table--inline.korova-table--responsive-stack table > tbody > tr > td,
  .korova-table--inline.korova-table--responsive-stack table > tfoot > tr > td {
    position: relative;
    padding-left: 45%;
    text-align: right;
  }
  .korova-table--inline.korova-table--responsive-stack table > tbody > tr > td[data-label]::before,
  .korova-table--inline.korova-table--responsive-stack table > tfoot > tr > td[data-label]::before {
    content: attr(data-label);
    position: absolute;
    left: 0.5em;
    width: 40%;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Responsive: "Horizontal scrollen" -- Tabelle behaelt ihre Spaltenstruktur,
   der Body scrollt seitlich statt zu brechen. Root bleibt starr (fuer den
   fixen Rand-Schatten), nur der innere .korova-table__scroll-Wrapper scrollt
   -- siehe Design-Decision "Scroll-Wrapper" im Bricks-Original-README. */
@media (max-width: 640px) {
  .korova-table--inline.korova-table--responsive-scroll {
    position: relative;
    max-width: 100%;
  }
  .korova-table--inline.korova-table--responsive-scroll .korova-table__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    max-width: 100%;
  }
  .korova-table--inline.korova-table--responsive-scroll table {
    width: auto;
    min-width: 100%;
  }
  .korova-table--inline.korova-table--responsive-scroll::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.12));
    pointer-events: none;
  }
}