@charset "utf-8";
/* CSS Document */
/* Tabelle scrollbar machen */
.preisblock {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

/* Erste Spalte fixieren */
.preisblock th:first-child,
.preisblock td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}
 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}

/* Optional: kleine optische Verbesserung */
.preisblock td,
.preisblock th {
  padding: 6px 8px;
}
.euro {text-align: center}
.euro:after {content: ',- €'}
.preisblock {font-size: 95%}

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

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

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

  .preisblock td,
  .preisblock th {
    padding: 6px 0;
  }
        .preisblock th::before{content: 'Hausboot '}
        .preisblock th.motorboot::before{content: 'Motoryacht '}
        td.kabinen{font-size: 0.8rem;font-style: italic;font-weight: normal;text-align: left}
}