@charset "utf-8";

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

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

/* Tabelle scrollbar machen */
.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;
}

table.preisblock tbody td.euro {
  text-align: center;
}

table.preisblock tbody td.euro::after {
  content: ' €';
}

td.kabinen {
  font-size: 0.8rem;
  font-style: italic;
  font-weight: normal;
  text-align: right;
}

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

/* Euro-Format */
.euro {
  text-align: center;
}
.euro:after {
  content: ',- €';
}

/* =========================================
   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;
}

/* =========================================
   ALLGEMEINE FORMATIERUNGEN
   ========================================= */

section.margin-bottom {
  background: #f3f3f3;
  padding: 20px 0;
}

td {
  background: #ffffff;
}

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

/* =========================================
   ROUTEN-GRID
   ========================================= */

#routen div.grid {
  display: flex;
  justify-content: center;
}

/* =========================================
   CHARTER-INFO BLOCK
   ========================================= */

.charter-info {
  width: max-content;
  margin: 0 auto;
  text-align: center;
}

.charter-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.charter-info li {
  margin: 0.3em 0;
}

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

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

/* =========================================
   RESPONSIVE DARSTELLUNG
   ========================================= */

/* --- MOBILE BIS 760px --- */
@media (max-width: 760px) {

  .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;
  }

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

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

  table.preisblock tbody td.euro {
    text-align: left;
    background: #ffffff;
  }

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

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

  .preisblock th.motorboot::before {
    content: 'Motoryacht ';
  }

  td.kabinen {
    text-align: left;
  }

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

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