/* Mountainbikeseite: nur die zwei Bausteine, die es auf der Wellness-Seite
   nicht gibt. Alles andere (Kopf, Menue, .tvoll, .tpaar, .tbreit, Fuss) kommt
   aus lp-stil.css, kopf.css und themenseiten.css.

   Die Regeln sind die der Familienseite (familie.css), hier eigenstaendig
   abgelegt: zwei Seiten sollen sich nicht gegenseitig umgestalten, wenn an
   einer davon etwas geaendert wird.

   Massen wie auf den uebrigen Themenseiten: Inhaltsbreite var(--inhalt),
   Seitenrand var(--rand), Takt 8 px. */

/* ---------- Drei Zahlenkarten nebeneinander ---------- */
.tkarten{width:min(var(--inhalt),100% - 2*var(--rand));margin:calc(var(--takt)*7) auto 0;
  display:grid;grid-template-columns:repeat(3,1fr);column-gap:40px}
.tkarte{display:flex;flex-direction:column;gap:16px}
.tkarte figure{margin:0;height:420px;overflow:hidden}
.tkarte figure img{width:100%;height:100%;object-fit:cover;display:block}
.tkarte h3{font-family:"Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;font-weight:300;font-size:24px;
  line-height:1.2;margin:0}

/* ---------- Bilderstreifen: drei Bilder, sonst nichts ---------- */
.tstreifen{width:min(var(--inhalt),100% - 2*var(--rand));margin:calc(var(--takt)*10) auto 0;
  display:grid;grid-template-columns:repeat(3,1fr);column-gap:40px}
.tstreifen figure{margin:0;height:480px;overflow:hidden}
.tstreifen figure img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:1199px){
  .tkarten{column-gap:24px}
  .tkarte figure{height:320px}
  .tstreifen{column-gap:24px}
  .tstreifen figure{height:340px}
}

@media (max-width:809px){
  .tkarten,.tstreifen{grid-template-columns:1fr;row-gap:calc(var(--takt)*4);
    margin-top:calc(var(--takt)*6)}
  .tkarte figure,.tstreifen figure{height:360px}
}