/*
 * Belegungsuebersicht (3.89.0-dev) - auf der Ergebnisseite und im
 * Buchungsassistenten, deshalb eine eigene kleine Datei statt in einer der
 * beiden anderen.
 *
 * Wie ghb-search.css zurueckhaltend: Schrift und Rundungen vom Theme. Die
 * eine Ausnahme ist das Gruen der buchbaren Felder - "frei" muss auf einen
 * Blick zu erkennen sein. Nie Farbe allein: jedes buchbare Feld traegt die
 * Zahl der freien Zimmer, jedes belegte einen Strich.
 */

.ghb-overview {
  margin-top: 1.25rem;
}

.ghb-overview__title {
  margin: 0 0 0.35rem;
  font-size: 1.1em;
}

.ghb-overview__intro,
.ghb-overview__none {
  margin: 0 0 0.6rem;
  font-size: 0.92em;
}

.ghb-overview__none {
  font-weight: 600;
}

.ghb-overview__nav {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.ghb-overview__nav-link--next {
  margin-left: auto;
}

.ghb-overview__nav-link {
  display: inline-block;
  padding: 0.35em 0.8em;
  border: 1px solid currentColor;
  border-radius: 0.4em;
  text-decoration: none;
  font-size: 0.9em;
  font-weight: 600;
}

/* Die Tabelle scrollt fuer sich - auf dem Telefon waagerecht, die Seite nicht. */
.ghb-overview__scroll {
  /* Bezugsrahmen fuer die absolut positionierten Screenreader-Texte - ohne
     ihn lagen sie ausserhalb des Scrollbereichs und machten die ganze Seite
     auf dem Telefon breiter als den Bildschirm. */
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.ghb-overview__table {
  border-collapse: separate;
  border-spacing: 3px;
  font-size: 0.85em;
  width: auto;
  margin: 0;
}

.ghb-overview__table th,
.ghb-overview__table td {
  padding: 0;
  border: 0;
  text-align: center;
  vertical-align: middle;
  background: transparent;
}

.ghb-overview__day {
  min-width: 2.6em;
  line-height: 1.15;
  font-weight: 600;
}

.ghb-overview__day.is-weekend {
  opacity: 0.75;
}

.ghb-overview__weekday,
.ghb-overview__date {
  display: block;
}

.ghb-overview__weekday {
  font-weight: 400;
  font-size: 0.85em;
}

/* Erste Spalte bleibt beim waagerechten Scrollen stehen. */
.ghb-overview__type,
.ghb-overview__corner {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left !important;
  padding-right: 0.5em !important;
  min-width: 9em;
  max-width: 14em;
  font-weight: 600;
  /* Die feststehende Spalte braucht einen deckenden Hintergrund. Das Skript
     setzt die Variable auf den Hintergrund der Seite; ohne Skript Weiss. */
  background: var(--ghb-overview-sticky-bg, #fff) !important;
}

@media (max-width: 600px) {
  .ghb-overview__type,
  .ghb-overview__corner {
    min-width: 6.5em;
    max-width: 8em;
    font-size: 0.92em;
    hyphens: auto;
  }
}

/* Nicht jedes Theme bringt diese Klasse mit - ohne sie stuende der
   Screenreader-Text sichtbar in jedem belegten Feld. */
.ghb-overview .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ghb-overview__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6em;
  min-height: 2.4em;
  border-radius: 0.35em;
  font-weight: 700;
  text-decoration: none;
  box-sizing: border-box;
}

.ghb-overview__cell.is-bookable {
  background: #dcefe0;
  color: #14532d;
  border: 1px solid #2f7d45;
}

a.ghb-overview__cell.is-bookable:hover,
a.ghb-overview__cell.is-bookable:focus-visible {
  background: #2f7d45;
  color: #fff;
  outline: 2px solid #14532d;
  outline-offset: 1px;
}

.ghb-overview__cell.is-full {
  color: color-mix(in srgb, currentColor 55%, transparent);
  border: 1px dashed color-mix(in srgb, currentColor 25%, transparent);
  font-weight: 400;
}

.ghb-overview__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0.6rem 0 0;
  font-size: 0.85em;
}

.ghb-overview__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.ghb-overview__swatch {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 0.2em;
}

.ghb-overview__swatch.is-bookable {
  background: #dcefe0;
  border: 1px solid #2f7d45;
}

.ghb-overview__swatch.is-full {
  border: 1px dashed color-mix(in srgb, currentColor 40%, transparent);
}

.ghb-overview[aria-busy="true"] {
  opacity: 0.6;
}