/* Antara Spa – Custom CSS für SimplyBook.me */

/* ── Schriftarten: font-display optimieren (~240ms Ersparnis) ── */
@font-face {
  font-display: swap !important;
}

/* ── Basis-Reset ────────────────────────────────────────────── */
#antara-custom-content,
#antara-custom-content * {
  box-sizing: border-box !important;
}

#antara-custom-content {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both !important;
  float: none !important;
  column-count: 1 !important;
  columns: auto !important;
  column-gap: 0 !important;
  font-family: Optima, Candara, "Trebuchet MS", serif !important;
  color: #47423F !important;
}

#antara-custom-content section,
#antara-custom-content div,
#antara-custom-content details,
#antara-custom-content summary,
#antara-custom-content p,
#antara-custom-content ul,
#antara-custom-content li,
#antara-custom-content h1,
#antara-custom-content h2,
#antara-custom-content h3,
#antara-custom-content h4 {
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  column-count: 1 !important;
  columns: auto !important;
  break-inside: avoid !important;
}

#antara-custom-content details > div {
  display: block !important;
  width: 100% !important;
}

#antara-custom-content a {
  word-break: break-word !important;
}

/* ── CLS-Fix 1: Alle Bilder – kein Layout Shift ────────────── */
/* Bilder ohne width/height-Attribute springen beim Laden.
   Dies reserviert den Platz vorab. */
#antara-custom-content img,
.sb-img img,
.simplybook-widget img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ── CLS-Fix 2: Hero-Bild – Platz vorab reservieren ────────── */
/* Das Hero-Bild ist der größte CLS-Verursacher. Ein festes
   Seitenverhältnis (16:7) verhindert das Springen. */
.sb-hero,
.hero-image,
.main-image,
[class*="hero"],
[class*="banner-image"] {
  aspect-ratio: 16 / 7 !important;
  overflow: hidden !important;
  width: 100% !important;
}

/* ── CLS-Fix 3: Google Reviews – verhindert nachträgliches Einspringen */
#sb_google_reviews_module {
  min-height: 60px !important;
  contain: layout !important;
}

/* ── CLS-Fix 4: Galerie-Bilder – Seitenverhältnis fixieren ─── */
.sb-gallery img,
.gallery img,
[class*="gallery"] img {
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
}

/* ── CLS-Fix 5: Cookie-Banner – Platz vorab einplanen ──────── */
/* Der Cookie-Banner erscheint verzögert und verschiebt Inhalte */
.sb-cookie-banner,
[class*="cookie"],
[id*="cookie"] {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}

/* ── Google Reviews: Abstand damit X sichtbar bleibt ─────────── */
@media (max-width: 768px) {
  #sb_google_reviews_module {
    margin-bottom: 90px !important;
  }
}

/* ── Mobile Lesbarkeit (bis 600px) ─────────────────────────── */
@media (max-width: 600px) {

  #antara-custom-content p,
  #antara-custom-content li,
  #antara-custom-content details span,
  #antara-custom-content details > div p {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  #antara-custom-content details details > summary {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  #antara-custom-content > section > div > div:first-child {
    font-size: 14px !important;
  }

  #antara-custom-content h1 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  #antara-custom-content h2 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  #antara-custom-content h3 {
    font-size: 17px !important;
    line-height: 1.4 !important;
  }

  #antara-custom-content > section > details > summary {
    font-size: 17px !important;
    line-height: 1.45 !important;
  }

  #antara-custom-content a[href*="book"],
  #antara-custom-content a[href*="gift-card"] {
    font-size: 15px !important;
    padding: 14px 20px !important;
  }

  #antara-custom-content > section > div {
    padding: 20px 16px !important;
  }
}