@charset "utf-8";
/* CSS Document */
/* ===========================
   Grundlayout / Desktop
   =========================== */

section.preistabelle {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: normal;
  font-size: 95%;
  text-align: center;        /* NEU: Container zentriert Inhalt */
}

section.preistabelle table {
  display: inline-block;  
white-space: nowrap;/* NEU: Tabelle passt sich dem Inhalt an */
  text-align: left;          /* NEU: Tabelleninhalt bleibt links */
}


/* Sticky erste Spalte */
section.preistabelle th:first-child,
section.preistabelle td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}

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

/* Erste Spalte im Body */
section.preistabelle table tbody tr th {
  text-align: left;
  background: #f3f3f3;
}

/* Euro / Pfund */
section.preistabelle table tbody td.euro, section.preistabelle table tbody td.pfund {
  text-align: center;
}
section.preistabelle table tbody td.euro::after {
  content: ' €';
}
section.preistabelle table tbody td.pfund::after {
  content: ' £';
}

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

/* Zellabstände */
section.preistabelle td,
section.preistabelle th {
  padding: 6px 8px;
}


/* ===========================
   Mobile Darstellung
   =========================== */

@media (max-width: 760px) {
      section.preistabelle table {display: block; width: 98%}

  /* Tabellenkopf ausblenden */
  section.preistabelle thead {
    display: none;
  }

  /* Alles block-level */
  section.preistabelle,
  section.preistabelle tbody,
  section.preistabelle tr,
  section.preistabelle td,
  section.preistabelle th {
    display: block;
    width: 100%;
  }

  /* Jede Zeile als Box */
  section.preistabelle tr {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    padding: 10px;
    background: #fafafa;
  }

  /* Mobile: Flexbox für Label + Wert */
  section.preistabelle td {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Label vor jeder Zelle */
  section.preistabelle td::before {
    content: attr(data-label);
    flex: 1 1 auto;
    text-align: left;
  }

  /* Mobile Padding */
  section.preistabelle td,
  section.preistabelle th {
    padding: 6px 0;
  }

  /* Euro-Zellen mobil linksbündig (Basis) */
  section.preistabelle table tbody td.euro, section.preistabelle table tbody td.pfund {
    text-align: left;
    background: #ffffff;
  }

  /* Mobile: Hausboot vor der ersten Spalte */
  section.preistabelle.hausboot th::before {
    content: 'Hausboot ';
  }


  /* Kabinen mobil links */
  td.kabinen {
    text-align: left;
  }
}


/* ===========================
   Extra-Small (<480px)
   =========================== */

@media (max-width: 480px) {
  /* Euro-Wert rechts, Label bleibt links */
  section.preistabelle table tbody td.euro, section.preistabelle table tbody td.pfund {
    justify-content: space-between;
    text-align: right;
  }
}