.booking-bg-spacer {
  height: 210px; /* Höhe des oberen Hintergrundbildes */
}


    .page-header {
      padding: 210px 0 30px;
      text-align: center;
    }

    .page-header h1 {
      margin: 0;
      font-size: 42px;
      letter-spacing: 4px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .page-header p {
      margin: 0;
      font-size: 13px;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    /* 3 Spalten: 240 + 30 + 240 + 30 + 240 = 780 px */
    .booking-grid {
      width: 780px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 240px);
      gap: 30px;
      margin-bottom: 100px ;
    }

    .booking-tile {
      width: 240px;
      height: 240px;
      position: relative;
      display: block;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.2);
      text-decoration: none;
    }

    .booking-tile img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    /* blasse Standard-Variante */
    .booking-tile .img-normal {
      opacity: 1;
      z-index: 1;
    }

    /* Hover-Variante zunächst versteckt */
    .booking-tile .img-hover {
      opacity: 0;
      z-index: 2;
    }

    /* Bei Mouse-over Bild tauschen */
    .booking-tile:hover .img-normal {
      opacity: 0;
    }

    .booking-tile:hover .img-hover {
      opacity: 1;
      transform: scale(1.03);
    }

    .booking-tile.empty {
      background: rgba(255, 255, 255, 0.2);
      pointer-events: none;
    }

    @media (max-width: 840px) {
      .booking-grid {
        width: 240px;
        grid-template-columns: 240px;
      }

      .page-header h1 {
        font-size: 32px;
      }
    }