/* Zweck: Werbeformat-Buchungsseite | Schicht: Seitentyp | Ladende Seiten: DE/EN-Werbeseite */
.ad-booking-page {
  display: grid;
  gap: 1.15rem;
  max-width: 54rem;
  font-family: var(--book-sans);
}

.ad-booking-page h1,
.ad-booking-page h2 {
  margin: 0;
  color: var(--book-ink);
  font-family: var(--book-serif);
  line-height: 1.16;
}

.ad-booking-page h1 {
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.35rem);
}

.ad-booking-list {
  display: grid;
  gap: .85rem;
}

.ad-booking-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(5.5rem, 7vw, 6.5rem) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--book-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 8px 18px rgba(3, 61, 64, .08);
}

.ad-booking-card h2 {
  font-size: 1.16rem;
}

.ad-duration-list {
  display: grid;
  gap: .35rem;
  margin-top: .65rem;
  color: var(--book-muted);
  font-family: var(--book-sans);
  font-size: .94rem;
  line-height: 1.35;
}

.ad-duration-list div {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: baseline;
}

.ad-duration-list strong {
  color: var(--book-ink);
  font-weight: 850;
}

.ad-visual-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: clamp(5.5rem, 7vw, 6.5rem);
  aspect-ratio: 1;
  min-height: 0;
  padding: .58rem;
  border: 1px solid rgba(0, 112, 118, .18);
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, .78), rgba(255, 255, 255, .78)),
    repeating-linear-gradient(0deg, rgba(0, 112, 118, .12) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, rgba(0, 112, 118, .12) 0 1px, transparent 1px 10px);
}

.ad-visual-shape {
  display: block;
  width: var(--ad-visual-width);
  height: var(--ad-visual-height);
  min-width: 1px;
  min-height: 1px;
  border: 1px solid rgba(0, 92, 92, .85);
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(15, 119, 119, .92), rgba(0, 92, 92, .8) 58%, rgba(223, 247, 243, .95));
  box-shadow: 0 7px 15px rgba(3, 61, 64, .16);
}

.ad-visual-shape--sidebar-300x50 { --ad-visual-width: 30px; --ad-visual-height: 5px; }
.ad-visual-shape--sidebar-300x100 { --ad-visual-width: 30px; --ad-visual-height: 10px; }
.ad-visual-shape--button-125x125 { --ad-visual-width: 13px; --ad-visual-height: 13px; }
.ad-visual-shape--square-200x200 { --ad-visual-width: 20px; --ad-visual-height: 20px; }
.ad-visual-shape--square-250x250 { --ad-visual-width: 25px; --ad-visual-height: 25px; }
.ad-visual-shape--sidebar-300x200 { --ad-visual-width: 30px; --ad-visual-height: 20px; }
.ad-visual-shape--sidebar-300x250 { --ad-visual-width: 30px; --ad-visual-height: 25px; }
.ad-visual-shape--skyscraper-120x600 { --ad-visual-width: 12px; --ad-visual-height: 60px; }
.ad-visual-shape--sidebanner-300x600 { --ad-visual-width: 30px; --ad-visual-height: 60px; }

.ad-booking-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.45rem;
  padding: .55rem .85rem;
  border: 1px solid rgba(217, 95, 43, .62);
  border-radius: 8px;
  background: rgba(255, 247, 239, .86);
  color: #16383a !important;
  font-family: var(--book-sans);
  font-size: .92rem;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(217, 95, 43, .12);
}

.ad-booking-button:hover,
.ad-booking-button:focus {
  border-color: rgba(217, 95, 43, .84);
  background: rgba(255, 239, 225, .98);
  color: #16383a !important;
}

html[data-theme="dark"] .ad-booking-button {
  border-color: rgba(206, 235, 232, .22);
  background: rgba(21, 55, 58, .92);
  color: #edf7f5 !important;
}

html[data-theme="dark"] .ad-booking-button:hover,
html[data-theme="dark"] .ad-booking-button:focus {
  background: rgba(42, 96, 99, .62);
  color: #e7fffc !important;
}

.ad-booking-info {
  display: grid;
  gap: .85rem;
  margin-top: .2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--book-line);
}

.ad-booking-info h2 {
  font-size: 1.08rem;
}

.ad-booking-info p {
  margin: .28rem 0 0;
  color: var(--book-muted);
  font-family: var(--book-sans);
  font-size: .94rem;
  line-height: 1.5;
}

@media (max-width: 820px) {
  .ad-booking-card {
    grid-template-columns: minmax(0, 1fr) clamp(5.5rem, 18vw, 6.5rem);
  }

  .ad-booking-button {
    grid-column: 1 / -1;
    width: 100%;
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .ad-booking-card {
    grid-template-columns: 1fr;
  }

  .ad-visual-frame {
    width: 6rem;
  }
}