/* extra-pages.css
   Zusatzstile fuer die Seiten, die es auf der alten funnydivers.com gab und
   die jetzt nachgezogen wurden: die SSI-Kursuebersicht samt Detailseiten und
   die Seite fuer die private Bootstour.

   Eigene Datei, damit courses.css / course-page.css unangetastet bleiben und
   kein ?v=-Bump ueber 80 Seiten noetig wird. */

/* --- Preisstaffel 1/2/3 Taucher in der Seitenspalte einer SSI-Kursseite --- */
.ssi-tiers{
  margin:14px 0 4px;
  border-top:1px solid rgba(13,43,51,.10);
}
.ssi-tier{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:7px 0;
  border-bottom:1px solid rgba(13,43,51,.08);
  font-size:14.5px;
}
.ssi-tier span{color:#5b7b84}
.ssi-tier b{font-weight:800;font-variant-numeric:tabular-nums}

/* --- Uebersichtsseite: Kachelraster der SSI-Kurse --- */
.ssi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:20px;
  margin-top:26px;
}
.ssi-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #dcecea;
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.ssi-card:hover,
.ssi-card:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 16px 38px rgba(2,32,44,.14);
  border-color:#b6ddd6;
}
.ssi-card-photo{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#dfeeed;
}
.ssi-card-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ssi-card-badge{
  position:absolute;
  left:12px;
  top:12px;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#0d2b33;
}
.ssi-card-body{
  padding:18px 20px 20px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.ssi-card-body h3{
  margin:0 0 8px;
  font-size:19px;
  line-height:1.25;
}
.ssi-card-body p{
  margin:0 0 16px;
  font-size:14.5px;
  line-height:1.55;
  color:#4a6870;
  flex:1;
}
.ssi-card-foot{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding-top:13px;
  border-top:1px solid #e7f2f1;
}
.ssi-card-price{font-weight:800;font-size:17px;color:#0d6f7a}
.ssi-card-dur{font-size:13px;color:#6d8a92}

/* --- Private-Boot-Seite: Fotostreifen und Merkmalsliste --- */
.pb-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;
  margin:8px 0 4px;
}
.pb-gallery figure{margin:0}
.pb-gallery img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:14px;
  display:block;
}
.pb-gallery figcaption{
  margin-top:7px;
  font-size:13px;
  color:#5b7b84;
}
.pb-points{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;
  margin-top:6px;
}
.pb-point{
  background:#f2fbfa;
  border:1px solid #dcecea;
  border-radius:14px;
  padding:16px 18px;
}
.pb-point h3{
  margin:0 0 6px;
  font-size:16.5px;
}
.pb-point p{
  margin:0;
  font-size:14.5px;
  line-height:1.55;
  color:#4a6870;
}

@media (max-width:640px){
  .ssi-grid{grid-template-columns:1fr}
  .ssi-card-body{padding:16px 17px 18px}
}