/* assets/css/buchung.css — Buchungsmodul (/buchung/, Startseiten-Anriss,
   Preisblock auch auf der Preisseite). Markup: _sections/buchung.php,
   _includes/buchung_preise.php. Der Wiki-Knopf teilt sich .gl-wiki mit
   galerie-look.css.
   Zwei Bilder, eine Hoehe: Buchungsseite 16:10, das Angebot hochkant wird
   oben angeschnitten (object-position: top). Unter 760 px untereinander.
   Punkte in fuenf Gruppen (seit 28.10.2026 abends, vorher 3x3-Raster).
   Feste Seitenverhaeltnisse, weil die Bilder verzoegert laden. */

.bk-bilder {
  display: grid;
  grid-template-columns: 3fr 1.3fr;
  gap: 18px;
  align-items: stretch;
}
.bk-bilder figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  overflow: hidden;
}
.bk-bilder img { display: block; width: 100%; }
.bk-seite img { height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.bk-angebot { position: relative; }
.bk-angebot img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: top; }

.bk-titel { margin: 40px 0 14px; font-size: 1.15rem; }

/* Fuenf Gruppen (28.10.2026): je Gruppe eine Zeile - links Titel und
   Kurzsatz, rechts die Punkte zweispaltig. Keine verwaiste Karte im
   Raster, weil jede Gruppe die volle Breite hat. */
.bk-gruppen { display: grid; gap: 14px; }
.bk-gruppe {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2.6fr;
  gap: 20px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.bk-gruppe-kopf h4 { margin: 0 0 6px; font-size: 1.05rem; }
.bk-gruppe-kopf p { margin: 0; color: var(--ink-muted); line-height: 1.5; }
.bk-punkte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 22px;
}
.bk-punkte li {
  position: relative;
  padding-left: 16px;
  line-height: 1.5;
}
.bk-punkte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Startseiten-Anriss: fuenf Karten Titel + Kurzsatz. */
.bk-kurz {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.bk-kurz li {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  line-height: 1.5;
}
.bk-kurz b { display: block; margin-bottom: 4px; }

.bk-preise { margin-top: 40px; }
.bk-preise h3 { margin: 0 0 14px; font-size: 1.15rem; }
.bk-preis-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.bk-preis-karte {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.bk-preis-karte b { display: block; margin-bottom: 6px; }
.bk-preis-karte p { margin: 0; line-height: 1.55; }
.bk-preise .price-hint { margin-top: 14px; }
.buchung .gl-wiki { margin-top: 32px; }

@media (max-width: 900px) {
  .bk-gruppe { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 620px) {
  .bk-punkte { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .bk-bilder { grid-template-columns: 1fr; gap: 12px; }
  .bk-angebot { justify-self: center; width: min(260px, 80%); }
  .bk-angebot img { position: static; height: auto; aspect-ratio: 3 / 4; }
}