/* ===================================================
   Optimiertes & Modernes Tabellen-Styling für Shops
   =================================================== */

/*
 * GRUNDLAGEN & CSS-VARIABLEN (CUSTOM PROPERTIES)
 *
 * Wir definieren Farben und andere Eigenschaften als Variablen.
 * Das macht den Code sehr einfach wartbar.
 */
:root {
  --table-bg: #ffffff;
  --table-border-color: #d7dde3;
  --table-shadow-color: rgba(0, 0, 0, 0.08);

  --table-caption-color: #5b6b79;

  --thead-bg: #f5f7f9;
  --thead-text-color: #1f2a33;
  --thead-border-bottom-color: #c5cdd6;

  --tbody-text-color: #2e3b45;
  --tbody-border-color: #e1e6ea;
  --tbody-stripe-bg: #fafbfc;
  --tbody-hover-bg: #f0f4f7;
}

/*
 * ALLGEMEINES TABELLEN-STYLING
 *
 * Diese Regeln nutzen die oben definierten Variablen.
 */
table {
  width: 100%;
  max-width: 900px;
  margin: 1.5rem auto;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--table-bg);
  border: 1px solid var(--table-border-color);
  font-size: 0.95rem;
  line-height: 1.5;
  box-shadow: 0 1px 3px var(--table-shadow-color);
}

/* Tabellenüberschrift */
table caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--table-caption-color);
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
}

/* Tabellenkopf */
table thead th {
  background: var(--thead-bg);
  color: var(--thead-text-color);
  font-weight: 600;
  text-align: left;
  padding: 12px 15px;
  border: 1px solid var(--table-border-color);
  border-bottom: 2px solid var(--thead-border-bottom-color);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Tabellenzellen */
table tbody td {
  padding: 12px 15px;
  border: 1px solid var(--tbody-border-color);
  color: var(--tbody-text-color);
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Zebra-Streifen (nur jede zweite Zeile benötigt eine Farbe) */
table tbody tr:nth-child(even) {
  background: var(--tbody-stripe-bg);
}

/* Hover-Effekt */
table tbody tr:hover {
  background: var(--tbody-hover-bg);
  transition: background-color 0.2s ease-in-out;
}

/*
 * SPEZIFISCHES TABELLEN-STYLING
 */

/* Versandkosten-Tabelle */
table[aria-label="Versandkosten und Lieferzeiten"] thead th:nth-child(1),
table[aria-label="Versandkosten und Lieferzeiten"] tbody td:nth-child(1) {
  width: 40%;
}

table[aria-label="Versandkosten und Lieferzeiten"] thead th:nth-child(2),
table[aria-label="Versandkosten und Lieferzeiten"] tbody td:nth-child(2) {
  width: 30%;
}

table[aria-label="Versandkosten und Lieferzeiten"] thead th:nth-child(3),
table[aria-label="Versandkosten und Lieferzeiten"] tbody td:nth-child(3) {
  width: 30%;
}

/* Inch/cm Umrechnungstabelle */
table[aria-label="Vergleich inch zu Zentimeter"] {
  max-width: 500px;
}

table[aria-label="Vergleich inch zu Zentimeter"] th,
table[aria-label="Vergleich inch zu Zentimeter"] td {
  width: 50%;
  text-align: left;
}


/*
 * RESPONSIVE & DRUCK-STYLING
 */

/* Mobile Optimierung */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto; /* Erlaubt horizontales Scrollen bei zu breiten Tabellen */
    white-space: nowrap; /* Verhindert unschönen Zeilenumbruch in Zellen */
    max-width: 100%;
    margin: 1rem 0;
    font-size: 0.9rem;
  }
  
  table thead th,
  table tbody td {
    white-space: normal; /* Erlaubt Zeilenumbrüche wieder innerhalb der Zellen */
    padding: 10px 12px;
    font-size: 0.88rem;
  }
  
  table caption {
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
  }
}

/* Verbesserte Druckansicht */
@media print {
  table {
    box-shadow: none;
    border: 2px solid #000;
  }
  
  thead th {
    background: #f0f0f0 !important;
    color: #000 !important;
    border: 1px solid #000;
  }
  
  tbody td {
    border: 1px solid #000;
  }
  
  tbody tr,
  tbody tr:nth-child(even),
  tbody tr:hover {
    background: transparent !important;
    color: #000 !important;
  }
}