/* ==========================================================
   Versand- & AGB-Tabellen
   Gilt für alle Shops / Server
   Scope: .versand_tables
   ========================================================== */

.versand_tables table.versand_tabelle,
.versand_tables table.versand_3tabelle{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  line-height: 1.25;
}

/* Tabellenkopf */
.versand_tables table.versand_tabelle thead th,
.versand_tables table.versand_3tabelle thead th{
  padding: 10px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0,0,0,.10);
  font-weight: 600;
}

/* Tabellenzellen */
.versand_tables table.versand_tabelle tbody td,
.versand_tables table.versand_3tabelle tbody td{
  padding: 10px 14px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0,0,0,.06);
  overflow-wrap: anywhere;
}

/* Zebra-Streifen */
.versand_tables table.versand_tabelle tbody tr:nth-child(even),
.versand_tables table.versand_3tabelle tbody tr:nth-child(even){
  background: rgba(0,0,0,.025);
}

/* Hover */
.versand_tables table.versand_tabelle tbody tr:hover,
.versand_tables table.versand_3tabelle tbody tr:hover{
  background: rgba(0,0,0,.04);
}

/* Preis-Spalte rechts */
.versand_tables table.versand_tabelle thead th:last-child,
.versand_tables table.versand_3tabelle thead th:last-child{
  text-align: right;
}

.versand_tables table.versand_tabelle tbody td:last-child,
.versand_tables table.versand_3tabelle tbody td:last-child{
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}

/* 2-Spalten-Tabelle */
.versand_tables table.versand_tabelle th:first-child,
.versand_tables table.versand_tabelle td:first-child{
  width: 70%;
}

.versand_tables table.versand_tabelle th:last-child,
.versand_tables table.versand_tabelle td:last-child{
  width: 30%;
}

/* 3-Spalten-Tabelle */
.versand_tables table.versand_3tabelle th:nth-child(1),
.versand_tables table.versand_3tabelle td:nth-child(1){
  width: 45%;
}

.versand_tables table.versand_3tabelle th:nth-child(2),
.versand_tables table.versand_3tabelle td:nth-child(2){
  width: 30%;
}

.versand_tables table.versand_3tabelle th:nth-child(3),
.versand_tables table.versand_3tabelle td:nth-child(3){
  width: 25%;
}

.versand_tables{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.versand_tables table{
  min-width: 520px; /* optional, verhindert zerquetschen */
}


/* ===========================
   Abstände & Hierarchie
   =========================== */

/* Überschrift → Text */
.versand_section h2 {
  margin-bottom: 10px;
}

/* Text → Tabelle */
.versand_section > p {
  margin-bottom: 18px;
}

/* Tabelle selbst */
.versand_tables {
  margin-top: 8px;
}

/* Abstand nach jeder Tabelle */
.versand_block {
  margin-bottom: 32px;
}


/* Responsive Anpassungen */
@media (max-width: 700px){
  .versand_tables table.versand_3tabelle th:nth-child(1),
  .versand_tables table.versand_3tabelle td:nth-child(1){
    width: 40%;
  }

  .versand_tables table.versand_3tabelle th:nth-child(2),
  .versand_tables table.versand_3tabelle td:nth-child(2){
    width: 35%;
  }

  .versand_tables table.versand_3tabelle th:nth-child(3),
  .versand_tables table.versand_3tabelle td:nth-child(3){
    width: 25%;
  }
}

@media (max-width: 768px){

  /* Wrapper: eigener Positionierungs-Kontext */
  .scroll_hint_wrapper{
    position: relative;
    padding-bottom: 14px; /* bisschen mehr Platz */
  }

  /* Scroll-Container: Abstand nach unten, damit die Leiste nicht im Content klebt */
  .scroll_hint_wrapper .versand_tables{
    margin-bottom: 6px;
  }

  /* Hint-Bar: immer über dem Inhalt */
  .scroll_hint_bar{
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 2px;
    height: 6px;
    border-radius: 999px;
    background: rgba(0,0,0,.10);
    pointer-events: none;
    z-index: 5;
  }

  .scroll_hint_bar::after{
    content:"";
    display:block;
    width: 36%;
    height: 100%;
    border-radius: 999px;
    background: rgba(0,0,0,.30);
  }
}