@charset "utf-8";

/* =========================================================
   GRUNDLAYOUT & TABELLE
   ========================================================= */

table.preisblock {
  margin-left: auto;
  margin-right: auto;
}

.preisblock {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  font-size: 95%;
}

/* Erste Spalte fixieren */
.preisblock th:first-child,
.preisblock td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}

/* Tabellenoptik */
table.preisblock thead tr th {
  font-size: 0.9rem;
  font-weight: normal;
  vertical-align: top;
  background: #dddddd;
}

table.preisblock tbody tr th {
  text-align: left;
  background: #f3f3f3;
}

/* Padding */
.preisblock td,
.preisblock th {
  padding: 6px 8px;
}

/* Allgemeine Zellenformatierung */
td {
  background: #ffffff;
}

tbody th {
  border-left: thin solid #a1a1a1;
}

/* =========================================================
   INFOTABELLE
   ========================================================= */

.infotabelle {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
}

.infotabelle th,
.infotabelle td {
  padding: 8px 12px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.infotabelle th {
  width: 40%;
  font-weight: 600;
}

/* =========================================================
   PREISFORMAT
   ========================================================= */

td.nt-preis[data-euro]::after {
  content: " €";
  padding-left: 4px;
}

/* =========================================================
   RESPONSIVE DARSTELLUNG – BIS 760px
   ========================================================= */

@media (max-width: 760px) {

  .preisblock {
    width: 350px;
  }

  .preisblock thead {
    display: none;
  }

  .preisblock,
  .preisblock tbody,
  .preisblock tr,
  .preisblock td,
  .preisblock th {
    display: block;
    width: 100%;
  }

  .preisblock tr {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    padding: 10px;
    background: #fafafa;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* Standard: Label links */
  .preisblock td::before {
    content: attr(data-label);
    display: inline-block;
    width: 50%;
  }

  .preisblock td,
  .preisblock th {
    padding: 6px 0;
  }

  /* nt-preis Spezialformat */
  .preisblock td.nt-preis::before {
    text-align: left;
    flex: 1 1 auto;
    font-weight: 600;
  }

  .preisblock td.nt-preis {
    text-align: right;
    white-space: nowrap;
    padding-right: 12px;
  }

  .preisblock th::before {
    content: "Schiff ";
  }

  table.preisblock td.cab {
    width: 50%;
  }
}

/* =========================================================
   RESPONSIVE DARSTELLUNG – BIS 480px
   ========================================================= */

@media (max-width: 480px) {
  table.preisblock td.cab {
    width: 100%;
  }
}